h5、pc、移动端元素导航标题侧滑

复制以下代码，并自己改正引用JQ的路径即可

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>h5侧滑</title>
       <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
       <style>
           *{margin: 0; padding: 0;}
           .top_plate {
               background: #f0f0f0;
               height: 40px;
               position: relative;
               overflow: hidden;
           }

           .top_plate ul {
               position: absolute;
               left: 0;
               height: 40px;
               width: 10000px;
               margin: 0;
               padding: 0;
           }

           .top_plate li {
               margin: 0;
               list-style: none;
           }

           .top_plate li a {
               display: block;
               height: 40px;
               line-height: 40px;
               padding: 0 10px;
           }

           .top_plate li a.hot {
               color: #F00;
           }
       </style>
   </head>
   <body>
       <div class="top_plate"id="cms_nav_2">
           <ul>
               <li style="clear:none; float:left;">
                   <a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
               </li>
               <li style="clear:none; float:left;">
                   <a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
               </li>
               <li style="clear:none; float:left;">
                   <a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
               </li>
               <li style="clear:none; float:left;">
                   <a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
               </li>
               <li style="clear:none; float:left;">
                   <a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
               </li>
               <li style="clear:none; float:left;">
                   <a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
               </li>
               <li style="clear:none; float:left;">
                   <a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
               </li>
               <li style="clear:none; float:left;">
                   <a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
               </li>
           </ul>
       </div>

       <script type="text/javascript" src="jquery-1.12.1.js" ></script>
       <script>
           //左右侧滑模板

//频道触屏滑动
//触屏滑动触发
   function touchChannel() {
   //全局变量，触摸开始位置
   var startX = 0,
   startD = 0,
   OX = 0,
   md =- (ul_w - gW)
   //若想拉到最右边时有个50px 的位置放下拉箭头，则md改为：
           //       md = -50 - (ul_w - gW) 且上面的if里的ul_w > ul_wrap改为ul_w > ul_wrap-50


   //touchstart事件
   function touchSatrtFunc(evt) {
   try {
   //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
   var touch = evt.touches[0]; //获取第一个触点
   var x = Number(touch.pageX); //页面触点X坐标
   var y = Number(touch.pageY); //页面触点Y坐标

   //记录触点初始位置
   startX = x;
   OX = parseInt($("#cms_nav_2 ul").css("left").replace('px', '')); //记录当前位置
   console.log(OX)
   } catch (e) {
   //alert('touchSatrtFunc：' + e.message);
   }
   }

   //touchmove事件，这个事件无法获取坐标
   function touchMoveFunc(evt) {
   try {
   //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
   var touch = evt.touches[0]; //获取第一个触点
   var x = Number(touch.pageX); //页面触点X坐标
   var y = Number(touch.pageY); //页面触点Y坐标

   startD = x - startX;

   if (OX + startD > 0) {
   var logx = 2 * Math.sqrt(startD + OX);
   $("#cms_nav_2 ul").css("left", logx);
   } else if (OX + startD < md) {
   var logx = 2 * Math.sqrt(md - OX - startD);
   $("#cms_nav_2 ul").css("left", md - logx);

   } else {
   $("#cms_nav_2 ul").css("left", OX + startD);
   }

   } catch (e) {
   //alert('touchMoveFunc：' + e.message);
   }
   }

   //touchend事件
   function touchEndFunc(evt) {
   var ml = parseInt($("#cms_nav_2 ul").css("left").replace('px', ''));
   try {
   //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
   if (ml >= 0 && startD > 0) {
   $("#cms_nav_2 ul").animate({ left: 0, }, 300);
   } else if (ml < md && startD < 0) {
   $("#cms_nav_2 ul").animate({ left: md, }, 300);
   } else {

   }
   } catch (e) {
   alert('touchEndFunc：' + e.message);
   }
   }

   function bindEvent() {
   document.getElementById("cms_nav_2").addEventListener('touchstart', touchSatrtFunc, false);
   document.getElementById("cms_nav_2").addEventListener('touchmove', touchMoveFunc, false);
   document.getElementById("cms_nav_2").addEventListener('touchend', touchEndFunc, false);
   }

   //判断是否支持触摸事件
   function isTouchDevice() {
   try {
   document.createEvent("TouchEvent");
   bindEvent(); //绑定事件
   } catch (e) {}
   }
   window.onload = isTouchDevice;
   }

//频道触屏滑动end

</script>
</body>
</html>

h5、pc、移动端元素导航标题侧滑

猜你喜欢