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 相关文章推荐
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
js post提交调用方法
Feb 12 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
Vue中props的使用详解
Jun 15 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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
一个odbc连mssql分页的类
2006/10/09 PHP
用PHP开发GUI
2006/10/09 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
python批量下载抖音视频
2019/06/17 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
通过代码实例了解Python异常本质
2020/09/16 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
西部世纪面试题
2014/12/05 面试题
医科学校毕业生自荐信
2013/11/09 职场文书
管理站站长岗位职责
2013/11/27 职场文书
大学运动会入场词
2014/02/22 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL