想實現鼠標放上去時候，背景圖實現1秒鐘的動畫切換效果（背景圖在一張圖上面）背景圖切換的效果我會做。問題是出在，切換過程中難以實現動畫的效果。我用css3的animation定義background-position的時間。發現，圖片是切換了。但是沒有時間效果。我用jq試過，問題是改變背景定位的css樣式，好像沒有定義時間的屬性。求大神指教
2 回答
-
飛尚潮流<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>測試4</title> <script src="js/jquery.js"></script> <script> /* $(document).ready(function(){ $("div.more").mouseover(function(){ $(".more").animate(3000,function(){ $(this).css("background-position","507px 41px"); }); }); $("div.more").mouseleave(function(){ $(".more").animate(3000,function(){ $(this).css("background-position","507px 78px"); }); }); }); */ </script> <script type="text/javascript"> var array=document.getElementsByTagName(); </script> <style type="text/css"> #system{margin:120px;padding:50px;width:540px;height:260px;border:1px solid #0CC;} #gaga{width:30px;height:30px;position:absolute;top:420px;left:600px;border:1px solid #099; border-radius:100px; -o-border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -webkit-border-radius:100px; background:url(images/body_01.png) scroll 507px 78px; transition:all 0.4s; } #gaga:hover{ background:url(images/body_01.png) scroll 507px 41px; } </style> </head> <body> <div class="more"><a id="gaga" href="" target="_blank"></a></div> </body> </html>
- 2 回答
- 0 關注
- 1719 瀏覽
添加回答
舉報
0/150
提交
取消