jQuery实现撕页广告效果

您可能看到这些形式的撕页广告效果.网站右上角出现一个三角形，并看到一条消息。很多网站都是用FLASH实现的，今天带给大家一款jQuery+css的撕页广告效果。

 先看看效果吧：http://www.56mp.cn/upload/siyeguanggao/

1.HTML

<div id="pageflip">
 <a href="#">
  <img src="page_flip.png" alt="" />
  <span class="msg_block">Subscribe via RSS</span>
 </a>
</div>

2.CSS

Image属性设置为一个较小的尺寸（ 50px的50px ），并绝对定位在右上角。看看下面的图片直观：

撕页CSS效果图

实际信息在撕页上，当鼠标移动上去显示实际信息，鼠标移开将关闭。

#pageflip {
 position: relative;
}
#pageflip img {
 width: 50px; height: 52px;
 z-index: 99;
 position: absolute;
 right: 0; top: 0;
 -ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
 width: 50px; height: 50px;
 position: absolute;
 z-index: 50;
 right: 0; top: 0;
 background: url(subscribe.png) no-repeat right top;
 text-indent: -9999px;
}

请注意，“msg_block”高度要少2px，这样才会有下拉阴影图像。

3.jQuery

我们现在正在做的事情是不断扩大右上角的撕页效果，然后收加到原始大小。

$("#pageflip").hover(function() { //On hover...
 $("#pageflip img , .msg_block").stop()
  .animate({ //Animate and expand the image and the msg_block (Width + height)
   width: '307px',
   height: '319px'
  }, 500);
 } , function() {
 $("#pageflip img").stop() //On hover out, go back to original size 50x52
  .animate({
   width: '50px',
   height: '52px'
  }, 220);
 $(".msg_block").stop() //On hover out, go back to original size 50x50
  .animate({
   width: '50px',
   height: '50px'
  }, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});

结论

这个概念是非常简单的，并可能有派上用场的一天。如果您有任何问题或知道的其他技术，请不要犹豫，让我们知道。