-
@查看全部
-
$Deferred处理也就是先创建一个deferred对象，然后返回该对象，以便后面链式调用，就像一个挂钩把所有的调用接在一根线上。 function animate1() { var dtd = $.Deferred(); // 生成Deferred对象 $("#block3").animate({ width: "50%" }, 2000, function() { dtd.resolve(); // 改变Deferred对象的执行状态 }); return dtd; }查看全部
-
h5+js+css3实现七夕言情。 这个就是整体框架 如何实现动画？？ 用不同手段实现的动画 应该注意哪些问题？？ 动画与动画之间产生的异步 怎样梳理代码流程查看全部
-
视觉差表现页面滚动和小男孩走动查看全部
-
路径动画就是你想某个东西按照你预想的路径来运动。比如说一片树叶从树上落下来，具体要怎样落下来，你就可以画一条线作为路径，让树叶沿着线落下来，这就是路径动画。查看全部
-
我喜欢查看全部
-
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 原理： CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。 一个简单的例子： 一张图片作出一个按钮的三个状态 一个链接用CSS做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，a:link，a:hover，a:active。 <a class="button" href="#">链接</a> 加入右侧的图片为：200px×65px的三个按钮图拼合而成的图片button.png，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。 a { display:block; width:200px; height:65px; line-height:65px; /*定义状态*/ text-indent:-2015px; /*隐藏文字*/ background-image:url(button.png); /*定义背景图片*/ background-position:0 0; /*定义链接的普通状态，此时图像显示的是顶上的部分*/} a:hover {background-position:0 -66px; /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/} a:active {background-position:0 -132px; /*定义链接的普通状态，此时显示的是底部的部分，向下取负值*/} 而更多的CSS雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值，如：background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位。查看全部
-
通过$.Deferred处理过的代码，很明显没有了回调的嵌套，虽然代码量看起来多了点，但是实际上，每一个代码执行部分都被封装了起来，只留了Deferred的接口处理了，等于是我们把执行的流程控制交给了Deferred，这样的好处就是我们在写嵌套函数的时候，可以用deferred提供的管道风格编写同步代码了查看全部
-
Promise 是一种令代码异步行为更加优雅的抽象，有了它，我们就可以像写同步代码一样去写异步代码。这个东东看起来很复杂，实际上我们只要抓住核心的使用就可以了查看全部
-
哈哈哈哈查看全部
-
transform 改变坐标的处理可以分为2种： 传统的top,left坐标修改 CSS3中的transform属性 传统的就是修改元素style是坐标属性，这个没什么好说的，使用简单，一般都需要配合定时器使用。 CSS3引入了一个新的属性Transform transform 属性向元素应用 2D 或 3D 转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。其中会有一个值translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的，translate3d这里指明了3d就是启用了3d加速，也就是启动GPU来处理，性能更强 过去，为了实现这种平滑的过渡效果，我们需要借助于Flash技术，现在只需要简单的使用CSS3 Transition的方法就可以实现，这是一个简单的动画属性 transition可以设置一些具体的参数，比如动画执行的时间，变化的算法、动画延时等等，具体大家可以搜索更细致的资料查看全部
-
通过溢出隐藏多余的页面 hidden查看全部
-
$('button:last').click(function() { function animate1() { var dtd = $.Deferred(); // 生成Deferred对象 $("#block3").animate({ width: "50%" }, 2000, function() { dtd.resolve(); // 改变Deferred对象的执行状态 }); return dtd; } function animate2() { var dtd = $.Deferred(); // 生成Deferred对象 $("#block4").animate({ width: "50%" }, 2000, function() { dtd.resolve(); // 改变Deferred对象的执行状态 }); return dtd; } var anim = animate1(); anim.then(function() { $("#block3").text('block3动画动画直接结束'); return animate2(); }).then(function() { $("#block4").text('block4动画动画直接结束'); }); });查看全部
-
通过$.Deferred处理过的代码，很明显没有了回调的嵌套，虽然代码量看起来多了点，但是实际上，每一个代码执行部分都被封装了起来，只留了Deferred的接口处理了，等于是我们把执行的流程控制交给了Deferred，这样的好处就是我们在写嵌套函数的时候，可以用deferred提供的管道风格编写同步代码了 dtd.then(function() { //操作1 }).then(function() { //操作2 }).then(function() { //操作3 }) 这里要了解3个步骤 var dtd = $.Deferred(); //创建 dtd.resolve(); //成功 dtd.then() //执行回调 例子： $('button:last').click(function() { function animate1() { var dtd = $.Deferred(); // 生成Deferred对象 $("#block3").animate({ width: "50%" }, 2000, function() { dtd.resolve(); // 改变Deferred对象的执行状态 }); return dtd; } var anim = animate1(); anim.then(function() { $("#block3").text('block3动画动画直接结束'); return animate2(); }).then(function() { $("#block4").text('block4动画动画直接结束'); }); });查看全部
-
前端充斥着大量的异步操作，动画就是异步的逻辑，七夕主题的整个设计都是以小男孩走路为主线。在走到不同的路段就会有不同的操作，走路是通过CSS3的transition与animation结合完成的，所以针对这类异步的处理我采用了jQuery的Deferred封装起来。查看全部
举报
0/150
提交
取消