效果如下
源码
| 代码如下 | 复制代码 |
|
<!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="/ajaxjs/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(/jscss/demoimg/201405/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=www.111cn.net src="/jscss/demoimg/201405/page_flip.png"></a> <div class="msg_block"></div> </div> <div style="text-align:center;clear:both;"> </div> </body> </html> |
|
使用方法非常的简单，我们可以把css与js及html分别放到head与body之间就可以了，如果不懂的可以直接把代码放下去进行调整就好。
时间： 2024-11-18 15:48:00