Heim > Web-Frontend > js-Tutorial > jquery implementiert den horizontalen Bildlaufeffektcode „sharing_jquery'.

jquery implementiert den horizontalen Bildlaufeffektcode „sharing_jquery'.

WBOY
Freigeben: 2016-05-16 15:42:17
Original
1162 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den horizontalen Scrolleffekt von Bildern mit jquery. Ich möchte ihn als Referenz mit Ihnen teilen. Die Details lauten wie folgt:
Vorgangsrendering: -------------------Effekt anzeigen---------------------------------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.
Der für alle freigegebene JQuery-Code, um den horizontalen Bildlaufeffekt von Bildern zu erzielen, lautet wie folgt

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

<HEAD>

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

<TITLE>jquery实现图片水平滚动效果</TITLE>

<LINK rel="stylesheet" type="text/css" href="css/style.css">

<SCRIPT type="text/javascript" src="js/ga.js"></SCRIPT>

<SCRIPT type="text/javascript" src="js/jquery.js"></SCRIPT>

</HEAD>

<BODY>

 

<!--演示内容开始-->

<SCRIPT type="text/javascript" src="js/jquery.min.1.5.1.js"></SCRIPT>

<SCRIPT type="text/javascript" src="js/jquery.ui.1.8.10.js"></SCRIPT>

<SCRIPT type="text/javascript" src="js/jCoverflip.js"></SCRIPT>

<DIV class="artist_flow_contn">

 <UL id="flip" class="ui-jcoverflip">

  <LI style="left: 80px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG

style="width: 120px; display: inline-block;" border="0" src="images/01.jpg"></A><SPAN

style="display: none;" class="title"><A href="#"

target="_blank">jquery图片切换插件制作图片层叠缩放展示效果</A></SPAN></LI>

  <LI style="left: 220px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG

style="width: 160px; display: inline-block;" border="0" src="images/02.jpg"></A><SPAN

style="display: none;" class="title"><A href="#"

target="_blank">jquery图像幻灯片制作大小图片切换滚动展示</A></SPAN></LI>

  <LI style="left: 400px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG

style="width: 120px; display: inline-block;" border="0" src="images/03.jpg"></A><SPAN

style="display: none;" class="title"><A href="#"

target="_blank">jquery图片放大插件鼠标滑过图片放大效果</A></SPAN></LI>

  <LI style="left: 530px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG

style="width: 120px; display: inline-block;" border="0" src="images/04.jpg"></A><SPAN

style="display: none;" class="title"><A href="#"

target="_blank">jquery图片放大点击小图放大查看大图效果</A></SPAN></LI>

  <LI style="left: 660px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG

style="width: 120px; display: inline-block;" border="0" src="images/05.jpg"></A><SPAN

style="display: none;" class="title"><A href="#"

target="_blank">jquery图片切换插件制作图片与文字切换特效</A></SPAN></LI>

  <LI style="left: 790px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG

style="width: 120px; display: inline-block;" border="0" src="images/06.jpg"></A><SPAN

style="display: none;" class="title"><A href="#"

target="_blank">div+css多张背景图片规范写法图片透明度显示</A></SPAN></LI>

  <LI style="left: 920px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG

style="width: 120px; display: inline-block;" border="0" src="images/07.jpg"></A><SPAN

style="display: none;" class="title"><A href="#"

target="_blank">CSS如何定位工程</A></SPAN></LI>

  <SPAN style="display: none; opacity: 0;"

class="title ui-jcoverflip--title"><A href="#"

target="_blank">CSS如何定位工程</A></SPAN><SPAN style="display: none; opacity: 0;"

class="title ui-jcoverflip--title"><A href="#"

target="_blank">div+css多张背景图片规范写法图片透明度显示</A></SPAN><SPAN style="display: none; opacity: 0;"

class="title ui-jcoverflip--title"><A href="#"

target="_blank">jquery图片切换插件制作图片与文字切换特效</A></SPAN><SPAN style="display: none; opacity: 0;"

class="title ui-jcoverflip--title"><A href="#"

target="_blank">jquery图片放大点击小图放大查看大图效果</A></SPAN><SPAN style="display: none; opacity: 0;"

class="title ui-jcoverflip--title"><A href="#"

target="_blank">jquery图片放大插件鼠标滑过图片放大效果</A></SPAN><SPAN style="display: block; opacity: 1;"

class="title ui-jcoverflip--title"><A href="#"

target="_blank">jquery图像幻灯片制作大小图片切换滚动展示</A></SPAN><SPAN style="display: none; opacity: 0;"

class="title ui-jcoverflip--title"><A href="#"

target="_blank">jquery图片切换插件制作图片层叠缩放展示效果</A></SPAN>

 </UL>

 <DIV id="scrollbar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><A

style="left: 16.66%;" class="ui-slider-handle ui-state-default ui-corner-all"

href="#"></A></DIV>

</DIV>

<SCRIPT type="text/javascript">

$(document).ready(function(){

 

 // cover flip effects //

 //var noOfArtists = 31; //jx

 var noOfArtists = 7; //jx

  

 $('#flip').jcoverflip({

 current: 0,

  

 beforeCss: function(el, container, offset){

  return [$.jcoverflip.animationElement(el, {

  left: (container.width() / 2 - 220 - 150 * offset + 20 * offset) + 'px',

  bottom: '20px'

  }, {}), $.jcoverflip.animationElement(el.find('img'), {

  width: Math.max(10, 120 - 0 * offset * offset) + 'px'

  }, {})];

 },

 afterCss: function(el, container, offset){

  return [$.jcoverflip.animationElement(el, {

  left: (container.width() / 2 + 100 + 130 * offset) + 'px',

  bottom: '20px'

  }, {}), $.jcoverflip.animationElement(el.find('img'), {

  width: Math.max(10, 120 - 0 * offset * offset) + 'px'

  }, {})];

 },

 currentCss: function(el, container){

  return [$.jcoverflip.animationElement(el, {

  left: (container.width() / 2 - 80) + 'px',

  bottom: '20px'

  }, {}), $.jcoverflip.animationElement(el.find('img'), {

  width: '160px'

  }, {})];

 },

 change: function(event, ui){

  //jx $('#scrollbar').slider('value', ui.to * 10);

  $('#scrollbar').slider('value', ui.to * (100 / (noOfArtists - 1))); //jx

 }

 });

  

 $('#scrollbar').slider({

 //jx value: 50,

 value: 0, //init. pic is the beginning of the artists list, so change from 50 (middle) to 0

 //jx step: 10,

 step: 100 / (noOfArtists - 1), //jx

 stop: function(event, ui){

  if (event.originalEvent) {

  //jx var newVal = Math.round(ui.value / 10);

  var newVal = Math.round(ui.value / 100 * (noOfArtists - 1)); //jx

  $('#flip').jcoverflip('current', newVal);

  //jx $('#scrollbar').slider('value', newVal * 10);

  $('#scrollbar').slider('value', newVal / (noOfArtists - 1) * 100); //jx

  }

 }

 });

 // cover flip effects //

 

});

</SCRIPT>

<!--演示内容结束-->

 

</BODY>

</HTML>

Nach dem Login kopieren

Das Obige ist der JQuery-Code, um den horizontalen Scroll-Effekt der mit Ihnen geteilten Bilder zu erzielen. Ich hoffe, er gefällt Ihnen.

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage