您现在的位置是:网站首页> 编程资料编程资料
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); }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
相关内容
- 原生JS实现简单的轮播图效果_javascript技巧_
- JavaScript中的变量提升和函数提升_javascript技巧_
- Vite结合whistle实现一劳永逸开发环境代理方案_vue.js_
- TypeScript中let和var的区别介绍_javascript技巧_
- JavaScript Spread Syntax (...)的十种使用方法_javascript技巧_
- JavaScript的高级概念和用法详解_javascript技巧_
- vite项目添加eslint prettier及husky方法实例_vue.js_
- 2022发布ECMAScript新特性盘点_javascript技巧_
- ES6的内置对象扩展实现示例_javascript技巧_
- 代号为Naruto的Vue 2.7正式发布功能详解_vue.js_
