九乡新闻网谢苗何彦霓如何认识:jQuery实现网站、WordPress右上角翻页效果 - 流年观影2
来源：百度文库 编辑：九乡新闻网 时间：2024/04/28 11:15:38
jQuery实现网站、WordPress右上角翻页效果(2009)
在线播放|搜索该片|查看影评|参与讨论
发布时间：2009年07月17日 805次浏览3 comments
阅读完整文章
四种方法实现三栏等宽等高布...悄悄地，我换新皮了…...如何理解jquery中的 $(document).ready(...闲暇时间制作了一款主...且行且记...用div+css代替table进行c#系统布...如何用div+css打造立体感阴影搜索...jquery笔记：一款图片预览jquery插...记录最近的一点心...最近学习css的一些心...
你可能在一些门户网站或者是个人博客上看到过这种效果，右上角有一个类似于我们平常翻书的效果，翻开网站或者博客的右上角，页面下方就是广告或者是订阅信息。这个很炫的效果看起来要通过flash来实现，不过，我打算使用jQuery技术来简单实现这个效果。
预览
jQuery实现WordPress页面右上角翻页效果
1、HTML-页面翻页效果
“pageflip”这个”div“将扮演着一个容器的作用，主要用来创建一个相关联位置属性。使用一张图片和一个span标记嵌入到《a》这个超链接内部。注意，如果你没有任何相冲突的绝对或者相对定位属性，那么，可以不用创建pageflip这个容器。
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) });
结论：Conclusion
这篇文章非常简明扼要的讲解了如何为网站（如WordPress）添加翻页效果，如果在看后有任何疑问，请不要吝啬于让我知道，大家共同进步。呵呵
在线播放|搜索该片|查看影评|参与讨论
发布时间：2009年07月17日 805次浏览3 comments
阅读完整文章
四种方法实现三栏等宽等高布...悄悄地，我换新皮了…...如何理解jquery中的 $(document).ready(...闲暇时间制作了一款主...且行且记...用div+css代替table进行c#系统布...如何用div+css打造立体感阴影搜索...jquery笔记：一款图片预览jquery插...记录最近的一点心...最近学习css的一些心...
你可能在一些门户网站或者是个人博客上看到过这种效果，右上角有一个类似于我们平常翻书的效果，翻开网站或者博客的右上角，页面下方就是广告或者是订阅信息。这个很炫的效果看起来要通过flash来实现，不过，我打算使用jQuery技术来简单实现这个效果。
预览
jQuery实现WordPress页面右上角翻页效果1、HTML-页面翻页效果
“pageflip”这个”div“将扮演着一个容器的作用，主要用来创建一个相关联位置属性。使用一张图片和一个span标记嵌入到《a》这个超链接内部。注意，如果你没有任何相冲突的绝对或者相对定位属性，那么，可以不用创建pageflip这个容器。
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) });
结论：Conclusion
这篇文章非常简明扼要的讲解了如何为网站（如WordPress）添加翻页效果，如果在看后有任何疑问，请不要吝啬于让我知道，大家共同进步。呵呵
jQuery实现网站、WordPress右上角翻页效果 - 流年观影2
Android 实现书籍翻页效果----完结篇
Android 实现书籍翻页效果----升级篇
jQuery ajax实现顶一下，踩一下效果
jquery 标签页效果
Android 实现书籍翻页效果----完结篇 - hmg25的专栏 - CSDN博客
PS制作翻页效果
制作翻页效果
制作图片翻页效果
使用jquery实现用户名验证
Flash模块翻页效果制作
U5制作翻页动画效果
jquery实现图片代替滚动条
jQuery+CSS实现动态滑动菜单导航
wordpress做企业网站之解决方案
jQuery+CSS 打造动态下滑菜单效果
【经络穴位及人体经络循行动画演示2】（翻页效果）
翻页效果Flash相册制作教程
翻页效果Flash相册制作技巧-a
翻页效果Flash相册制作技巧6
不用插件实现WordPress代码高亮显示
PPTPPT翻页效果制作教程效果制作教程
实现动态模糊效果
Jquery getJSON举例2