因工作需要做一個圖片向上滾停滾效果,因此用jquery實現了這一功能,個人覺得代碼很簡潔,希望給需要的朋友們一些參考。
前台html代碼如下(css樣式表文件我就不粘貼了,因為我覺得那個一般人都會):
<div class="picshow"> <ul> <asp:Repeater ID="Picshowrp" runat="server"> <ItemTemplate> <li><a href="<%#Eval("LinkUrl") %>" target="_blank"> <img src="<%#Eval("imageURL") %>" width="977" height="156" border="0" /></a></li> </ItemTemplate> </asp:Repeater> </ul> </div>
js代碼如下(記得要引入jquery類庫,只有這樣代碼才起作用哦):
<script type="text/javascript"> function AutoScroll(obj){ $(obj).find("ul:first").animate({ marginTop:"-156px" },1000,function(){ $(this).css({marginTop:"0px"}).find("li:first").appendTo(this); }); } setInterval('AutoScroll(".picshow")',4000) </script>
簡單解釋一下代碼
1、setInterval() 方法可按照指定的周期(以毫秒計)來調用函數或計算表達式,該方法會不停地調用函數,直到 clearInterval() 被調用或窗口被關閉,由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。上述代碼中表示每隔4秒中調用一次“AutoScroll”函數。
2、“AutoScroll”函數主要實現圖片向上滑動,並用“li”元素(包括里面的圖片)不斷的補充向上滑動產生的空白部分。
3、“animate”函數是jquery中的一個函數,功能是創建自定義動畫的函數,主要參數說明如下:
paramsOptions一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
duration (可選)String,Number三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如:1000)
easing (可選)String要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing".
callback (可選)Function在動畫完成時執行的函數
ok好了主要代碼很簡單希望對您有所幫助。
號外:
您開發程序可以說是為了興趣,但是養家糊口絕對是第一位。找個外包項目開發,也許是一個一舉兩得的好辦法,1增加收入;2提高程序開發的水平。對了也許在增加一點3提高與用戶溝通的能力,積累豐富的資源,最后終於找到一個比較適合程序員接外包開發的網站,也許對大家有所幫助。
