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 相关文章推荐
IFrame跨域高度自适应实现代码
Aug 16 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
JS作用域深度解析
Dec 29 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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
牡丹941资料
2021/03/01 无线电
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
深入理解redux之compose的具体应用
2020/01/12 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python 面向对象部分知识点小结
2020/03/09 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
数控技校生自我鉴定
2014/04/19 职场文书
3分钟演讲稿
2014/04/30 职场文书
教师个人年度总结
2015/02/11 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
导游词之麻姑仙境
2019/11/18 职场文书