jQuery background-position动画效果代码实例
分类:实例代码
使用jquery实现动画效果非常的方便,不过并不是任何属性都可以使用动画来实现。
具体可以参阅jQuery的动画效果可以应用与哪些属性一章节。
如果要实现背景图片位置动画效果,可以使用jqBackgroundPositionAnimate.js插件。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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 background-position动画效果代码实例,这样的场景在实际项目中还是用的比较多的,关于jQuery background-position动画效果代码实例就介绍到这了。
jQuery background-position动画效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。