• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

js实现水平和竖直滑动条

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

最近在做练手项目时候,需要用到滑动条,所以就稍微研究了一下。

首先来看水平滑动条,效果图如下:

代码如下:

<html>
 <head>
  <meta charset="UTF-8">
  <title>水平滑动条</title>
  <style>
   * {
    margin: 0;
    padding: 0;
   }
 
   .scroll {
    margin: 100px;
    width: 500px;
    height: 5px;
    background: #ccc;
    position: relative;
   }
 
   .bar {
    width: 10px;
    height: 20px;
    background: #369;
    position: absolute;
    top: -7px;
    left: 0;
    cursor: pointer;
   }
   p{
    margin-left: 100px;
   }
  </style>
 </head>
 <body>
  <div class="scroll" id="scroll">
   <div class="bar" id="bar">
   </div>
  </div>
  <p></p>
  <script>
   //获取元素
   var scroll = document.getElementById('scroll');
   var bar = document.getElementById('bar');
   var ptxt = document.getElementsByTagName('p')[0];
   bar.onmousedown = function(event) {
    var event = event || window.event;
    //页面事件的X减去当前相对于最近的祖先定位元素
    var x = event.clientX - this.offsetLeft;
    document.onmousemove = function(event) {
     var event = event || window.event;
     var left = event.clientX - x;
     if (left < 0)
      left = 0;
     else if (left > scroll.offsetWidth - bar.offsetWidth) {
      left = scroll.offsetWidth - bar.offsetWidth;
     }
     //改变滑块的left
     bar.style.left = left + "px";
     ptxt.innerHTML = "当前滑块的移动的百分比:" + parseInt(left / (scroll.offsetWidth - bar.offsetWidth) * 100) + "%";
     //防止选择内容
     window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }
 
   }
   //当鼠标弹起的时候,不做任何操作
   document.onmouseup = function() {
    document.onmousemove = null;
   }
  </script>
 </body>
</html>

竖直滑动条效果图如下:

代码如下:

<html>
 <head>
  <meta charset="UTF-8">
  <title>竖直滑动条</title>
  <style>
   * {
    margin: 0;
    padding: 0;
   }
   .scroll{
    margin: 100px;
    width: 5px;
    height: 320px;
    background: #ccc;
    position: relative;
   }
 
   .bar {
    width: 15px;
    height: 5px;
    background: #369;
    position: absolute;
    top: 0px;
    left: -5;
    cursor: pointer;
   }
   p{
    margin-left: 100px;
   }
  </style>
 </head>
 <body>
  <div class="scroll" id="scroll">
   <div class="bar" id="bar">
   </div>
  </div>
  <p></p>
  <script>
   //获取元素
   var scroll = document.getElementById("scroll");
   var bar = document.getElementById("bar");
   var ptxt = document.getElementsByTagName('p')[0];
   //添加事件
   bar.onmousedown = function(event) {
    var event = event || window.event;
    //页面事件的Y减去当前相对于最近的祖先定位元素
    var y = event.clientY - this.offsetTop;
    // 拖动需要写到down里面
    document.onmousemove = function(event) {
     var event = event || window.event;
     //获取移动的距离
     var top = event.clientY - y;
     if (top < 0){
      top = 0;
     }
     else if (top > scroll.offsetHeight - bar.offsetHeight){
      top = scroll.offsetHeight - bar.offsetHeight;
     }
     //改变滑块的top
     bar.style.top = top + "px";
     //按照百分比得到当前滑动的距离
     ptxt.innerHTML = "当前滑块的移动的百分比:" + parseInt(top/(scroll.offsetHeight - bar.offsetHeight) * 100) + "%";
     //防止选择内容
     window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }
   }
   //当鼠标弹起的时候,不做任何操作
   document.onmouseup = function() {
    document.onmousemove = null; 
   }
   
  </script>
 </body>
</html>

这里之所以加入移动百分比的展示效果,主要是考虑到后续如果需要对接后台的数据就可以达到动态控制的目的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
js和jquery实现tab状态栏切换效果发布时间:2022-02-05
下一篇:
JavaScript中极易出错的操作符运算总结发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap