jQuery结合Css2与Css3实现的图片放大效果

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

导读：jQuery 结合Css2与Css3实现的图片放大效果，鼠标移上后的图片放大特效，不是纯粹意义上的图片放大，严格来说是一款鼠标效果，当把鼠标放在图片上的时候，图片会稍稍变大，与原来的大小不一样，为网页增加一些动感的格调，整体效果做的挺漂亮，这里用函数直

　　jQuery结合Css2与Css3实现的图片放大效果，鼠标移上后的图片放大特效，不是纯粹意义上的图片放大，严格来说是一款鼠标效果，当把鼠标放在图片上的时候，图片会稍稍变大，与原来的大小不一样，为网页增加一些动感的格调，整体效果做的挺漂亮，这里用函数直接加载:hover，避免了图片放大过度不流畅的缺点。

　　烈火编辑提示：代码中有两种例子，其中CSS3的效果必须在IE9/Chrome/Firefox等浏览器查看。

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

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>JS图片放大特效</title> <script src="/uploads/common/js/jquery-1.4.2.min.js"></script> <script language="javascript">  </script> <style>  </style> </head> <body> <p align="center">ZoomIn Jquery+CSS2 </p> <div id="zoom0"> <div id="pic1"><img src="/uploads/common/images/wall_s1.jpg" /></div> <div id="pic2"><img src="/uploads/common/images/wall_s2.jpg" /></div> <div id="pic3"><img src="/uploads/common/images/wall_s3.jpg" /></div> </div> <p align="center">ZoomIn CSS3</p> <div id="zoom1"> <div id="pic1"><img src="/uploads/common/images/wall_s1.jpg" /></div> <div id="pic2"><img src="/uploads/common/images/wall_s2.jpg" /></div> <div id="pic3"><img src="/uploads/common/images/wall_s3.jpg" /></div> </div> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：武汉站长网）

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

ASP建成不重复随机数的	ASP.NET Web Page应用
WEB页面多语言支持解决	获取转向地址的URL的源