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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
前端性能优化及技巧
May 06 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
PyQt5实现拖放功能
2018/04/25 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
求职简历自荐信
2013/10/20 职场文书
自荐信模版
2013/10/24 职场文书
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
个人课题方案
2014/05/08 职场文书
2014年实习期工作总结
2014/11/27 职场文书
小学毕业教师寄语
2019/06/21 职场文书
用python实现监控视频人数统计
2021/05/21 Python
PHP中strval()函数实例用法
2021/06/07 PHP
简单聊聊Golang中defer预计算参数
2022/03/25 Golang