Maison > interface Web > js tutoriel > jQuery réalise l'effet de tremblement de menu de la page Web shake_jquery

jQuery réalise l'effet de tremblement de menu de la page Web shake_jquery

WBOY
Libérer: 2016-05-16 15:46:27
original
1346 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation par jQuery de l'effet de gigue de menu de la gigue de page Web. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

L'effet du menu de navigation jQuery shake ici est compatible avec IE7/8/9 et d'autres navigateurs grand public. Comment l'utiliser : introduisez d'abord la bibliothèque de scripts jQuery et le fichier jquery.shake.js, puis appelez la méthode shake(). les éléments requis. Par exemple, si vous souhaitez faire trembler la page entière, écrivez : $('body').shake() Après avoir appelé la méthode ci-dessus, déplacez la souris sur l'élément spécifié et l'élément tremblera.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

body { background-color: lightgreen; }

#demo, #demo *, #footer, #footer * { margin: 0; padding: 0; }

#demo, #footer { width: 70%; margin: 1em auto; font: normal 1em/1.4em 微软雅黑; }

#demo ul { list-style: none; overflow: hidden; background-color: rgb(241, 241, 241); padding: 1em 0; }

#demo ul li { float: left; width: 10%; text-align: center; cursor: pointer; padding: .3em 0; color: #262626; }

#demo ul li:hover { background-color: #D4D4D4; }

#msg { font-size: 1.2em; text-align: center; margin: 2em 0; }

#footer { font-size: .8em; }

#footer p { margin: .3em 0; }

#footer a { color: rgb(126, 34, 34); text-decoration: none; }

#footer a:hover { text-decoration: underline; }

#footer a:visited { color: rgb(187, 166, 166); }

</style>

<title>jQuery抖动导航菜单效果</title>

<script src="jquery-1.6.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

(function ($) {

$.fn.shake = function (s) {

 var t = { rangeX: 2, rangeY: 2, rangeRot: 1, rumbleSpeed: 10, rumbleEvent: 'hover', posX: 'left', posY: 'top' }, u = $.extend(t, s);

 return this.each(function () {

  var $obj = $(this)

  , f

  , g = u.rangeX * 2

  , h = u.rangeY * 2

  , i = u.rangeRot * 2

  , j = u.rumbleSpeed

  , k = $obj.css('position')

  , l = u.posX

  , m = u.posY

  , n

  , o

  , p

  , q = { 'position': k, '-webkit-transform': 'rotate(0deg)', '-moz-transform': 'rotate(0deg)', '-o-transform': 'rotate(0deg)', 'transform': 'rotate(0deg)' };

  if (l === 'left') {

  n = parseInt($obj.css('left'), 10)

  }

  if (l === 'right') {

  n = parseInt($obj.css('right'), 10)

  }

  if (m === 'top') {

  o = parseInt($obj.css('top'), 10)

  }

  if (m === 'bottom') {

  o = parseInt($obj.css('bottom'), 10)

  }

  function rumbler(a) {

  var b = Math.random()

  , c = Math.floor(Math.random() * (g + 1)) - g / 2

  , d = Math.floor(Math.random() * (h + 1)) - h / 2

  , e = Math.floor(Math.random() * (i + 1)) - i / 2;

  if (a.css('display') === 'inline') {

   p = true;

   a.css('display', 'inline-block')

  }

  if (c === 0 && g !== 0) {

   c = b < .5 &#63; 1 : -1;

  }

  if (d === 0 && h !== 0) {

   d = b < .5 &#63; 1 : -1;

  }

  if (k === 'absolute') {

   a.css({ 'position': 'absolute', '-webkit-transform': 'rotate(' + e + 'deg)', '-moz-transform': 'rotate(' + e + 'deg)', '-o-transform': 'rotate(' + e + 'deg)', 'transform': 'rotate(' + e + 'deg)' });

   a.css(l, n + c + 'px');

   a.css(m, o + d + 'px')

  }

  if (k === 'fixed') {

   a.css({ 'position': 'fixed', '-webkit-transform': 'rotate(' + e + 'deg)', '-moz-transform': 'rotate(' + e + 'deg)', '-o-transform': 'rotate(' + e + 'deg)', 'transform': 'rotate(' + e + 'deg)' });

   a.css(l, n + c + 'px');

   a.css(m, o + d + 'px')

  }

  if (k === 'static' || k === 'relative') {

   a.css({ 'position': 'relative', '-webkit-transform': 'rotate(' + e + 'deg)', '-moz-transform': 'rotate(' + e + 'deg)', '-o-transform': 'rotate(' + e + 'deg)', 'transform': 'rotate(' + e + 'deg)' });

   a.css(l, c + 'px');

   a.css(m, d + 'px')

  }

  }

  if (u.rumbleEvent === 'hover') {

  $obj.hover(function () {

   var a = $(this);

   f = setInterval(function () {

   rumbler(a)

   }, j)

  }, function () {

   var a = $(this);

   clearInterval(f);

   a.css(q);

   a.css(l, n + 'px');

   a.css(m, o + 'px');

   if (p === true) {

   a.css('display', 'inline')

   }

  });

  }

  if (u.rumbleEvent === 'click') {

  $obj.toggle(function () {

   var a = $(this);

   f = setInterval(function () {

   rumbler(a)

   }, j)

  }, function () {

   var a = $(this);

   clearInterval(f);

   a.css(q);

   a.css(l, n + 'px');

   a.css(m, o + 'px');

   if (p === true) {

   a.css('display', 'inline')

   }

  });

  }

  if (u.rumbleEvent === 'mousedown') {

  $obj.bind({

   mousedown: function () {

   var a = $(this);

   f = setInterval(function () {

    rumbler(a)

   }, j)

   }, mouseup: function () {

   var a = $(this);

   clearInterval(f);

   a.css(q);

   a.css(l, n + 'px');

   a.css(m, o + 'px');

   if (p === true) {

    a.css('display', 'inline')

   }

   }, mouseout: function () {

   var a = $(this);

   clearInterval(f);

   a.css(q);

   a.css(l, n + 'px');

   a.css(m, o + 'px');

   if (p === true) {

    a.css('display', 'inline')

   }

   }

  });

  }

  if (u.rumbleEvent === 'constant') {

  var r = $(this);

  f = setInterval(function () {

   rumbler(r)

  }, j);

  }

 });

 }

}(jQuery));

</script>

</head>

<body>

 <div id="demo">

 <ul>

  <li>首页</li>

  <li>ASP</li>

  <li>PHP</li>

  <li>JSP</li>

  <li>DELPHI</li>

  <li>VC++</li>

  <li>C#</li>

  <li>VB</li>

  <li>.NET</li>

 </ul>

 <div id="msg">将鼠标移动到导航条上查看效果</div>

 </div>

 <script type="text/javascript">

 $('#demo li').shake();

 </script>

</body>

</html>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal