<body>
<img id="aa" src="<s:url value="/productImages/1.jpg"/>"/>
<script type="text/javascript">
$(function(){
$("#aa").mouseover(function(e){
//鼠标移入事件
//1.获取图片的大小
var width = this.width;
var height = this.height;
//alert(width +" "+height);
//2.获取鼠标的位置
var x = e.clientX + 10;//e.clientX;
var y = e.clientY + 10;
//alert(x+" "+y);
//3.创建一个div
var div = $("<div id='bigImg'/>").css({
"position" : "absolute",
"top" : y,
"left" : x,
"display":"none",
"border" :"3px red solid",
"width" : width * 1.5,
"height" : height * 1.5
});
//4.创建一个图片
var img = $("<img/>").attr({
"src" : this.src
}).css({
"width" : width * 1.5,
"height" : height * 1.5
});
//5.将图片放到div中
div.append(img);
//6.将div放到页面中
$("body").append(div);
//7.将div展示出来
div.show(1000);
}).mousemove(function(e){
//鼠标在图片上的移动事件
//获取鼠标当前的位置
var x = e.clientX + 10;
var y = e.clientY + 10;
//获取页面中的div浮层
$("#bigImg").css({
"top" : y,
"left" : x
});
}).mouseout(function(){
//鼠标移出事件
$("#bigImg").remove();
});
});
</script>
</body>如果感兴趣的话可以封装成一个专门的放大镜js插件
