-
boyWalk返回这一些函数，就可以在index中直接用.去调用 很方便 return { // 开始走路 walkTo: function(time, proportionX, proportionY) { var distX = calculateDist('x', proportionX) var distY = calculateDist('y', proportionY) return walkRun(time, distX, distY); }, // 停止走路 stopWalk: function() { pauseWalk(); }, setColoer:function(value){ $boy.css('background-color',value) } }查看全部
-
anim.then(function() {<br> animate3();<br> }).then(function() {<br> alert("dsad");//执行完animate3之后 执行这个函数体里面的内容 即立即输出alert<br> animate2();//animate2的执行需要时间 但是 它已经触发 输出在animate2中定义的alert内容<br> }).then(function() {<br> $("#block4").text('block4动画动画直接结束');//animate2的执行需要时间 所以 这句话会在animate触发之后立即执行<br> })<br> })查看全部
-
dtd.then(function() { //操作1 }).then(function() { //操作2 }).then(function() { //操作3 }) 定义的函数里面 必须要有这3个步骤 var dtd = $.Deferred(); //创建 dtd.resolve(); //成功 dtd.then() //执行回调查看全部
-
自定义的animate3()函数 也可以实现相同效果~~！！！ function animate3() { var dtd = $.Deferred(); // 生成Deferred对象 $("#block3").text('block3动画动画直接结束'); dtd.resolve(); // 改变Deferred对象的执行状 return dtd; } var anim = animate1(); anim.then(function() { animate3().then(function(){ animate2().then(function() { $("#block4").text('block4动画动画直接结束'); }) }) });查看全部
-
$boy.transition( options, runTime, 'linear', function() {}设置回调函数);查看全部
-
暂停方法内transition强制做了一个设置left坐标的处理，达到一个暂停的效果，但是这样是有问题的，下一次的启动必须等上一次动画的时间结束 $("button:first").click(function() {<br> <br> $boy.addClass('slowWalk').transition({<br> <br> 'left': $("#content").width() + 'px',<br> <br> }, 10000).removeClass('pauseWalk');<br> <br> });<br> <br> 开始按钮需要移除暂停事件，否则会漂移查看全部
-
$boy.transition({ 'left': $("#content").width() + 'px', 更改的属性值 }, 10000 时间,'linear' 匀速);查看全部
-
.slowWalk { /*规定 @keyframes 动画的名称。*/ -webkit-animation-name: person-slow; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/ -webkit-animation-duration: 950ms; /*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/ -webkit-animation-iteration-count: infinite; /*动画切换的方式是一帧一帧的改变*/ -webkit-animation-timing-function: steps(1, start); }查看全部
-
小男孩的top坐标值 = 中间路段的中间坐标值 - 小男孩的高度查看全部
-
封装：即隐藏对象的属性和实现细节，仅对外公开接口。<br><br><br> 封装的目的是曾倩安全性和简化编程，使用者不必了解具体的实现细节，而只是要通过外部接口，以特定的访问权限来使用类的成员；<br><br> JavaScript中没有抽象类与接口的支持，所以很大程度上实现封装都是靠闭包去模拟~查看全部
-
transform 属性向元素应用 2D 或 3D 转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。其中会有一个值translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的，translate3d这里指明了3d就是启用了3d加速，也就是启动GPU来处理，性能更强 $('button').click(function() {<br> // 在5秒的时间内，移动X的位置，为2个页面单位<br> element.css({<br> 'transition-timing-function': 'linear',//匀速运动<br> 'transition-duration': '5000ms',<br> 'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)' //设置页面X轴移动2个页面的距离<br> });<br> });查看全部
-
每一个页面li的宽度和父元素是一样的 这样才能保证没次只显示一个li 还可以进行横向的运动 $.each(slides, function(index) { var slide = slides.eq(index); //获取到每一个li元素 slide.css({ width : width + 'px', height : height + 'px' }); });查看全部
-
var slide = slides.eq(index); // 获取到每一个li元素查看全部
-
$("p").find("span").css('color','red'); 搜索所有段落中的后代 span 元素，并将其颜色设置为红色查看全部
-
var element = container.find(":first");获得当前元素集合中每个元素的后代 :first选择器选取第一个元素。查看全部
举报
0/150
提交
取消