這篇文章主要介紹了jQuery定義背景動態切換效果的方法,實例分析了jQuery操作圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jQuery定義背景動態切換效果的方法。分享給大家供大家參考。具體如下：

通過下面的jQuery插件，你可以將圖片放在一個數組里，然后告訴jQuery圖片需要在什么地方背景輪換

1. (function($){ 
2. var defaultSettings; 
3. var divfg, divbg; 
4. var fadeInterval; 
5. var fqTimer; 
6. var currImg = 0; 
7. var displImg = 0; 
8. var running = false; 
9. // Setup settings and initialize the plugin 
10. $.fn.bgFade = function(settings, callback){ 
11. defaultSettings = $.extend({ 
12. frequency: 5000, 
13. speed: 10, 
14. images: [], 
15. position: "center center", 
16. fgz: 1, 
17. bgz: 0 
18. }, settings); 
19. var c = 0; 
20. $(this).each(function(){ 
21. if(c == 0) divfg = $(this); 
22. if(c == 1) divbg = $(this); 
23. c++; 
24. }); 
25. setBackgrounds(); 
26. if(typeof callback == "function"){ 
27. callback(); 
28. } 
29. return this; 
30. }; 
31. // Start the fadder 
32. $.fn.start = function(){ 
33. fqTimer = setTimeout(function(){ 
34. nextFade()},defaultSettings.frequency 
35. ); 
36. running = true; 
37. return this; 
38. }; 
39. // Stop the fadder 
40. $.fn.stop = function(){ 
41. clearInterval(fadeInterval); 
42. clearTimeout(fqTimer); 
43. running = false; 
44. return this; 
45. } 
46. // Get the current image info {array id, image url} 
47. $.current = function(){ 
48. return {pos: displImg, url: defaultSettings.images[displImg]} 
49. } 
50. // Set the first two backgrounds 
51. function setBackgrounds(){ 
52. image1 = defaultSettings.images[0]; 
53. image2 = defaultSettings.images[1]; 
54. divfg.css({ 
55. backgroundImage: "url('"+image1+"')", 
56. zIndex: defaultSettings.fgz, 
57. backgroundPosition: defaultSettings.postion 
58. }); 
59. divbg.css({ 
60. backgroundImage: "url('"+image2+"')", 
61. zIndex: defaultSettings.bgz, 
62. backgroundPosition: defaultSettings.postion 
63. }); 
64. currImg = 1; 
65. displImg = 0; 
66. } 
67. // Set the next background after a fade completes 
68. function setNextBackground(){ 
69. next = arrayNext(); 
70. image = defaultSettings.images[next]; 
71. divbg.css({ 
72. backgroundImage: "url('"+image+"')" 
73. }); 
74. setTimeout(function(){nextFade()}, defaultSettings.frequency); 
75. } 
76. // Run a fade 
77. function nextFade(){ 
78. fadeInterval = setInterval(function(){fadeIt()}, 30); 
79. } 
80. // Decrement the opacity of the div 
81. function fadeIt(){ 
82. if(divfg.css("opacity") == ''){ 
83. op = 1; 
84. }else{ 
85. op = divfg.css("opacity"); 
86. } 
87. op -= ((1000 * defaultSettings.speed) / 30) * 0.0001; 
88. divfg.css("opacity", op); 
89. if(op <= 0){ 
90. bg = divbg; 
91. bgimg = divbg.css("background-image"); 
92. divfg.css("opacity", "1"); 
93. divfg.css("background-image", bgimg); 
94. clearInterval(fadeInterval); 
95. setNextBackground(); 
96. displImg = arrayCurrent(); 
97. } 
98. } 
99. // Get the next item in the array 
100. function arrayNext(){ 
101. var next = currImg + 1; 
102. if(next >= defaultSettings.images.length){ 
103. next = 0; 
104. } 
105. currImg = next; 
106. return next; 
107. } 
108. // Get the current item in the array 
109. function arrayCurrent(){ 
110. var cur = currImg - 1; 
111. if(cur < 0) 
112. cur = defaultSettings.images.length - 1; 
113. return cur; 
114. } 
115. })(jQuery); 

希望本文所述對大家的jQuery程序設計有所幫助。