Page Peel Effect(卷页效果)基于MooTools 或 jQuery 和 CSS
Page Peel Effect(卷页效果)基于MooTools 或 jQuery 和 CSS
Soh Tanaka 在他网上发布了一个 “简单的卷页效果(Simple Page Peel Effect with jQuery & CSS.)” ,像这样的卷页效果或翻页效果,在一些门户网站或者是个人博客上经常能看得到
它实现的思路是有一个 “peel” 图片放在元素的右上方 ,当你徘徊在“Peel”时, “peels ”就会打开 和 “peels” 就会关闭,卷页里可以放置广告或者是订阅信息。这个很炫的效果看起来要通过flash来实现,不过,使用jQuery 或 MooTools 技术就可以轻松实现。
Simple Page Peel Effect with MooTools & CSS
The MooTools Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | (function($,$$) { window.addEvent('domready',function() { var flip = $('page-flip'); var flipImage = $('page-flip-image'); var flipMessage = $('page-flip-message'); flip.addEvents({ mouseenter:function() { $$(flipImage,flipMessage).set('morph',{ duration: 500 }).morph({ width: 307, height: 319 }); }, mouseleave:function() { flipImage.set('morph',{ duration: 220 }).morph({ width: 50, height: 52 }); flipMessage.set('morph',{ duration:200 }).morph({ width: 50, height:50 }); } }); }); })(document.id,$$); |
演示:http://davidwalsh.name/dw-content/page-flip.php
教程:http://davidwalsh.name/peel-effect
Simple Page Peel Effect with jQuery & CSS
The jQuery Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $(document).ready(function(){ //Page Flip on hover $("#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); }); }); |
演示:http://www.sohtanaka.com/web-design/examples/peeling-effect/
教程:http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/
文章评论 已经有 0 条评论!