jquery 動畫

本文轉載自查看原文 2012-07-25 00:20 2806 javascript

jquery動畫
有意思的地方見效果圖：

思想：
將圖片設置分割div的背景圖片，控制div的屬性，可以現實有趣的濾鏡效果，本例中展示了一種，感興趣的朋友可以嘗試其他濾鏡的實現。

本例其余動畫部分，主要是利用jquery中提供animate和delay實現。 animate：這個函數的關鍵在於指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性。delay：設置一個延時來推遲執行隊列中之后的項目。

實例效果：

<!DOCTYPE html> <html> <head> <title>jquery 動畫</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://files.cnblogs.com/kuikui/jquery.js"></script> <style type="text/css"> *{margin: 0px;padding: 0px;} #test{width:300px; height: 300px; position: relative; margin: 20px auto 0px;} </style> </head> <body> <div id="test"> <img alt="" width="300" height="300" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /> </div> <script type="text/javascript"> $(function(){ var test = $("#test"); var html = ''; for(var i=0;i<5;i++){ html+='<div style="width:60px;height:300px;position:absolute;top:0px;left:'+60*i+'px;background:url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg) '+-60*i+'px 0px no-repeat;"></div>'; } test.prepend(html); test.find("div").eq(0).animate({ "top":"320px"},2000); test.find("div").eq(1).animate({ "top":"320px"},2500); test.find("div").eq(2).animate({ "top":"320px"},3000); test.find("div").eq(3).animate({ "top":"320px"},3500); test.find("div").eq(4).animate({ "top":"320px"},4000); test.find("div").eq(0).delay(5000); test.find("div").eq(4).delay(3000); test.find("div").eq(1).delay(5000); test.find("div").eq(3).delay(4000); test.find("div").eq(2).delay(5000); test.find("div").eq(0).animate({ "left":"-320px","top":"0px","width":"300px","height":"300px"},5000); test.find("div").eq(4).animate({ "left":"320px","top":"0px","width":"300px","height":"300px","background-position":"0px 0px"},5000); test.find("div").eq(1).animate({ "left":"-320px","top":"320px","width":"300px","height":"300px","background-position":"0px 0px"},4500); test.find("div").eq(3).animate({ "left":"320px","top":"320px","width":"300px","height":"300px","background-position":"0px 0px"},4500); test.find("div").eq(2).animate({ "left":"0px","top":"320px","width":"300px","height":"300px","background-position":"0px 0px"},4000); test.find("div").eq(0).delay(2000); test.find("div").eq(4).delay(2000); test.find("div").eq(1).delay(2000); test.find("div").eq(3).delay(2000); test.find("div").eq(2).delay(2000); test.find("div").eq(0).animate({ "left":"0px","top":"0px","width":"300px","height":"300px","background-position":"0px 0px"},5000); test.find("div").eq(4).animate({ "left":"0px","top":"0px","width":"300px","height":"300px","background-position":"0px 0px"},5000); test.find("div").eq(1).animate({ "left":"0px","top":"0px","width":"300px","height":"300px","background-position":"0px 0px"},4500); test.find("div").eq(3).animate({ "left":"0px","top":"0px","width":"300px","height":"300px","background-position":"0px 0px"},4500); test.find("div").eq(2).animate({ "left":"0px","top":"0px","width":"300px","height":"300px","background-position":"0px 0px"},4000); test.find("div").eq(0).delay(2000); test.find("div").eq(4).delay(2000); test.find("div").eq(1).delay(2000); test.find("div").eq(3).delay(2000); test.find("div").eq(2).delay(2000); test.find("div").eq(0).animate({ "left":"0px","top":"300px","width":"60px","height":"300px","background-position":"0px 0px"},5000,function(){test.find("img").css({"position":"absolute","left":"0px","top":"0px","z-index":"999"}); test.find("div").css({"background":"url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test3.jpg) no-repeat"});}); test.find("div").eq(4).animate({ "left":"240px","top":"300px","width":"60px","height":"300px","background-position":"-240px 0px"},5000); test.find("div").eq(1).animate({ "left":"60px","top":"200px","width":"60px","height":"300px","background-position":"-60px 0px"},4500); test.find("div").eq(3).animate({ "left":"180px","top":"200px","width":"60px","height":"300px","background-position":"-180px 0px"},4500); test.find("div").eq(2).animate({ "left":"120px","top":"300px","width":"60px","height":"300px","background-position":"-120px 0px"},4000); }); </script> </body> </html>

免責聲明！

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

猜您在找 jQuery 動畫效果與動畫隊列 jQuery動畫之顯示隱藏動畫 JQuery中的事件以及動畫 JQuery動畫效果 jquery動畫，獲取，添加 jquery 添加動畫效果 jquery投色子動畫 jquery動畫函數隊列 JQuery動畫之滑入滑出動畫用jQuery防止多次點擊動畫重復