jQuery响应鼠标的图片特效,来自Flickr照片分享网

发布时间：2018-08-21 18:26:51 所属栏目：Asp教程来源：站长网

导读：烈26火08网(LieHuo81.Net)教17程 Flickr照片分享网的图片预览特效，使用了jquery插件，貌似很不错的效果。鼠标放到图片上，图片会缩小，像是镜头从近拉远的感觉，是Flickr著名照片分享网上边的一个效果，那些大网站有不少网页特效都不错，挺实用，大家有空

　　烈26火08网(LieHuo81.Net)教17程 Flickr照片分享网的图片预览特效，使用了jquery插件，貌似很不错的效果。鼠标放到图片上，图片会缩小，像是镜头从近拉远的感觉，是Flickr著名照片分享网上边的一个效果，那些大网站有不少网页特效都不错，挺实用，大家有空也多去瞧瞧哦。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Flickr照片分享网的图片预览特效</title> <style type="text/css"> *{ margin:0; padding:0; } body{ background:#fff; } .container{ width:600px; height:400px; margin:100px auto 0px auto; border:10px solid #333; -moz-box-shadow:1px 1px 12px #000; -webkit-box-shadow:1px 1px 12px #000; box-shadow:1px 1px 12px #000; } a.back{ width:184px; height:32px; position:absolute; bottom:10px; left:10px; background:transparent url() no-repeat top left; } .wrap{ width:200px; height:200px; margin:0px; overflow:hidden; position:relative; float:left; } .wrap a img { border:none; position:absolute; top:-66.5px; left:-150px; height:500px; opacity: 0.5; -moz-opacity: 0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); } </style> </head> <body> <div id="container" class="container"> <div class="wrap"> <a href="/"> <img src="/uploads/common/images/p1.jpg" alt="Picture 1"/> </a> </div> <div class="wrap"> <a href="/"> <img src="/uploads/common/images/p2.jpg" alt="Picture 2"/> </a> </div> <div class="wrap"> <a href="/"> <img src="/uploads/common/images/p3.jpg" alt="Picture 3"/> </a> </div> <div class="wrap"> <a href="/"> <img src="/uploads/common/images/p4.jpg" alt="Picture 4"/> </a> </div> <div class="wrap"> <a href="/"> <img src="/uploads/common/images/p5.jpg" alt="Picture 5"/> </a> </div> <div class="wrap"> <a href="/"> <img src="/uploads/common/images/p6.jpg" alt="Picture 6"/> </a> </div> </div> <div> <a class="back" href="/"></a> </div>  <script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(function() { $('#container img').hover( function(){ var $this = $(this); $this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'}); }, function(){ var $this = $(this); $this.stop().animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'}); } ); }); </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：青岛站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

ASP建成不重复随机数的	阻止网站内容被人小偷
ASP创建Access表或增加	asp限制域名访问实现代