jQuery实现网站、WordPress右上角翻页效果（jquery 翻页效果）

时间: 2010-03-05 / 分类: wordpress技巧 / 浏览次数: 900 次 / 3个评论发表评论

你可能在一些门户网站或者是个人博客上看到过这种效果，右上角有一个类似于我们平常翻书的效果，翻开网站或者博客的右上角，页面下方就是广告或者是订阅信息。这个很炫的效果看起来要通过flash来实现，不过，我打算使用jQuery技术来简单实现这个效果。

预览

jQuery实现WordPress页面右上角翻页效果
1、HTML-页面翻页效果

“pageflip”这个”div“将扮演着一个容器的作用，主要用来创建一个相关联位置属性。使用一张图片和一个span标记嵌入到《a》这个超链接内部。注意，如果你没有任何相冲突的绝对或者相对定位属性，那么，可以不用创建pageflip这个容器。

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

2. CSS – 页面剥离（翻页）样式

将图片的高度和宽度设置成一个足够小的值（比如高50px，宽50px），然后通过绝对定位将图片放置在页面的右上角。该图片将采用类似于 photoshop中的遮罩层技术，并将一部分文字或者图片信息隐藏起来，因此，只有很小的一部分文字或者图片呈现在页面上。检查一下图片的虚拟效果：

所有放置于翻页效果的图片或者文字信息都被放置于msg_block这个class里面，默认该效果将会是高为50px宽慰50px的图片。

#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;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top;
	text-indent: -9999px;
}

注意,“msg_block”的高应该比图片的高度相差2px，这是因为要考虑到图片的阴影效果。
3. jQuery – Animating Page Peel

现在，我们要做的就是当鼠标移过msg_block时，展开图片，当鼠标离开时恢复到原始状态就ok了。

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