cari

Rumah  >  Soal Jawab  >  teks badan

javascript - 小白请教下，怎么把JQuery里的mouse事件全改成touch事件（代码在下面），mouse事件在手机端用不了啊？

<!DOCTYPE html>
<html>

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

<code><head>

    <meta charset="utf-8">

    <title>圆形旋转导航菜单</title>

    <style>

        html,body{padding: 0;margin: 0;}

    </style>

    <script src="js/jquery-1.11.0.js"></script>

    <script src="js/jquery.rotate.min.js"></script>

    <script src="js/touch.js"></script>

</head>

<body>

    <!-- 代码部分begin -->

    <!--

        圆形菜单[最多容纳8个最大正方形菜单块, 若需容纳更多的菜单块,则需要缩小菜单块的大小]

        半径 oR = 150px;

        圆心坐标(150,150)

    -->

    <p id="outerp" style="background-color: green;width:300px;height:300px;border-radius:150px;position: absolute;">

        <!--

            圆心

            半径 iR = 50px;

            圆心坐标(150,150)

        -->

        <p id="" style="background: blue;width: 100px;height: 100px;border-radius: 50px;position: absolute;left:100px;top:100px;"></p>

        <!--

            ==========================

            最大菜单块(正方形)

            对角线长度 mDLen = oR - iR;

            边长 mWidth = mHeight = mDLen的平方 / 2 的结果 再开方 最后取整

            ==========================

            菜单块滑动圆

            半径 mR = iR + (mDLen / 2)

            ==========================

        -->

        <p id="m1" style="position: absolute; background: yellow;">1</p>

        <p id="m2" style="position: absolute; background: red;">2</p>

        <p id="m3" style="position: absolute; background: yellow;">3</p>

        <p id="m4" style="position: absolute; background: red;">4</p>

        <p id="m5" style="position: absolute; background: yellow;">5</p>

        <p id="m6" style="position: absolute; background: red;">6</p>

        <p id="m7" style="position: absolute; background: yellow;">7</p>

        <p id="m8" style="position: absolute; background: red;">8</p>

    </p>

    <script type="text/javascript">

        var or = 150;

        var ir = 50;

        var mWidth = 54;

        var mDLen = Math.sqrt(2 * Math.pow(mWidth,2));

        //第1菜单块中心点与以o(150,150)为圆心的的X轴的夹角为-90(-PI/2), 求菜单块中心点坐标

        var m1X = parseInt( (Math.cos( -1 * Math.PI / 2 ) * (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        var m1Y = parseInt( (Math.sin( -1 * Math.PI / 2 ) *  (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        $("#m1").width(mWidth);

        $("#m1").height(mWidth);

        $("#m1").offset( {top:m1Y,left:m1X} );

 

        //第2菜单块中心点与以o(150,150)为圆心的的X轴的夹角为-45(-PI/4), 求菜单块中心点坐标

        var m2X = parseInt( (Math.cos( -1 * Math.PI / 4 ) *  (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        var m2Y = parseInt( (Math.sin( -1 * Math.PI / 4 ) *  (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        $("#m2").width(mWidth);

        $("#m2").height(mWidth);

        $("#m2").offset( {top:m2Y,left:m2X} );

 

        //第3菜单块中心点与以o(150,150)为圆心的的X轴的夹角为0(0), 求菜单块中心点坐标

        var m3X = parseInt( (Math.cos( 0 ) *  (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        var m3Y = parseInt( (Math.sin( 0 ) *  (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        $("#m3").width(mWidth);

        $("#m3").height(mWidth);

        $("#m3").offset( {top:m3Y,left:m3X} );

 

        //第4菜单块中心点与以o(150,150)为圆心的的X轴的夹角为45(PI/4), 求菜单块中心点坐标

        var m4X = parseInt( (Math.cos( Math.PI / 4 ) *  (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        var m4Y = parseInt( (Math.sin( Math.PI / 4 ) *  (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        $("#m4").width(mWidth);

        $("#m4").height(mWidth);

        $("#m4").offset( {top:m4Y,left:m4X} );

 

        //第5菜单块中心点与以o(150,150)为圆心的的X轴的夹角为90(PI/2), 求菜单块中心点坐标

        var m5X = parseInt( (Math.cos( Math.PI / 2 ) *  (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        var m5Y = parseInt( (Math.sin( Math.PI / 2 ) *  (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        $("#m5").width(mWidth);

        $("#m5").height(mWidth);

        $("#m5").offset( {top:m5Y,left:m5X} );

 

        //第6菜单块中心点与以o(150,150)为圆心的的X轴的夹角为135(0.75PI), 求菜单块中心点坐标

        var m6X = parseInt( (Math.cos( 0.75 * Math.PI ) *  (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        var m6Y = parseInt( (Math.sin( 0.75 * Math.PI ) *  (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        $("#m6").width(mWidth);

        $("#m6").height(mWidth);

        $("#m6").offset( {top:m6Y,left:m6X} );

 

        //第7菜单块中心点与以o(150,150)为圆心的的X轴的夹角为180(PI), 求菜单块中心点坐标

        var m7X = parseInt( (Math.cos( Math.PI ) *  (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        var m7Y = parseInt( (Math.sin( Math.PI ) *  (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        $("#m7").width(mWidth);

        $("#m7").height(mWidth);

        $("#m7").offset( {top:m7Y,left:m7X} );

 

        //第8菜单块中心点与以o(150,150)为圆心的的X轴的夹角为-135(PI), 求菜单块中心点坐标

        var m8X = parseInt( (Math.cos( -0.75 * Math.PI ) *  (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        var m8Y = parseInt( (Math.sin( -0.75 * Math.PI ) *  (ir + ((or - ir - mDLen)/2) + mDLen/2) ) + 150 - mWidth/2 );

        $("#m8").width(mWidth);

        $("#m8").height(mWidth);

        $("#m8").offset( {top:m8Y,left:m8X} );

 

        //===============================================

 

        var preX,preY;//上一次鼠标点的坐标

        var curX,curY;//本次鼠标点的坐标

        var preAngle;//上一次鼠标点与圆心(150,150)的X轴形成的角度(弧度单位)

        var transferAngle;//当前鼠标点与上一次preAngle之间变化的角度

 

        var a = 0;

 

        for(var i = 0 ; i < 15 ; i++){

            $("body").append("<br>");

        }

 

        //点击事件

        $("#outerp").mousedown(function(event){

            preX = event.clientX;

            preY = event.clientY;

            //计算当前点击的点与圆心(150,150)的X轴的夹角(弧度) --> 上半圆为负(0 ~ -180), 下半圆未正[0 ~ 180]

            preAngle = Math.atan2(preY - 150, preX - 150);

            //移动事件

            $("html").mousemove(function(event){

                curX = event.clientX;

                curY = event.clientY;

                //计算当前点击的点与圆心(150,150)的X轴的夹角(弧度) --> 上半圆为负(0 ~ -180), 下半圆未正[0 ~ 180]

                var curAngle = Math.atan2(curY - 150, curX - 150);

                transferAngle = curAngle - preAngle;

                a += (transferAngle * 180 / Math.PI);

                $('#outerp').rotate(a);

 

                for( var i = 1 ; i <= 8 ; i++ ){

                    $("#m"+i).rotate(-a);

                }

                preX = curX;

                preY = curY;

                preAngle = curAngle;

            });

            //释放事件

            $("html").mouseup(function(event){

                $("html").unbind("mousemove");

            });

        });

    </script>

    <!-- 代码部分end -->

</body></code>

</html>

巴扎黑巴扎黑2908 hari yang lalu859

membalas semua(1)saya akan balas

  • 黄舟

    黄舟2017-04-11 11:54:57

    在jquery中有函数就是绑定事件的

      1. on（事件名称，事件回调）
        2.bind（事件名称，事件回调）

    比如$("p").on("touchend",function(){})就行了.

    bind也是如此

    但是建议使用on
    因为在jquery3中 已经将bind函数删除

    balas
    0
  • Batalbalas