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 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 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
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
PHP静态成员变量
2017/02/14 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
Sublime开发python程序的示例代码
2018/01/24 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
Linux机考试题
2015/10/16 面试题
环保公益广告语
2014/03/13 职场文书
档案保密承诺书
2014/06/03 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
家长会开场白和结束语
2015/05/29 职场文书
详解python网络进程
2021/06/15 Python
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技