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

发布时间：2018-08-20 08:24:13 所属栏目：编程来源：站长网

导读：烈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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys