为了账号安全,请及时绑定邮箱和手机立即绑定
  • 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' 匀速);
    查看全部
    1 采集 收起 来源:走路的实现

    2018-03-22

  • .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
提交
取消
课程须知
本课程为高级案例课程,其中所用的大部分知识点不做深入剖析,只讲解如何使用,部分代码需要由你自己填充。 需要具备如下知识: 1、HTML4、HTML5 2、CSS2、CSS3 3、JavaScript、jQuery 4、面向对象思想
老师告诉你能学到什么?
1、如何实现页面的无缝滚动 2、如何实现视觉差效果 3、异步编程处理 4、CSS3动画过渡 5、JS动画实现 6、H5的音乐效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!