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_03_javascript全局观
Oct 11 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
angular分页指令操作
Jan 09 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
实例详解带参数的 npm script
May 28 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
小程序实现侧滑删除功能
Jun 25 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漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
javascript中this指向详解
2016/04/23 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python正规则表达式学习指南
2016/08/02 Python
python pygame模块编写飞机大战
2018/11/20 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
python读写文件write和flush的实现方式
2020/02/21 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
工程力学专业自荐信范文
2014/03/17 职场文书
青年教师个人总结
2015/02/11 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
岗位聘任协议书
2015/09/21 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL