jQuery background-position動畫效果程式碼例項
使用jquery實現動畫效果非常的方便,不過並不是任何屬性都可以使用動畫來實現。
具體可以參閱jQuery的動畫效果可以應用與哪些屬性一章節。
如果要實現背景圖片位置動畫效果,可以使用jqBackgroundPositionAnimate.js外掛。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> h2{ clear:both; padding-top:20px; } ul{ list-style:none; margin:0; padding:0; } li{ float:left; width:100px; height:21px; margin:0; padding:0; text-align:center; } li a{ display:block; padding:5px 10px; height:100%; color:#FFF; text-decoration:none; border-right:1px solid #FFF; font-size:12px; } li a{background:url(bg2.jpg) repeat 0 0;} li a:hover, li a:focus, li a:active{background-position:-150px 0;} #box a{background:url(mytest/jQuery/bg.jpg) repeat -20px 35px;} </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript" src="mytest/jQuery/jqBackgroundPositionAnimate.js"></script> <script type="text/javascript"> $(function(){ $('#box a') .css({backgroundPosition:"-20px 35px"}) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(-20px 94px)"},{duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(40px 35px)"},{duration:200, complete:function(){ $(this).css({backgroundPosition: "-20px 35px"}) }}) }) }); </script> </head> <body> <ul id="box"> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落二</a></li> <li><a href="#">螞蟻部落三</a></li> </ul> </body> </html>
上面的程式碼完美實現動畫效果的背景圖片位置調整,效果絢麗程度堪比flash。
相關文章
- jQuery 動畫效果程式碼例項jQuery動畫
- css Sprite 動畫效果程式碼例項CSS動畫
- jquery小球碰撞效果程式碼例項jQuery
- jquery 驗證碼效果程式碼例項jQuery
- jQuery tab選項卡效果程式碼例項jQuery
- JavaScript 動畫效果簡單例項程式碼JavaScript動畫單例
- jQuery加法驗證碼效果程式碼例項jQuery
- jQuery 隔行變色效果程式碼例項jQuery
- jQuery隔行變色效果程式碼例項jQuery
- jQuery雪花飄落效果程式碼例項jQuery
- jQuery進度條效果程式碼例項jQuery
- jQuery手風琴效果程式碼例項jQuery
- javascript實現animate()動畫效果程式碼例項JavaScript動畫
- jQuery點選滑出層效果程式碼例項jQuery
- jQuery倒數計時效果程式碼例項jQuery
- jQuery繪製網格效果程式碼例項jQuery
- jQuery數字分頁效果程式碼例項jQuery
- jQuery大圖跟隨效果程式碼例項jQuery
- jquery實現的選項卡效果例項程式碼jQuery
- jquery實現的分頁效果例項程式碼jQuery
- jQuery九宮格抽獎效果程式碼例項jQuery
- jquery尋找最佳路徑效果程式碼例項jQuery
- jQuery選項卡切換圖片效果程式碼例項jQuery
- JavaScript 動畫效果例項JavaScript動畫
- javascript實現的動畫效果簡單例項程式碼JavaScript動畫單例
- jQuery is() 程式碼例項jQuery
- jquery實現的滑動軸效果程式碼例項jQuery
- jQuery標題自動頂貼效果程式碼例項jQuery
- jQuery列表上下垂直滾動效果程式碼例項jQuery
- requestAnimationFrame()動畫例項程式碼requestAnimationFrame動畫
- 倒數計時結尾使用動畫效果程式碼例項動畫
- jquery實現的人物關係圖效果程式碼例項jQuery
- jQuery類似電影院座位選取效果程式碼例項jQuery
- jQuery選項卡例項程式碼jQuery
- jQuery動畫方式設定div元素長和寬程式碼例項jQuery動畫
- jQuery模擬支付寶密碼輸入效果程式碼例項jQuery密碼
- css切角效果程式碼例項CSS
- css模糊效果程式碼例項CSS