Maison > interface Web > js tutoriel > jquery implémente des effets tels que le défilement vers la gauche et la droite, le défilement en dégradé et en arrière-plan graphique des menus animés_jquery

jquery implémente des effets tels que le défilement vers la gauche et la droite, le défilement en dégradé et en arrière-plan graphique des menus animés_jquery

WBOY
Libérer: 2016-05-16 15:42:56
original
1393 Les gens l'ont consulté

本文实例讲述了jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果。分享给大家供大家参考。具体如下:

这里演示基于jquery实现的动画菜单,内含四种效果的网站菜单,第一种是不带效果的传统导航菜单,第二种是带有图形滚动背景的菜单,第三种是由右向左背景滚动的菜单,第四种则是背景色渐变的网站菜单,每一种都很精彩,喜欢Js菜单的可模仿借鉴一下。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/jquery-flash-style-cha-menu-codes/

具体代码如下:

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

<!DOCTYPE html>

<head>

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

<title>jQuery动态背景导航菜单</title>

<style type="text/css">

h2{clear: both;padding-top: 20px;}

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

li{float: left;width: 100px;margin: 0;padding: 0;text-align: center;}

li a{display: block;padding: 5px 10px;height: 100%;color: #FFF;text-decoration: none;border-right: 1px solid #FFF;}

li a{background: url(images/bg2.jpg) repeat 0 0;}

li a: hover, li a: focus, li a: active{background-position: -150px 0;}

#a a{background: url(images/bg.jpg) repeat -20px 35px;}

#b a{background: url(images/bg2.jpg) repeat 0 0;}

#c a{background: url(images/bg3.jpg) repeat 0 0;}

#d a{background: url(images/bg4.jpg) repeat 0 0;}

</style>

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

<script type="text/javascript">

(function($) {

 $.extend($.fx.step,{

  backgroundPosition: function(fx) {

  if (fx.state === 0 && typeof fx.end == 'string') {

  var start = $.curCSS(fx.elem,'backgroundPosition');

  start = toArray(start);

  fx.start = [start[0],start[2]];

  var end = toArray(fx.end);

  fx.end = [end[0],end[2]];

  fx.unit = [end[1],end[3]];

   }

  var nowPosX = [];

  nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];

  nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];

  fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

  function toArray(strg){

  strg = strg.replace(/left|top/g,'0px');

  strg = strg.replace(/right|bottom/g,'100%');

  strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");

  var res = strg.match(/(-&#63;[0-9\.]+)(px|\%|em|pt)\s(-&#63;[0-9\.]+)(px|\%|em|pt)/);

  return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];

  }

 }

 });

})(jQuery);

</script>

<script type="text/javascript">

$(function(){

 $('#a a')

  .css( {backgroundPosition: "-20px 35px"} )

  .mouseover(function(){

   $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})

  })

  .mouseout(function(){

   $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){

    $(this).css({backgroundPosition: "-20px 35px"})

   }})

  })

 $('#b a')

  .css( {backgroundPosition: "0 0"} )

  .mouseover(function(){

   $(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})

  })

  .mouseout(function(){

   $(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){

    $(this).css({backgroundPosition: "0 0"})

   }})

  })

 $('#c a')

  .css( {backgroundPosition: "0 0"} )

  .mouseover(function(){

   $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})

  })

  .mouseout(function(){

   $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})

  })

 $('#d a')

  .css( {backgroundPosition: "0 0"} )

  .mouseover(function(){

   $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})

  })

  .mouseout(function(){

   $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})

  })

});

</script>

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

</head>

<body>

<h1>jQuery Background Position</h1>

<h2>Example 0: No Script</h2>

 <ul id="noscript">

  <li><a href="#">Home</a></li>

  <li><a href="#">About</a></li>

  <li><a href="#">Contact</a></li>

 </ul>

<h2>Example A: Top down</h2>

 <ul id="a">

  <li><a href="#">Home</a></li>

  <li><a href="#">About</a></li>

  <li><a href="#">Contact</a></li>

 </ul>

<h2>Example B: Right left</h2>

 <ul id="b">

  <li><a href="#">Home</a></li>

  <li><a href="#">About</a></li>

  <li><a href="#">Contact</a></li>

 </ul>

<h2>Example C: Fade 1-colour</h2>

 <ul id="c">

  <li><a href="#">Home</a></li>

  <li><a href="#">About</a></li>

  <li><a href="#">Contact</a></li>

 </ul>

<h2>Example D: Fade 2-colour</h2>

 <ul id="d">

  <li><a href="#">Home</a></li>

  <li><a href="#">About</a></li>

  <li><a href="#">Contact</a></li>

 </ul>

</body>

</html>

Copier après la connexion

希望本文所述对大家的jquery程序设计有所帮助。

É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