您现在的位置是:网站首页> 编程资料编程资料

JS实现滑动条案例_javascript技巧_

2023-05-24 397人已围观

简介 JS实现滑动条案例_javascript技巧_

本文实例为大家分享了JS实现滑动条效果的具体代码,供大家参考,具体内容如下

在完成这个案例之前需要看一下这个博客:JS案例-添加缓动画

这个案例会用到上面博客的缓动画函数。实现效果如下:

完整代码如下:

html代码:

                         滑动条案例                  
               
问题反馈
   
     

JS代码:

function moves(obj, target, callback) {     clearInterval(obj.timer);     obj.timer = setInterval(function() {         // 把步长值改为整数,不要出现小数的情况 往上取整         var step = (target - obj.offsetLeft) / 10;         step = step > 0 ? Math.ceil(step) : Math.floor(step);         // 回调函数写在清除定时器里面 这里只能写等于         if (obj.offsetLeft == target) {             clearInterval(obj.timer);             if (callback) {                 callback();             }         }         obj.style.left = obj.offsetLeft + step + 'px';         // console.log(obj.style.left);       }, 15); }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

-六神源码网