js仿滚动条
来源:互联网 发布:日本 结婚 年龄 知乎 编辑:程序博客网 时间:2024/05/17 03:07
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>仿滚动条</title><style type="text/css">#con_wrap {width: 300px;height: 300px;margin:0 auto;border:1px solid #333;/*overflow: hidden;*/position: relative;}#con {position: absolute;left: 0;top: 0;font-size: 1.2rem;}#scoll {width: 800px;height: 45px;background-color: #fbf3ba;position: absolute;bottom: 65px;left: 65px;}#scoll #scoll_sider {width: 75px;height: 45px;background-color: red;position: absolute;left: 0;}#rate {width: 70px;height: 34px;color:red;position: absolute;bottom: 5px;left:50%;margin-left: -35px;}</style></head><body><div id="con_wrap"><div id="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ab voluptas eaque, veniam quos totam. Eos perferendis, porro nemo neque dignissimos aut corporis, illo amet vero debitis, tenetur possimus asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ab voluptas eaque, veniam quos totam. Eos perferendis, porro nemo neque dignissimos aut corporis, illo amet vero debitis, tenetur possimus asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ab voluptas eaque, veniam quos totam. Eos perferendis, porro nemo neque dignissimos aut corporis, illo amet vero debitis, tenetur possimus asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ab voluptas eaque, veniam quos totam. Eos perferendis, porro nemo neque dignissimos aut corporis, illo amet vero debitis, tenetur possimus asperiores.</div></div><div id="scoll"><div id="scoll_sider"></div></div><span id="rate">0%</span><script type="text/javascript">var oScoll = document.getElementById('scoll');var oSco_sider = document.getElementById('scoll_sider');var oRate = document.getElementById('rate');var oCon = document.getElementById('con');var oCon_wrap = document.getElementById('con_wrap');var disX2 = 0;var rate = 0;oSco_sider.onmousedown = function(ev){var oEvent = ev||event;disX2 = oEvent.clientX - oSco_sider.offsetLeft;document.onmousemove = function(ev){var oEvent = ev||event;var l = oEvent.clientX - disX2;if (l<0) {l = 0;}else if(l > (oScoll.offsetWidth - oSco_sider.offsetWidth)){l = oScoll.offsetWidth - oSco_sider.offsetWidth;}oSco_sider.style.left = l + 'px';rate = l/(oScoll.offsetWidth - oSco_sider.offsetWidth);var temp = (rate*100).toFixed(2) + '%';oRate.innerHTML = temp;oCon.style.top = -rate*(oCon.offsetHeight - oCon_wrap.offsetHeight)+'px';}document.onmouseup = function(){document.onmousemove = null;document.onmouseup = null;}}</script></body></html>
0 0
- js仿滚动条
- 仿滚动条
- js控制滚动条
- js滚动条
- js滚动条技巧
- 关于js滚动条
- js禁用滚动条
- js 模拟 滚动条
- js禁用滚动条
- js滚动条位置
- JS滚动条
- js滚动条
- js模拟滚动条
- js滚动条
- js滚动条
- Js-添加滚动条
- js滚动条控制
- js滚动条特效
- STL--BFS(广度优先搜索)
- 从今天开始,写博客,总结学过的知识。
- The Book List 2016北京网赛
- 面试中java高编问题
- 15.2.2
- js仿滚动条
- 项目案例: 迷你DVD管理器
- 关于单链表的存储问题
- php的相关配置
- 反射调用普通方法(5)
- 好玩的 C 语言
- "文件保护"的解决方法
- 终端Fedora vim配置文件编辑
- javaweb 下载文件