移动端 触屏滑动条菜单(完善版 转)

移动端 触屏滑动条菜单(完善版)


1


1

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=320,user-scalable=no" />

<title>菜单条</title>

</head>

<body>

<style style=‘display:none‘ contentEditable>

*{ margin:0; padding:0;}

ul,li{ margin:0; padding:0; list-style:none;}

#outer{ border:1px  solid red; width:300px; height:46px; margin:20px auto; text-align:center; vertical-align:middle; line-height:46px; position:relative; overflow:hidden; background:#eee;}

#outer:hover{ border-color:#333; cursor:pointer;}

#inner{ position:absolute; left:0; top:1px; height:44px; line-height:44px; width:300px; background:#666;  text-align:left; clear:both; overflow:hidden;}

#inner li{ width:auto; height:44px; float:left; display:inline; padding:0 15px; text-align:center;  }

#inner li:hover{ background:#333;}

#inner li a{font-size:14px; color:#fff; display:inline;width:auto; height:44px; line-height:44px; text-decoration:none;}

.translateZ{ -webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility: hidden;backface-visibility: hidden;}

.classtest{ background:#333;}

</style>

<div id="outer">

    <ul id="inner" >

        <li><a href="">首页start</a></li>

        <li><a href="">美剧1</a></li>

        <li><a href="">电影1</a></li>

        <li><a href="">购物1</a></li>

        <li><a href="">时尚1</a></li>

        <li><a href="">新闻1</a></li>

        <li><a href="">其他1</a></li>

        <li><a href="">热点1</a></li>

        <li><a href="">电视1</a></li>

        <li><a href="">历史1</a></li>

         <li><a href="">首页2</a></li>

        <li><a href="">美剧2</a></li>

        <li><a href="">电影2</a></li>

        <li><a href="">购物2</a></li>

        <li><a href="">时尚2</a></li>

        <li><a href="">新闻2</a></li>

        <li><a href="">其他2</a></li>

        <li><a href="">热点2</a></li>

        <li><a href="">电视2</a></li>

        <li><a href="">结尾end</a></li>

    </ul>

</div>

touches：当前屏幕上所有手指的列表

targetTouches：当前dom元素上手指的列表，尽量使用这个代替touches

changedTouches：涉及当前事件的手指的列表，尽量使用这个代替touches

<script src="../js/jquery-1.9.1.min.js"></script>

<script>

window.onload=function(){

 

    function getStyle(obj,attr){

       return obj.currentStyle? obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];

       }

    

   var support = document.body.classList==undefined ? false : true ;

   

   var outer=document.getElementById("outer");

      var inner=document.getElementById("inner");

   var li=inner.getElementsByTagName("li");

   var innerWd=0,i=0;

   for(;i<li.length;i++){

     innerWd+=li[i].offsetWidth;

   }

   inner.style.width=innerWd+‘px‘;

     

    

   var startX=0;

   var alls=0;

   var moveLeft=0;

   var iSpeedX = 0;

   var prevX = 0;

   var timer = null;

   var resetStartX=true;

   var maxDistance=parseInt(outer.offsetWidth-innerWd); //最大滑动距离

   

   inner.addEventListener("touchstart",start,false);

   function start(e){

     if(inner.offsetWidth<outer.offsetWidth)return;//如果内部元素小于外框 不需要滑动

     var e=e||window.event;

                   e.preventDefault();

      var   touchs=e.touches[0],

               resetStartX=true;;

            //startX=prevX=touchs.pageX;

      startX=touchs.pageX;

            prevX=touchs.pageX;

   

         alls=this.offsetLeft;

   

        inner.addEventListener("touchmove",move,false);

        inner.addEventListener("touchend",end,false);

    

    }

   

    function move(e){

   var e=e||window.event;

   if (e.touches.length > 1 || e.scale && e.scale !== 1) return; // 当屏幕有多个touch或者页面被缩放过，就不执行move操作

   var touchs=e.changedTouches[0];

   

        iSpeedX = touchs.pageX - prevX;//获取出手一瞬间的速度

     prevX = touchs.pageX;//当前的始终覆盖上一个

     moveLeft=touchs.pageX-startX;

  

     var that=this;

      

     if(that.offsetLeft>=0){

        if(resetStartX){

      startX=touchs.pageX;

      resetStartX=false;

      }

      that.style.left=moveLeft/3+alls+‘px‘;

      

   }else if(that.offsetLeft<=maxDistance){

    if(resetStartX){

      startX=touchs.pageX;

      resetStartX=false;

      }

      that.style.left=moveLeft/3+alls+‘px‘;

     

   }else{

       that.style.left=moveLeft+alls+‘px‘;   

      }

     

     //this.style.webkitTransform=‘translateZ(0)‘; //移动时候  缓存到GPU层

     that.classList.add(‘translateZ‘); //classList 对已经增加的样式 不在判断是否添加  GPU缓存hack

     e.preventDefault();

    }

   

    function end(){

  

   var self=this;

   clearInterval(timer);

   

   timer=setInterval(function(){

       

      if(Math.abs(iSpeedX)<=1||self.offsetLeft>50||self.offsetLeft<maxDistance-50){

          clearInterval(timer);

        //if(self.classList.contains(‘translateZ‘)){  //滚动停止 结束时候回收GPU 垃圾

//                           // self.classList.remove(‘translateZ‘); //不知道怎么删除这样样式 

//         // self.setAttribute("class",‘‘);

//                         }

                           if(self.offsetLeft>=0){

         $(inner).animate({left:0},300,function(){

          self.classList.remove(‘translateZ‘);   //移除PGU hack

          });

          }

         if(self.offsetLeft<maxDistance){  

         $(inner).animate({left:maxDistance+‘px‘},300,function(){

           self.classList.remove(‘translateZ‘);   //移除PGU hack

           });

         }

            

      }else{

           iSpeedX *= 0.95;

     self.style.left = parseInt(self.offsetLeft + iSpeedX) + ‘px‘;

     }

    },20);

   

  

     self.removeEventListener("touchmove",move,false);

     self.removeEventListener("touchend",end,false);

     //self.style.webkitTransform=‘‘;   

   }

   

  

}

 

</script>

</body>

</html>

1

优化滑动 setTimeout 相对减少时间计数


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

function end(){

        

         var self=this;

         clearTimeout(timer);

         

         timer=setTimeout(function(){

                

                  if(Math.abs(iSpeedX)<=1||self.offsetLeft>50||self.offsetLeft<maxDistance-50){

                         clearTimeout(timer);

                             //if(self.classList.contains(‘translateZ‘)){  //滚动停止 结束时候回收GPU 垃圾

//                               // self.classList.remove(‘translateZ‘); //不知道怎么删除这样样式 

//                               // self.setAttribute("class",‘‘);

//                             }

                         

                           if(self.offsetLeft>=0){

                              $(inner).animate({left:0},300,function(){

                                  self.classList.remove(‘translateZ‘);   //移除PGU hack

                                  });

                            }

                           if(self.offsetLeft<maxDistance){  

                           $(inner).animate({left:maxDistance+‘px‘},300,function(){

                                self.classList.remove(‘translateZ‘);   //移除PGU hack

                                });

                           }

                                    

                  }else{

                    iSpeedX *= 0.95;

                    self.style.left = parseInt(self.offsetLeft + iSpeedX) + ‘px‘;

                        console.log(‘setTimeoutsss‘);

                    setTimeout(arguments.callee,16)

                 }

             },16);

         

        

        self.removeEventListener("touchmove",move,false);

        self.removeEventListener("touchend",end,false);

        //self.style.webkitTransform=‘‘;     

      }

     

　　

优化滑动  requestAnimationFrame 大幅减少时间计数

       function end(){

         var self=this,
         stopFlag=null;

               function  sliderMove(){
                  if(Math.abs(iSpeedX)<=1||self.offsetLeft>50||self.offsetLeft<maxDistance-50){

                           if(self.offsetLeft>=0){
                              $(inner).animate({left:0},300,function(){
                                  self.classList.remove(‘translateZ‘);   //移除PGU hack
                                  });
                            }
                           if(self.offsetLeft<maxDistance){
                           $(inner).animate({left:maxDistance+‘px‘},300,function(){
                                self.classList.remove(‘translateZ‘);   //移除PGU hack
                                });
                           }
                            window.cancelAnimationFrame(stopFlag);//可以取消该次动画
                            stopFlag=null;
                            sliderMove=null;  //清空对象
                          console.log(‘requestAnimationFramessss‘+sliderMove);

                  }else{
                    iSpeedX *= 0.95;
                     self.style.left = parseInt(self.offsetLeft + iSpeedX) + ‘px‘;
                    console.log(‘滑动时候requestAnimationFrame次数‘);
                    stopFlag=requestAnimationFrame(arguments.callee);
                 }
               }
         sliderMove();

        self.removeEventListener("touchmove",move,false);
        self.removeEventListener("touchend",end,false);
        //self.style.webkitTransform=‘‘;
      }

requestAnimationFrame兼容处理：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

;(function() {

    var lastTime = 0;

    var vendors = [‘ms‘, ‘moz‘, ‘webkit‘, ‘o‘];

    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {

        window.requestAnimationFrame = window[vendors[x] + ‘RequestAnimationFrame‘];

        window.cancelAnimationFrame = window[vendors[x] + ‘CancelAnimationFrame‘] || window[vendors[x] + ‘CancelRequestAnimationFrame‘];

    }

    if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {

        var currTime = new Date().getTime();

        var timeToCall = Math.max(0, 16 - (currTime - lastTime));

        var id = window.setTimeout(function() {

            callback(currTime + timeToCall);

        }, timeToCall);

        lastTime = currTime + timeToCall;

        return id;

    };

    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {

        clearTimeout(id);

    };

}());

// requestAnimationFrame polyfill by Erik Möller.

// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavi?, Darius Bacon

// MIT license

if (!Date.now)

  Date.now = function() { return new Date().getTime(); };

(function() {

  ‘use strict‘;

  var vendors = [‘webkit‘, ‘moz‘];

  for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {

    var vp = vendors[i];

    window.requestAnimationFrame = window[vp+‘RequestAnimationFrame‘];

    window.cancelAnimationFrame = (window[vp+‘CancelAnimationFrame‘]

                   || window[vp+‘CancelRequestAnimationFrame‘]);

  }

  if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy

    || !window.requestAnimationFrame || !window.cancelAnimationFrame) {

    var lastTime = 0;

    window.requestAnimationFrame = function(callback) {

      var now = Date.now();

      var nextTime = Math.max(lastTime + 16, now);

      return setTimeout(function() { callback(lastTime = nextTime); },

                nextTime - now);

    };

    window.cancelAnimationFrame = clearTimeout;

  }

}());

　　

时间： 2024-10-07 05:25:21

移动端 触屏滑动条菜单(完善版 转)的相关文章

移动端 触屏滑动条菜单(完善版)

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=320,user-scalable=no" /> <title>菜单条</title> </head> <body> <style style='displ

JS案例之5——移动端触屏滑动

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取消touch事件的时候触发,这个

移动端触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取消touch事件的时候触发,这个

移动端触屏滑动，JS事件

先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:手指放到屏幕上时触发 touchmove:手指在屏幕上滑动式触发 touchend:手指离开屏幕时触发 touchcan

移动端 滑动条菜单(简陋版)

 这个滑动条 淘宝 app上比较常见; <!doctype html> <html> <head> <meta charset="utf-8"> <title>滑动条</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="vi

JS移动客户端--触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个好像比较少用 每个触摸事件被触发

JS移动客户端--触屏滑动事件 banner图效果

JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取

touch移动触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 四种touch事件 touchstart 当手指触摸到屏幕时触发,即使已经有一个手指放在了屏幕上也会触发. touchmove 当手指在屏幕上连续滑动时触发,在这个事件发生期间,调用preventDefault()可阻止滚动. touchend 当手指从屏幕上移开时触发

移动端touch触屏滑动事件、滑动触屏事件监听！

移动端touch触屏滑动事件.滑动触屏事件监听! 一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1 Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小