jquery 實現滾動向上滾動圖片上一張停頓一下在上一張效果


    因工作需要做一個圖片向上滾停滾效果,因此用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提高與用戶溝通的能力,積累豐富的資源,最后終於找到一個比較適合程序員接外包開發的網站,也許對大家有所幫助。

  全球軟件項目外包平台 

不會英語也能幫你掙美元

做國內項目體現不出實力,來智城做國際項目才過癮

美國人的項目,你敢接么?

操作簡便,支付安全,輕松賺美元!

大洋彼岸做項目,網上交易,安全便捷


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM