jquery实现华丽的可折角广告代码

2019-11-20 11:37:25

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：JS实现可点击展开与关闭的左侧广告代码

下一篇：javascript学习总结之js使用技巧