JS自定义滚动条效果


Posted in Javascript onMarch 13, 2020

本文实例为大家分享了JS自定义滚动条的具体代码,供大家参考,具体内容如下

<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 #all{
 width: 500px;
 height: 50px;
 background-color: sandybrown;
 border-radius: 25px;
 margin: 0 auto;
 position: relative;
 }
 #div1{
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background-color: rosybrown;
 position: absolute;
 } 
 #box{
 background-color: yellow;
 position: absolute;
 top: 200px;
 left: 200px;
 }
 </style>
</head>
<body>
 <div id="all">
 <div id="div1"></div>
 </div>
 <div id="box"></div>
 <script type="text/javascript">
 var oAll = document.getElementById("all");
 var oDiv1 = document.getElementById("div1");
 var oBox = document.getElementById("box");
 var maxL = oAll.clientWidth - oDiv1.offsetWidth;
 oDiv1.onmousedown = function(){
 var ev = ev || window.event;
 var lessX = ev.clientX - oDiv1.offsetLeft; 
 
 document.onmousemove = function(){
 var ev = ev || window.event;
 var posL = ev.clientX - lessX;
 if(posL<0){
 posL = 0;
 }
 if(posL>maxL){
 posL = maxL;
 }
 oDiv1.style.left = posL + "px";
 //滚动条移动的百分比
 //oDiv1.offsetLeft/maxL
 var per = posL/maxL;
 //定义宽0~300
 oBox.style.width = 300*per+"px";
 oBox.style.height = 300*per+"px";
 oBox.style.marginTop = -oBox.offsetHeight/2+"px";
 oBox.style.marginLeft = -oBox.offsetWidth/2+"px";
 }
 }
 
 document.onmouseup =function(){
 document.onmousemove = null;
 
 }
 
 </script>
</body>

更多关于滚动效果的精彩文章点击下方专题:

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

Javascript 相关文章推荐
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
js Math数学简单使用操作示例
Mar 13 #Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 #Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 #Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 #Javascript
创建nuxt.js项目流程图解
Mar 13 #Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 #Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 #Javascript
You might like
在WIN98下以apache模块方式安装php
2006/10/09 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
jQuery实现动态向上滚动
2020/12/21 jQuery
JavaScript实现消消乐的源代码
2021/01/12 Javascript
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
Python读大数据txt
2016/03/28 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
python3.7添加dlib模块的方法
2020/07/01 Python
python中@contextmanager实例用法
2021/02/07 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
高三自我鉴定范文
2013/10/19 职场文书
标准导师推荐信(医学类)
2013/10/28 职场文书
老师自我鉴定范文
2013/12/25 职场文书
入党自荐书范文
2014/03/09 职场文书
硕士生找工作求职信
2014/07/05 职场文书
公司租房协议书范本
2014/10/08 职场文书
公司给客户的感谢信
2015/01/23 职场文书
会议通知范文
2015/04/15 职场文书
如何在C++中调用Python
2021/05/21 Python
原生JS实现飞机大战小游戏
2021/06/09 Javascript
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server