-
在实现的时候还需要注意几个问题 开关门是2组动画，需要2组transition的实现 开关门是否完成，是需要监听2个动画是否完成才可以 为了支持线性编程的逻辑，需要通过Deferred改善代码 开门的left的坐标是往反向变化，所以变化的值是： 左边0%到-50% 右边50%到100%在实现的时候还需要注意几个问题 开关门是2组动画，需要2组transition的实现 开关门是否完成，是需要监听2个动画是否完成才可以 为了支持线性编程的逻辑，需要通过Deferred改善代码 开门的left的坐标是往反向变化，所以变化的值是： 左边0%到-50% 右边50%到100% 关门的left还原到0%与50%即可。 关门的left还原到0%与50%即可。查看全部
-
animation-name 规定要绑定的keyframes的名称，随便你取，不过为了日后维护的方便，建议取一个跟动作相关名称相近的名称比较好 animation-duration 规定完成这个动画所需要的时间查看全部
-
页面开始滚动： element.css({ 'transition-timing-function': 'linear', 'transition-duration': '5000ms', 'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)' //设置页面X轴移动 });查看全部
-
111查看全部
-
111查看全部
-
dtd.then(function() { //操作1 }).then(function() { //操作2 }).then(function() { //操作3 }) 3个步骤 var dtd = $.Deferred(); //创建 dtd.resolve(); //成功 dtd.then() //执行回调查看全部
-
.slowWalk { /* 填入动画样式规则 */ animation-name: person-slow; animation-duration:950ms; animation-iteration-count:infinite; animation-timing-function:steps(1,start) } /* 普通慢走 */ @keyframes person-slow { 0% { background-position: -0px -291px; } 25% { background-position: -602px -0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: -0px -291px; } }查看全部
-
这里最后返回swipe是用到闭包中的知识的，可以看到在swipe的scrollTo方法中用到了element元素，当调用scrollTo方法后，不会把该元素当做垃圾释放掉，当第二次调用scrollTo时，此时的element为上次调用后的element，此时便实现了多次调用scrollTo方法时，整个页面移动的连贯性。 可使用下面代码验证： var swipe = Swipe($("#content")); swipe.scrollTo(100, 1000); setTimeout('swipe.scrollTo(200, 1000);',2000);查看全部
-
新建一个Swipe.js文件，内部定义一个Swipe工厂方法，内部会产生一个swipe的滑动对象，暴露了scrollTo的接口查看全部
-
动画与动画之间产生的异步查看全部
-
异步请求怎么 处理？查看全部
-
转换、渐变、动画、音频查看全部
-
css动画查看全部
-
整体到细节查看全部
-
技术：css3的 转换、动画、渐变，html5的音频查看全部
举报
0/150
提交
取消