曾经在QQ空间看到过一种广告的展现形式，那就是在页面右上角悬浮一个页角，等你鼠标移上去就像翻书一样把页面展开来，达到显示广告的目的，这种方式对用户来说比较友好，不用强制性去看广告。那么，这种翻页效果是如何实现的呢？今天我就要给大家分享如何实现这种翻页效果。这里我们用到了jQuery和CSS的相关知识，文章最后由在线示例和源码下载。效果图如下：

展开前：

展开后：

当然首先别忘了引入jquery核心库文件，代码就不贴了。

html代码：

<div id=pageflip>
	<a href="http://www.itivy.com/ivy/rss" target="_blank">
		<img alt="订阅王国峰的青藤屋博客" src="images/page_flip.png">
	</a> 
	<div class=msg_block></div>
</div>

body{padding:0;margin:0}
img {BEHAVIOR: url(iepngfix.htc)}
#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;border:0 none}
#pageflip .msg_block {RIGHT: 0px; BACKGROUND: url(images/subscribe.png) no-repeat right top; OVERFLOW: hidden; WIDTH: 50px; POSITION: absolute; TOP: 0px; HEIGHT: 50px}

<public:component>
<public:attach event="onpropertychange" onevent="iePNGFix(0)" />

<script type="text/javascript">

// IE5.5+ PNG Alpha Fix v1.0
// (c) 2004-2008 Angus Turnbull http://www.twinhelix.com

// This is licensed under the GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/


// This must be a path to a blank image, relative to the HTML document(s).
// In production use I suggest 'images/blank.gif' or similar. That's all!
if (typeof blankImg == 'undefined') var blankImg = 'images/blank.gif';



function filt(s, b)
{
 var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
 var sM = (currentStyle.backgroundRepeat == 'no-repeat') ? 'crop' : 'scale';
 s = (s || '').replace(/\(/g, '%28').replace(/\)/g, '%29');

 if (s && !(/IMG|INPUT/.test(nodeName) && !b) &&
  currentStyle.width == 'auto' && currentStyle.height == 'auto')
 {
  style.width = offsetWidth + 'px';
  style.height = clientHeight + 'px';
  if (currentStyle.display == 'inline') style.display = 'inline-block';
 }

 if (filters[f])
 {
  filters[f].enabled = s ? true : false;
  if (s) with (filters[f]) { src = s }
 }
 else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="' + sM + '")';
}

function iePNGFix(init)
{
 if (!/MSIE (5\.5|6)/.test(navigator.userAgent) || typeof filters == 'unknown') return;
 var evt = init ? { propertyName: 'src,background' } : event;
 var isSrc = /src/.test(evt.propertyName);
 var isBg = /background/.test(evt.propertyName);
 var isClass = !init &&
  ((this.className != this._png_class) && (this.className || this._png_class));
 if (!(isSrc || isBg || isClass)) return;
 this._png_class = this.className;
 var blank = blankImg.match(/([^\/]+)$/)[1];

 // Required for Whatever:hover support - erase any set BG if className changes.
 if (isClass && ((style.backgroundImage.indexOf('url(') == -1) ||
     (style.backgroundImage.indexOf(blank) > -1)))
 {
  setTimeout(function() { this.style.backgroundImage = '' }, 0);
  return;
 }

 if (isSrc && this.src && /IMG|INPUT/.test(nodeName))
 {
  if ((/\.png/i).test(src))
  {
   filt(src, 1);
   src = blankImg;
  }
  else if (src.indexOf(blank) == -1) filt();
 }

 var bgSrc = currentStyle.backgroundImage || style.backgroundImage;
 if ((bgSrc + this.src).indexOf(blank) == -1)
 {
  var bgPNG = bgSrc.match(/^url[("']+(.*\.png[^\)"']*)[\)"']+[^\)]*$/i);

  if (bgPNG)
  {
   style.backgroundImage = 'url("' + blankImg + '")';
   filt(bgPNG[1], 0);
   // Unclickable elements inside PNG backgrounds.
   var tags = ['a', 'input', 'select', 'textarea', 'iframe', 'object'],
    t = tags.length, tFix = [];
   while (t--)
   {
    var elms = all.tags(tags[t]), e = elms.length;
    while (e--) tFix.push(elms[e]);
   }
   var t = tFix.length;
   if (t && (/relative|absolute/i).test(currentStyle.position))
    alert('IEPNGFix: Children of positioned element are unclickable:\n\n<' +
     nodeName + (id && ' id=' + id) + '>');
    while (t--)
     if (!(/relative|absolute/i).test(tFix[t].currentStyle.position))
      tFix[t].style.position = 'relative';
  }
  else filt();
 }
}

iePNGFix(1);

</script>
</public:component>

js代码：

$(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);
	});	
});

源码下载