mobile-touch实现时间轴特效

最新推荐文章于 2021-08-31 17:47:23 发布

专业前端小白

最新推荐文章于 2021-08-31 17:47:23 发布

阅读量449

点赞数

分类专栏： jquery插件 touch事件文章标签： jquery时间轴 touch

本文链接：https://blog.csdn.net/qq_41756580/article/details/87858795

版权

jquery插件同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

touch事件

1 篇文章 0 订阅

订阅专栏

使用jquery-mobile插件能够很方便的监听到移动端的滑动事件，直接复制下面代码即可：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      .TimeBox{
        width: 80%;
        height: 200px;
        margin: 0 auto;
        background-color: #fff; 
      }
      .TimeBox .TimeLine{
        height: 80%;
        width: 80%;
        margin: 0 auto;
        border-bottom: 1px dashed #bbb;
        position: relative;
      }
      .TimeBox .TimeLine .TimeDot{
        position: absolute;
        width: 10px;
        height: 10px;
        cursor: pointer;
        border-radius: 50%;
        background-color: #bbb;
        bottom: -5px;
        left: -5px;
        transform: scale(1,1);
        font-size: 10px;
        transition: all 0.25s;
      }
      .TimeBox .TimeLine .TimeDotAct{
        font-size: 14px;
        transform: scale(1.2,1.2);
        color: #CC3300;
        background-color: #CC3300;
      }
      .TimeBox .TimeLine .TimeDot .TimeLabel{
        position: absolute;
        top: -25px;
        margin-left: -20px;
        text-align: center;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="TimeBox">
      <div class="TimeLine">
        <div class="TimeDot TimeDotAct"><label class="TimeLabel">09:11:00</label></div>
        <div class="TimeDot"><label class="TimeLabel">09:11:00</label></div>
        <div class="TimeDot"><label class="TimeLabel">09:11:00</label></div>
        <div class="TimeDot"><label class="TimeLabel">09:11:00</label></div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript">
      var DotLength = $("div.TimeDot").length-1;
      $("div.TimeDot").each(function(i,val){
        var baifenbi = i*(100/DotLength);
        $(this).css("left",baifenbi+"%");
      });

      $("div.TimeDot").on("click",function(){
        console.log("click me");
        $(this).addClass("TimeDotAct");
        $(this).siblings().removeClass("TimeDotAct");
      });

      $(document).on("swipeleft",function(){
        console.log("left");
        var _this = $("div.TimeDotAct");
        _this.next().addClass("TimeDotAct");
        if(_this.next().length==0){
          return;
        }
        _this.removeClass("TimeDotAct");
      });

      $(document).on("swiperight",function(){
        console.log("right");
        var _this = $("div.TimeDotAct");
        _this.prev().addClass("TimeDotAct");
        if(_this.prev().length==0){
          return;
        }
        _this.removeClass("TimeDotAct");
      });
    </script>
  </body>
</html>

效果如下：

专业前端小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
mobile-touch实现时间轴特效

使用jquery-mobile插件能够很方便的监听到移动端的滑动事件，直接复制下面代码即可：<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=...
复制链接

扫一扫