兰州市不动产管理局:jQuery实现网站、WordPress右上角翻页效果
来源:百度文库 编辑:偶看新闻 时间:2024/04/29 12:25:58
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)添加翻页效果,如果在看后有任何疑问,请不要吝啬于让我知道,大家共同进步。呵呵
关于wordpress
请问有一个以 .ie结尾的国外wordpress网站,地址我忘记了,
什么是wordpress啊
wordpress和MT
wordpress如何翻译?
wordpress安装出现问题。。。
求wordpress教程
ASP实现网站计数器
网站如何实现盈利?
zoundry无法链接wordpress(非wordpress.com)
关于Wordpress的使用问题...
谁会装Wordpress 的BLOG?
怎么在wordpress 插入 视频
如何实现网站镜象??
网站实现盈利的途径
请问局域网网站如何实现
网站如何实现这个功能?
如何实现镜像网站?
网站怎么实现双出口?
asp中实现网站排行
网站如何实现在线直播
在WordPress中插入WMA的方法
WordPress MU多用户版怎么安装?
wordpress 的blog 安装不上