jquery實現(xiàn)華麗的可折角廣告代碼
本文實例講述了jquery實現(xiàn)可折角的廣告代碼。分享給大家供大家參考。具體如下:
這是一款可折角的廣告代碼,或許你已經(jīng)看到過了,現(xiàn)在一些門戶網(wǎng)站還可看到這種效果的身影,用鼠標滑過折角的邊,即可出現(xiàn)下拉效果。
運行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-css-zd-adv-stylee-codes/
具體代碼如下:
<!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> <title>jQuery頁面頂部折角圖片撕開效果</title> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#pageflip").hover(function(){ $("#pageflip img , .msg_block").stop().animate({width: '307px', height: '319px'}, 500); },function(){ $("#pageflip img").stop().animate({width: '50px', height: '52px'}, 220); $(".msg_block").stop().animate({width: '50px', height: '50px'}, 200); }); }); </script> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";} img{behavior:url(iepngfix.htc)} /* pageflip */ #pageflip{right:0px;float:right;position:relative;top:0px} #pageflip img{z-index:99;right:0px;width:50px;position:absolute;top:0px;height:52px;ms-interpolation-mode:bicubic} #pageflip .msg_block{right:0px;background:url(images/subscribe.png) no-repeat right top;overflow:hidden;width:50px;position:absolute;top:0px;height:50px} </style> </head> <body> <div id="pageflip"> <a href="#" target="_blank"><img width="307" height="319" alt="sc.chinaz.com" src="images/page_flip.png"></a> <div class="msg_block"></div> </div> <div style="text-align:center;clear:both;"> </div> </body> </html>
希望本文所述對大家的jquery程序設計有所幫助。
相關文章
jQuery實現(xiàn)表格元素動態(tài)創(chuàng)建功能
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)表格元素動態(tài)創(chuàng)建功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01使用jquery+CSS3實現(xiàn)仿windows10開始菜單的下拉導航菜單特效
本文是基于jquery和css3實現(xiàn)的仿windows10開始菜單的下拉導航菜單特效,代碼超簡單,感興趣的朋友一起看看吧2015-09-09jquery點擊頁面任何區(qū)域實現(xiàn)鼠標焦點十字效果
鼠標點擊聚焦,地圖定位,在圖片上突出顯示,焦點定位頁面元素,這些都是在系統(tǒng)開發(fā)是經(jīng)常需要用到的,下面為大家介紹下具體的實現(xiàn),感興趣的朋友可以參考下哈2013-06-06ExtJs動態(tài)生成treepanel的Json格式
這篇文章主要介紹了ExtJs動態(tài)生成treepanel的Json格式的相關資料,需要的朋友可以參考下2015-07-07