jQuery 圖片垂直切換效果詳解
圖片垂直切換在很多網頁中都有應用。
下面是一個比較簡單的程式碼例項,下面對它實現過程進行一下詳細介紹。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #main{ border:5px #666 solid; width:500px; height:350px; overflow:hidden; } #box div{ width:500px; height:350px; line-height:350px; text-align:center; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ var Top=-350; var Time=500; function move(){ $("#box").animate({"margin-top":Top},Time); Top+=-350; if(Top==-1050){ Top=0; } } setInterval(move,3000); }) </script> </head> <body> <div id="main"> <div id="box"> <div style="background-color:#0F0;">螞蟻部落一</div> <div style="background-color:#00F;">螞蟻部落二</div> <div style="background-color:#696;">螞蟻部落三</div> </div> </div> </body> </html>
上程式碼實現了向上滾動效果,這裡的圖片以背景色替代了,如果實際應用在div中加上圖片即可。
一.實現原理:
原理非常的簡單,每隔指定的時間設定一次box元素的margin-top屬性值,每一次設定的幅度大小恰好是box元素下div的高度,這樣就實現了向上滾動效果。當top的值等於-1050的時候,也就是第三個div展現的時候,再將top重置為零,下一次函式的執行,那麼又會將box的margin-top設定為0,這樣又將開始新的一輪的迴圈。
二.程式碼註釋:
(1).$(document).ready(function(){}),當穩當結構完全載入完畢再去執行函式中的程式碼。
(2).var Top=-350,宣告一個變數並賦值為-350,用以設定box的margin-top屬性值。
(3).var Time=500,宣告一個變數並賦值為500,用以設定向上滾動的速度。
(4).function move(),此函式是實現滾動的核心。
(5).$("#box").animate({"margin-top":Top},Time),以動畫方式設定box的margin-top屬性值。
(6).Top+=-350,top值在每次執行一次move函式就減去350,350恰好是box下div的高度。
(7).if(Top==-1050),當top值等於-1050的時候將會把top值重置為0.
(8).setInterval(move,3000),每隔3秒鐘呼叫一次move函式。
三.相關閱讀:
(1).animate()函式可以參閱jQuery animate()一章節。
(2).setInterval()函式可以參閱setInterval()用法一章節。
相關文章
- JavaScript 圖片切換展示效果JavaScript
- jquery實現的具有漸變效果的圖片切換jQuery
- jQuery選項卡切換圖片效果程式碼例項jQuery
- JQuery實現簡單美觀的圖片切換效果jQuery
- jQuery手風琴圖片切換jQuery
- CSS滑鼠懸浮圖片模糊切換效果CSS
- 點選按鈕實現圖片切換效果
- 馬賽克效果的JS圖片切換程式碼JS
- switchable圖片切換
- 滑鼠懸浮實現圖片動畫上下切換效果動畫
- 簡單的圖片間隔指定時間切換效果
- js圖片切換例項JS
- jquery另外一種類似tab切換效果jQuery
- CSS div水平垂直居中效果詳解CSS
- 手風琴方式圖片展示效果詳解
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery
- jQuery圖片放大和旋轉效果jQuery
- jQuery圖片無縫滾動效果jQuery
- jQuery 圖片列表垂直間歇無縫滾動jQuery
- 巧妙的有css合併圖片解決tab切換的背景圖片CSS
- jQuery 放大鏡效果詳解jQuery
- jQuery彈幕效果詳解jQuery
- jQuery div拖拽效果詳解jQuery
- jQuery抖動效果詳解jQuery
- jQuery新聞列表垂直滾動詳解jQuery
- JS實現動態瀑布流及放大切換圖片效果(js案例)JS
- 圖片放大鏡效果實現過程詳解
- 百葉窗式的幻燈片切換效果原理
- jQuery滑鼠懸浮當前圖片高亮其他圖片灰暗效果jQuery
- jQuery滑鼠滑過表格標題切換表格內容詳解jQuery
- CSS滑鼠移動圖片切換功能CSS
- JS圖片Switchable切換大集合JS
- jQuery實現3D圖片輪播詳解jQuery3D
- jQuery實現圖片尺寸自適應效果jQuery
- 請問各位大佬,vue如何實現點選按鈕切換圖片的效果?Vue
- ios 卡片切換效果iOS
- 網頁Banner圖片切換js的使用網頁JS
- 搭建圖床-切換本站圖片至自建服務圖床