jQuery控制DIV層實現(xiàn)由大到小,由遠及近動畫變化效果
本文實例講述了jQuery控制DIV層實現(xiàn)由大到小,由遠及近動畫變化效果。分享給大家供大家參考。具體如下:
這里介紹jQuery控制DIV由大到小,由遠及近動畫變化效果,使用jquery生成動畫效果的一個小例子,希望大家喜歡。
運行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/jquery-div-animate-cha-style-demo/
具體代碼如下:
<!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=utf-8" /> <title>Panel控制Div運動,由大到小變化。</title> <style type="text/css"> *{margin:0;padding:0;} body { padding: 60px } #panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer} </style> <script type="text/javascript" src="jquery1.3.2.js"></script> <script type="text/javascript"> $(function(){ $("#panel").css("opacity", "0.5");//設(shè)置不透明度 $("#panel").click(function(){ $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000) .animate({top: "200px" , width :"200px"}, 3000 ,function(){ $(this).css("border","5px solid blue"); }) }); }); </script> </head> <body> <div id="panel"></div> </body> </html>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
基于jQuery實現(xiàn)復(fù)選框的全選 全不選 反選功能
本文分享一段基于jQuery實現(xiàn)的復(fù)選框全選、全不選、反選功能的代碼,有需要的小伙伴直接帶走吧2014-11-11jQuery Easyui datagrid連續(xù)發(fā)送兩次請求問題
用上述方式動態(tài)加載datagrid的數(shù)據(jù)時,通過net監(jiān)聽,發(fā)現(xiàn)調(diào)用了兩遍XX方法,目前的解決方案是,將url放到datagrid初始化的時候執(zhí)行2016-12-12JQuery學(xué)習(xí)筆記 實現(xiàn)圖片翻轉(zhuǎn)效果和TAB標簽切換效果
為了保證前臺頁面的整潔,我們習(xí)慣性地將CSS放入一個單獨的.CSS文件中以便調(diào)用,而JS也同樣可以放到單獨的JS文件中去,并且頁面上的事件如onclick,onmouseover也可以分離出來,現(xiàn)在網(wǎng)上比較流行JQuery2008-11-11jquery ready函數(shù)、css函數(shù)及text()使用示例
想必大家對jquery的ready函數(shù)、css函數(shù)、text()并不陌生吧,其實很好理解的,接下來有個不錯的示例,如果你對此理解還是很模糊可以參考下2013-09-09jquery控制頁面的展開和隱藏實現(xiàn)方法(推薦)
下面小編就為大家?guī)硪黄猨query控制頁面的展開和隱藏實現(xiàn)方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10