javascript实现滑动条效果

最新推荐文章于 2023-04-28 15:34:45 发布
最新推荐文章于 2023-04-28 15:34:45 发布
阅读量1.8k 收藏 6
点赞数
分类专栏： js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39634880/article/details/96498413
版权
js 同时被 2 个专栏收录
40 篇文章 0 订阅
订阅专栏
html5
5 篇文章 0 订阅
订阅专栏

1.单个滑动方块(移动范围:1%到99%)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .slider-border-parents-2019-07-11{
        width:630px;
        height:80px;
        border:1px solid #fff;
    }
    .slider-border-cross-bar-2019-07-11{
        margin-top:31px;
        width: 100%;
        height: 18px;
        display: flex;
        position: relative;
    }
    .slider-border-cross-bar-one-2019-07-11{
        width:20%;
        height:100%;
        background: #009933;
        border-right: 0.5px solid #33cc33;
    }
    .slider-border-cross-bar-two-2019-07-11{
        width:20%;
        height:100%;
        background: #009933;
        border-right: 0.5px solid #33cc33;
    }
    .slider-border-cross-bar-three-2019-07-11{
        width:20%;
        height:100%;
        background: #009933;
        border-right: 0.5px solid #33cc33;
    }
    .slider-border-cross-bar-four-2019-07-11{
        width:20%;
        height:100%;
        background: #ff6633;
        border-right: 0.5px solid #33cc33;
    }
    .slider-border-cross-bar-five-2019-07-11{
        width:10%;
        height:100%;
        background: #ff6633;
    }
    .slider-border-cross-bar-six-2019-07-11{
        width:10%;
        height:100%;
        background: #ff3333;
    }
    .slider-scale-bottom-2019-07-11{
        width:650px;
        display: flex;
        justify-content:space-between;
        color:#dab794;
        font-size: 10px;
        margin-top:7px;
    }
    .slider-mobile-indicators-one-2019-07-11{
        position: absolute;
        width:12px;
        height:55px;
        top:-32px;
        left:10px;
    }
    .slider-mobile-indicators-block-one-2019-07-11{
        width:12px;
        height:35px;
        background:#fff;
        border:1px solid #282828;
        cursor: pointer;
        margin-top: 5px;
    }
    .slider-mobile-indicators-now-proportion-one-2019-07-11{
        color:#000;
        font-size: 13px;
    }
    /* dolphin-maple默认开通页面-输入状态页面 end */
    /* 区服状态设计-服务开通 star */
    .set-slider-warp{
        width: 96%;
        margin: 0 auto;
    }
    .set-slider-warp .set-sliname-warp{
        display: flex;
    }
    .set-slider-warp .set-sliname p{
        display: inline-block;
    }
    .set-slider-warp .set-sliname-has p{
        display: inline-block;
        margin-right: 8px;
    }
    .set-slider-warp .set-sliname-has p:before{
        content:"";
        display:inline-block;
        width:12px;
        height:10px;
        margin-right: 8px;
        border-radius:2px;
    }
    .set-slider-warp .set-sliname-has .has-1:before{
        background:#009933;
    }
    .set-slider-warp .set-sliname-has .has-2:before{
        background:#ff6633;
    }
    .set-slider-warp .set-sliname-has .has-3:before{
        background:#ff3333;
    }
    .set-slider-warp .set-slider-box{
        padding: 10px 0 0 74px;
    }
    .set-slider-warp .slider-slg-p{
        color: #a2a2a2;
        font-size: 12px;
        padding: 16px 0;
    }
    .set-slider-warp .slider-slg-p a{
        color: #2199ed;
    }
    /* 区服状态设计-服务开通 end */

</style>
<body>
<div class="set-slider-warp">
    <div class="set-sliname-warp">
        <div class="set-sliname">
            <p>状态说明：</p>
        </div>
        <div class="set-sliname-has">
            <p class="has-1">良好</p>
            <p class="has-2">拥挤</p>
            <p class="has-3">繁忙</p>
        </div>
    </div>
    <div class="set-slider-box">
        <div class="c-slider-box">
            <div class="slider-border-parents-2019-07-11">
                <div class="slider-border-cross-bar-2019-07-11">
                    <div class="slider-border-cross-bar-one-2019-07-11"></div>
                    <div class="slider-border-cross-bar-two-2019-07-11"></div>
                    <div class="slider-border-cross-bar-three-2019-07-11"></div>
                    <div class="slider-border-cross-bar-four-2019-07-11"></div>
                    <div class="slider-border-cross-bar-five-2019-07-11"></div>
                    <div class="slider-border-cross-bar-six-2019-07-11"></div>
                    <div class="slider-mobile-indicators-one-2019-07-11" id="mobile-indicators-one">
                        <div class="slider-mobile-indicators-now-proportion-one-2019-07-11"
                             id="slider-mobile-indicators-now-proportion-one-2019-07-11">1%</div>
                        <div class="slider-mobile-indicators-block-one-2019-07-11" 
                             id="slider-mobile-indicators-block-one-2019-07-11"></div>
                    </div>
                </div>
                <div class="slider-scale-bottom-2019-07-11">
                    <div>0</div>
                    <div>20%</div>
                    <div>40%</div>
                    <div>60%</div>
                    <div>80%</div>
                    <div>100%</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var nowProportionValueOne=1;
    var mobileIndicatorsOne = document.getElementById("mobile-indicators-one");
    mobileIndicatorsOne.onmousedown = function(e) {
        stopBubble(e);
        stopDefault(e);
        document.getElementById("slider-mobile-indicators-block-one-2019-07-11").style.cursor="Move";
        let sliderMobileIndicatorsNowProportionOne =
            document.getElementById("slider-mobile-indicators-now-proportion-one-2019-07-11");
        e = e ? e : window.event;　　　　//因为兼容问题
        let startX;
        let moveSwitch = true;
        let currentLeft;
        startX = e.clientX;
        currentLeft = document.getElementById("mobile-indicators-one").offsetLeft;　　
        //通过对象获取对象的坐标
        document.onmousemove = function (e) {
            stopBubble(e);
            stopDefault(e);
            e = e ? e : window.event;　　　　
            //因为兼容问题
            if (moveSwitch) {
                var x = e.clientX;　　　　　　　
                　//e.clientX是一个触摸事件，即是鼠标点击时的X轴上的坐标
                var y = e.clientY;　　　　　　　　
                //e.clientY是一个触摸事件，即是鼠标点击时的Y轴上的坐标
                var distanceX = x - startX;　　　
                　//X轴上获得移动的实际距离
                // console.log(distanceX + currentLeft);
                document.getElementById("mobile-indicators-one").style.left = 
                    distanceX + currentLeft + "px";
                if((distanceX + currentLeft)>624){
                    nowProportionValueOne = 99;
                    sliderMobileIndicatorsNowProportionOne.innerText ="99%";
                    moveSwitch = false;
                    document.onmousemove = null;
                    document.onmouseup = null;
                    document.getElementById("mobile-indicators-one").style.left = "624px";
                    document.getElementById("slider-mobile-indicators-block-one-2019-07-11").style.cursor="pointer";
                }else if((distanceX + currentLeft)<7){
                    nowProportionValueOne =1;
                    sliderMobileIndicatorsNowProportionOne.innerText = (1)+"%";
                    moveSwitch = false;
                    document.onmousemove = null;
                    document.onmouseup = null;
                    document.getElementById("mobile-indicators-one").style.left = "7px";
                    document.getElementById("slider-mobile-indicators-block-one-2019-07-11").style.cursor="pointer";
                }else{
                    console.log(parseInt(((distanceX + currentLeft)/630)*100));
                    let nowProportionValue;
                    if(parseInt(((distanceX + currentLeft)/630)*100)==0){
                        nowProportionValue = 1+"%";
                    }else{
                        nowProportionValue = parseInt(((distanceX + currentLeft)/630)*100)+"%";
                    }
                    nowProportionValueOne =parseInt(((distanceX + currentLeft)/630)*100);
                    sliderMobileIndicatorsNowProportionOne.innerText = nowProportionValue;
                }
            }
        };
        document.onmouseup = function (e) {
            stopBubble(e);
            stopDefault(e);
            e = e ? e : window.event;　　　
            　//因为兼容问题
            moveSwitch = false;
            document.onmousemove = null;
            document.onmouseup = null;
            document.getElementById("slider-mobile-indicators-block-one-2019-07-11").style.cursor="pointer";
        }
    }
    function stopBubble(e) {
        //如果提供了事件对象，则这是一个非IE浏览器
        if ( e && e.stopPropagation ){
            //因此它支持W3C的stopPropagation()方法
            e.stopPropagation();
        } else{
            //否则，我们需要使用IE的方式来取消事件冒泡
            window.event.cancelBubble = true;
        }
    }
    //阻止浏览器的默认行为
    function stopDefault( e ) {
        //阻止默认浏览器动作(W3C)
        if ( e && e.preventDefault ){
            e.preventDefault();
        } else{
            //IE中阻止函数器默认动作的方式
            window.event.returnValue = false;
        }
        return false;
    }
</script>
</body>
</html>

2.效果图

3.两个滑动方块(移动范围:方块一必须小于方块二)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .slider-border-parents-2019-07-11{
        width:630px;
        height:80px;
        border:1px solid #fff;
    }
    .slider-border-cross-bar-2019-07-11{
        margin-top:31px;
        width: 100%;
        height: 18px;
        display: flex;
        position: relative;
    }
    .slider-border-cross-bar-one-2019-07-11{
        width:20%;
        height:100%;
        background: #009933;
        border-right: 0.5px solid #33cc33;
    }
    .slider-border-cross-bar-two-2019-07-11{
        width:20%;
        height:100%;
        background: #009933;
        border-right: 0.5px solid #33cc33;
    }
    .slider-border-cross-bar-three-2019-07-11{
        width:20%;
        height:100%;
        background: #009933;
        border-right: 0.5px solid #33cc33;
    }
    .slider-border-cross-bar-four-2019-07-11{
        width:20%;
        height:100%;
        background: #ff6633;
        border-right: 0.5px solid #33cc33;
    }
    .slider-border-cross-bar-five-2019-07-11{
        width:10%;
        height:100%;
        background: #ff6633;
    }
    .slider-border-cross-bar-six-2019-07-11{
        width:10%;
        height:100%;
        background: #ff3333;
    }
    .slider-scale-bottom-2019-07-11{
        width:650px;
        display: flex;
        justify-content:space-between;
        color:#dab794;
        font-size: 10px;
        margin-top:7px;
    }
    .slider-mobile-indicators-one-2019-07-11{
        position: absolute;
        width:12px;
        height:55px;
        top:-32px;
        left:10px;
    }
    .slider-mobile-indicators-two-2019-07-11{
        position: absolute;
        width:12px;
        height:55px;
        top:-32px;
        left:100px;
    }
    .slider-mobile-indicators-block-one-2019-07-11{
        width:12px;
        height:35px;
        background:#fff;
        border:1px solid #282828;
        cursor: pointer;
        margin-top: 5px;
    }
    .slider-mobile-indicators-block-two-2019-07-11{
        width:12px;
        height:35px;
        background:#fff;
        border:1px solid #282828;
        cursor: pointer;
        margin-top: 5px;
    }
    .slider-mobile-indicators-now-proportion-one-2019-07-11{
        color:#000;
        font-size: 13px;
    }
    .slider-mobile-indicators-now-proportion-two-2019-07-11{
        color:#000;
        font-size: 13px;
    }
    /* dolphin-maple默认开通页面-输入状态页面 end */
    /* 区服状态设计-服务开通 star */
    .set-slider-warp{
        width: 96%;
        margin: 0 auto;
    }
    .set-slider-warp .set-sliname-warp{
        display: flex;
    }
    .set-slider-warp .set-sliname p{
        display: inline-block;
    }
    .set-slider-warp .set-sliname-has p{
        display: inline-block;
        margin-right: 8px;
    }
    .set-slider-warp .set-sliname-has p:before{
        content:"";
        display:inline-block;
        width:12px;
        height:10px;
        margin-right: 8px;
        border-radius:2px;
    }
    .set-slider-warp .set-sliname-has .has-1:before{
        background:#009933;
    }
    .set-slider-warp .set-sliname-has .has-2:before{
        background:#ff6633;
    }
    .set-slider-warp .set-sliname-has .has-3:before{
        background:#ff3333;
    }
    .set-slider-warp .set-slider-box{
        padding: 10px 0 0 74px;
    }
    .set-slider-warp .slider-slg-p{
        color: #a2a2a2;
        font-size: 12px;
        padding: 16px 0;
    }
    .set-slider-warp .slider-slg-p a{
        color: #2199ed;
    }
    /* 区服状态设计-服务开通 end */

</style>
<body>
<div class="set-slider-warp">
    <div class="set-sliname-warp">
        <div class="set-sliname">
            <p>状态说明：</p>
        </div>
        <div class="set-sliname-has">
            <p class="has-1">良好</p>
            <p class="has-2">拥挤</p>
            <p class="has-3">繁忙</p>
        </div>
    </div>
    <div class="set-slider-box">
        <div class="c-slider-box">
            <div class="slider-border-parents-2019-07-11">
                <div class="slider-border-cross-bar-2019-07-11">
                    <div class="slider-border-cross-bar-one-2019-07-11"></div>
                    <div class="slider-border-cross-bar-two-2019-07-11"></div>
                    <div class="slider-border-cross-bar-three-2019-07-11"></div>
                    <div class="slider-border-cross-bar-four-2019-07-11"></div>
                    <div class="slider-border-cross-bar-five-2019-07-11"></div>
                    <div class="slider-border-cross-bar-six-2019-07-11"></div>
                    <div class="slider-mobile-indicators-one-2019-07-11" id="mobile-indicators-one">
                        <div class="slider-mobile-indicators-now-proportion-one-2019-07-11"
                             id="slider-mobile-indicators-now-proportion-one-2019-07-11">1%</div>
                        <div class="slider-mobile-indicators-block-one-2019-07-11"
                             id="slider-mobile-indicators-block-one-2019-07-11">1</div>
                    </div>
                    <div class="slider-mobile-indicators-two-2019-07-11" id="mobile-indicators-two">
                        <div class="slider-mobile-indicators-now-proportion-two-2019-07-11"
                        id="slider-mobile-indicators-now-proportion-two-2019-07-11">15%</div>
                        <div class="slider-mobile-indicators-block-two-2019-07-11"
                          id="slider-mobile-indicators-block-two-2019-07-11">2</div>
                    </div>
                </div>
                <div class="slider-scale-bottom-2019-07-11">
                    <div>0</div>
                    <div>20%</div>
                    <div>40%</div>
                    <div>60%</div>
                    <div>80%</div>
                    <div>100%</div>
                </div>
            </div>
        </div>
    </div>
</div>
  <script>
      var nowProportionValueOne=1;
      var nowProportionValueTwo=15;
      var mobileIndicatorsOne = document.getElementById("mobile-indicators-one");
      mobileIndicatorsOne.onmousedown = function(e) {
          stopBubble(e);
          stopDefault(e);
          let sliderMobileIndicatorsBlockOne =
              document.getElementById("slider-mobile-indicators-block-one-2019-07-11");
          sliderMobileIndicatorsBlockOne.style.cursor="Move";
          let sliderMobileIndicatorsNowProportionOne =
              document.getElementById("slider-mobile-indicators-now-proportion-one-2019-07-11");
          e = e ? e : window.event;　　　　//因为兼容问题
          let startX;
          let moveSwitch = true;
          let currentLeft;
          let nowProportionValueTwoNumber = parseInt((nowProportionValueTwo*630)/100);
          startX = e.clientX;
          currentLeft = document.getElementById("mobile-indicators-one").offsetLeft;　　
          //通过对象获取对象的坐标
          document.onmousemove = function (e) {
              stopBubble(e);
              stopDefault(e);
              e = e ? e : window.event;　　　
              　//因为兼容问题
              if (moveSwitch) {
                  var x = e.clientX;　　　　　　　
                  　//e.clientX是一个触摸事件，即是鼠标点击时的X轴上的坐标
                  var y = e.clientY;　　　　　　　　
                  //e.clientY是一个触摸事件，即是鼠标点击时的Y轴上的坐标
                  var distanceX = x - startX;　　　
                  　//X轴上获得移动的实际距离
                  // console.log(distanceX + currentLeft);
                  document.getElementById("mobile-indicators-one").style.left =
                      distanceX + currentLeft + "px";
                  if((distanceX + currentLeft)>(nowProportionValueTwoNumber-3)){
                      nowProportionValueOne =nowProportionValueTwo-1;
                      sliderMobileIndicatorsNowProportionOne.innerText = (nowProportionValueTwo-1)+"%";
                      moveSwitch = false;
                      document.onmousemove = null;
                      document.onmouseup = null;
                      sliderMobileIndicatorsBlockOne.style.cursor="pointer";
                      document.getElementById("mobile-indicators-one").style.left =
                          (nowProportionValueTwoNumber-3)+"px";
                  }else if((distanceX + currentLeft)<7){
                      nowProportionValueOne =1;
                      sliderMobileIndicatorsNowProportionOne.innerText = (1)+"%";
                      moveSwitch = false;
                      document.onmousemove = null;
                      document.onmouseup = null;
                      sliderMobileIndicatorsBlockOne.style.cursor="pointer";
                      document.getElementById("mobile-indicators-one").style.left = "7px";
                  }else{
                      console.log(parseInt(((distanceX + currentLeft)/630)*100));
                      let nowProportionValue;
                      if(parseInt(((distanceX + currentLeft)/630)*100)==0){
                          nowProportionValue = 1+"%";
                      }else{
                          nowProportionValue = parseInt(((distanceX + currentLeft)/630)*100)+"%";
                      }
                      nowProportionValueOne =parseInt(((distanceX + currentLeft)/630)*100);
                      sliderMobileIndicatorsNowProportionOne.innerText = nowProportionValue;
                  }
              }
          };
          document.onmouseup = function (e) {
              stopBubble(e);
              stopDefault(e);
              e = e ? e : window.event;　　　
              　//因为兼容问题
              moveSwitch = false;
              document.onmousemove = null;
              document.onmouseup = null;
              sliderMobileIndicatorsBlockOne.style.cursor="pointer";
          }
      }
      var mobileIndicatorsTwo = document.getElementById("mobile-indicators-two");
      mobileIndicatorsTwo.onmousedown = function(e) {
          stopBubble(e);
          stopDefault(e);
          let sliderMobileIndicatorsBlockTwo =
              document.getElementById("slider-mobile-indicators-block-two-2019-07-11");
          sliderMobileIndicatorsBlockTwo.style.cursor="Move";
          let sliderMobileIndicatorsNowProportionTwo =
              document.getElementById("slider-mobile-indicators-now-proportion-two-2019-07-11");
          let nowProportionValueOneNumber = parseInt((nowProportionValueOne*630)/100);
          e = e ? e : window.event;　　　　//因为兼容问题
          let startX;
          let moveSwitch = true;
          let currentLeft;
          startX = e.clientX;
          currentLeft = document.getElementById("mobile-indicators-two").offsetLeft;　
          　//通过对象获取对象的坐标
          document.onmousemove = function (e) {
              stopBubble(e);
              stopDefault(e);
              e = e ? e : window.event;　　　
              　//因为兼容问题
              if (moveSwitch) {
                  var x = e.clientX;　　　　　　　　
                  //e.clientX是一个触摸事件，即是鼠标点击时的X轴上的坐标
                  var y = e.clientY;　　　　　　　　
                  //e.clientY是一个触摸事件，即是鼠标点击时的Y轴上的坐标
                  var distanceX = x - startX;　　　
                  　//X轴上获得移动的实际距离
                  console.log(distanceX + currentLeft);
                  document.getElementById("mobile-indicators-two").style.left =
                      distanceX + currentLeft + "px";
                  if((distanceX + currentLeft)>624){
                      nowProportionValueTwo = 99;
                      sliderMobileIndicatorsNowProportionTwo.innerText ="99%";
                      moveSwitch = false;
                      document.onmousemove = null;
                      document.onmouseup = null;
                      sliderMobileIndicatorsBlockTwo.style.cursor="pointer";
                      document.getElementById("mobile-indicators-two").style.left = "624px";
                  }else if((distanceX + currentLeft)<(nowProportionValueOneNumber+10)){
                      nowProportionValueTwo = nowProportionValueOne+1;
                      sliderMobileIndicatorsNowProportionTwo.innerText =(nowProportionValueOne+1)+"%";
                      moveSwitch = false;
                      document.onmousemove = null;
                      document.onmouseup = null;
                      sliderMobileIndicatorsBlockTwo.style.cursor="pointer";
                      document.getElementById("mobile-indicators-two").style.left =
                          (nowProportionValueOneNumber+10)+"px";
                  }else{
                      console.log(parseInt(((distanceX + currentLeft)/630)*100));
                      let nowProportionValue = parseInt(((distanceX + currentLeft)/630)*100)+"%";
                      nowProportionValueTwo = parseInt(((distanceX + currentLeft)/630)*100);
                      sliderMobileIndicatorsNowProportionTwo.innerText =nowProportionValue;
                  }
              }
          };
          document.onmouseup = function (e) {
              stopBubble(e);
              stopDefault(e);
              e = e ? e : window.event;　　　　
              //因为兼容问题
              moveSwitch = false;
              document.onmousemove = null;
              document.onmouseup = null;
              sliderMobileIndicatorsBlockTwo.style.cursor="pointer";
          }
      };
      function stopBubble(e) {
            //如果提供了事件对象，则这是一个非IE浏览器
          if ( e && e.stopPropagation ){
              //因此它支持W3C的stopPropagation()方法
              e.stopPropagation();
          } else{
              //否则，我们需要使用IE的方式来取消事件冒泡
              window.event.cancelBubble = true;
          }
      }
      //阻止浏览器的默认行为
      function stopDefault( e ) {
          //阻止默认浏览器动作(W3C)
          if ( e && e.preventDefault ){
              e.preventDefault();
          } else{
              //IE中阻止函数器默认动作的方式
              window.event.returnValue = false;
          }
          return false;
      }
  </script>
</body>
</html>

4.效果图

Future_object
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript图片滑动效果实现
10-23
主要介绍了超实用的javascript图片滑动效果实现方法,实例分析了javascript通过对页面元素与相关属性的操作实现滑动菜单效果的相关技巧，具有一定参考借鉴价值，需要的朋友可以参考下
javascript实现滚动条效果
11-20
本文实例为大家分享了javascript实现滚动条效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
原生js自定义slider滑块组件
qq564280420的博客
03-24 3973
通过鼠标事件和定位模拟滑块滑动
js 实现slider封装
weixin_30770783的博客
03-29 479
1）记得动画类代码要在启动新的动画时删除旧的动画 launch <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>淘宝首页图片轮播效果</title> <style> <!--...
JavaScript Slider效果实现思路
chelen_jak的专栏
05-10 1511
转自：http://www.kuqin.com/webpagedesign/20120330/319521.html 演示：http://prower.cn/jsdemo/slider.html 源
JS手写slider组件（缩放拖拽）
~
07-23 1187
效果：点击观看 布局： <div id='box' className='drag-bar-box'> <div id='drag' className='drag-bar'> <div id='scaleleft' className='drag-block-left'></div> <div id='scaleright' className='drag-block-right
一个javascript实现的slider效果
哈彿小丸子的专栏
03-20 6263
       每次写这些代码的时候我都是想谈一谈自己的感受，这里我也不免又想谈谈。我说过这里是我工作倾诉的地方，自己的空间畅所欲言虽然是自己的感想，但是网络上你并不认识我我也不怕你知道，因为在网络上去共享别人的思想，这是一件非常愉快的事情。至少我是怎么认为的。因为工作中难免会存在很多事情，如果大家都说出来，偶尔的被看到了，说不定也是遇到了这样情况，那么就会根据别人的感想而知道自己去怎么处理，很多的
基于JavaScript实现div层跟随滚动条滑动
10-22
项目需求是这样的：在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置，下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料，对js div跟随滚动条滑动相关...
基于JavaScript实现移动端TAB触屏切换效果
12-28
我们说的TAB一般由导航条和TAB对应的内容组成，切换导航条上的标签同时标签对应的内容也会跟着切换。本文将结合实例给大家介绍一个移动端TAB触屏切换效果。 HTML 我们准备一个TAB导航#pagenavi，里面包含TAB导航要...
Javascript实现滑动条slider鼠标事件松开才设置相应值实例教程
zimicheng的博客
04-28 402
Javascript实现滑动条slider鼠标松开才设置相应值实例教程，本文还包括通过输入框输入值来实现滑动条滑动
JavaScript Slider效果实现思路 源码）
05-10
JavaScript Slider效果实现思路 源码）
js 滑块插件slider
08-21
这是基于jquery的插件，完全满足时间，数字的插件。 参考示例：http://www.jq22.com/jquery-info6088 请测有效！！！
使用原生js写的一个简单slider
10-26
主要介绍了使用原生js写的一个简单slider，喜欢的朋友可以参考下
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 1930
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
滑动条slide的js实现
weixin_44217882的博客
05-05 557
实现效果图： *利用localStorage在本地存储滑块位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa
javascript基于前端框架react或者vue或者其他其他框架导出数据生成csv文件,以及导入csv文件读取数据的简单例子
热门推荐
qq_39634880的博客
10-17 1万+
1.用npm在项目中安装以下插件: //根据数据导出生成csv文件插件安装 npm install file-saver --save //导入csv文件生成数据插件安装 npm install papaparse --save npm install jschardet --save npm install iconv-lite --save npm install encoding --s...
js实现1到100随机数添加到数组，并且不重复
qq_39634880的博客
05-17 9906
var arr=[]; for(var i=0;i&lt;100;i++){ var arrNum=parseInt(Math.random()*100)+1; var flag=true; for(var j=0;j&lt;=arr.length;j++){ if(arrNum==arr[j]) { flag = false; ...
nodejs基于ejs的一个简单demo
qq_39634880的博客
10-25 9273
1文件大概目录 2.建立项目文件,先建一个ejs_demo文件夹,在ejs_demo运行下面命令,初始化仓库,一路回车: npm init 3.安装两个ejs和express插件: npm install ejs --save npm install express --save 4.建立文件app.js,写上以下代码: var http=require("http"); v...
js实现监听样式变化
qq_39634880的博客
10-04 9179
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> #box2,#box1,#box3{ ...
web网页怎么实现滑动效果
最新发布
05-10
以下是使用jQuery和iScroll库实现滑动效果的示例： - jQuery ```html <li>Item 1 <li>Item 2 <li>Item 3 <li>Item 4 <li>Item 5 <li>Item 6 <li>Item 7 <li>Item 8 <li>Item 9 <li>Item 10 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值