jQuery实现图片放大预览实现原理及代码
发布时间：2020-12-14 22:37:27 所属栏目：资源 来源：网络整理
导读：对于一些比较小的图片，通过鼠标移动到图片上进行放大显示，原理很简单，就是将图片显示的尺寸变大后放在浏览器的一个指定位置，从而实现图片的放大预览。以下是代码： 复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h
|
对于一些比较小的图片，通过鼠标移动到图片上进行放大显示，原理很简单，就是将图片显示的尺寸变大后放在浏览器的一个指定位置，从而实现图片的放大预览。以下是代码： 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery图片预览</title> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <style type="text/css"> body{font-size:12px; padding:50px;} .clsImg{padding-top:300px;} .imgAttr{position:absolute; height:225px; width:300px; border:1px solid #ccc; margin-left:135px; display:none;} </style> <script type="text/javascript"> $(function () { var x = 0; var y = 0; $("img").mouSEOver(function (e) { //鼠标移动到图片上添加事件，显示放大图片 $("#imgShow").attr("src",this.src).show(); }); $("img").mouSEOut(function () { //鼠标从图片移开图片隐藏 $("#imgShow").hide(); }); }) </script> </head> <body> <img class="imgAttr" id="imgShow" src="" alt=""/> <img class="clsImg" src="img1.jpg" alt=""/> <img class="clsImg" src="img2.jpg" alt=""/> <img class="clsImg" src="img3.jpg" alt=""/> <img class="clsImg" src="img4.jpg" alt=""/> </body> </html> 初始页面：
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
