本文實例講述了jquery實現可折角的廣告代碼。分享給大家供大家參考。具體如下：
這是一款可折角的廣告代碼，或許你已經看到過了，現在一些門戶網站還可看到這種效果的身影，用鼠標滑過折角的邊，即可出現下拉效果。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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程序設計有所幫助。
新聞熱點
疑難解答
