对于一些比较小的图片,通过鼠标移动到图片上进行放大显示,原理很简单,就是将图片显示的尺寸变大后放在浏览器的一个指定位置,从而实现图片的放大预览。以下是代码: 复制代码 代码如下: jQuery图片预览 <BR>body{font-size:12px; padding:50px;} <BR>.clsImg{padding-top:300px;} <BR>.imgAttr{position:absolute; height:225px; width:300px; border:1px solid #ccc; margin-left:135px; display:none;} <BR> <BR>$(function () { <BR>var x = 0; <BR>var y = 0; <BR>$("img").mouseover(function (e) { //鼠标移动到图片上添加事件,显示放大图片 <BR>$("#imgShow").attr("src", this.src).show(); <BR>}); <BR>$("img").mouseout(function () { //鼠标从图片移开图片隐藏 <BR>$("#imgShow").hide(); <BR>}); <BR>}) <br><br> 初始页面: 鼠标放到第三个图片的效果: