jQuery实现图片放大镜效果

$(function(){
	//验证码放大镜
	$(".yzm_img").mouseover(function(e){   鼠标移入事件 e事件对象 event
		var bigImag = $("<img id='bimg' src='"+$(this).attr("src")+"'/>");   
		$(bigImag).css({
			"top":e.pageY+5,   //获取鼠标距顶部的距离，并且向下偏移5px
			"left":e.pageX+10,  //获取鼠标距左部的距离，并且向右偏移5px
			"height":"300px",   //高度
			"width":"200px",   //宽度
			//position属性指定一个元素的定位方法的类型（静态的(static)，相对的(fixed)，绝对或固定(absolute)）
			"position":"absolute",  
			//设置边框的宽度，边框线条的样式（dashed虚线，solid实线），边框的颜色
			"border":"5px solid #cad", 
			//设置边框角度 一个参数匹配每一个角，两个参数设置左上，右下角度，四个参数按照左上，右上，右下，左下的顺序设置
			"border-radius":"30px 10px", 
		});
		$("body").append(bigImag);
	}).mouseout(function(){  //鼠标移出事件
		$("#bimg").remove();
	}).mousemove(function(e){  //鼠标移动事件
		$("#bimg").css({
			"top":e.pageY+5,
			"left":e.pageX+10,
			"height":"300px",
			"width":"200px",
			"position":"absolute",
			"border":"5px solid #cad",
			"border-radius":"30px 10px", 
		});
	});	
});

 图片标签如下：

<img class="yzm_img" alt="加载失败" id='imgVcode' src="<s:url value="/user/getImageCode"/>" />

上边的那种图片方法只适用平常没事自己写着玩，比较浪费资源，重复创建销毁，还有另一种方式，会好一些，代码大致差不多

$(function(){
	var bigImg = $("<img id='bimg' src='' />");
	bigImg.hide();
	$("body").append(bigImg);
	$(".images").mouseover(function(e){
		bigImg.attr("src",$(this).attr("src"));
		$(bigImg).css({
			"top":e.pageY+5,
			"left":e.pageX+10,
			"position":"absolute",   
			"height":"300px", 
			"width":"200px", 
			"border":"5px dashed #cad", 
			"border-radius":"25px 10px"
		});
		bigImg.show();
	}).mouseout(function(){
		$("#bimg").hide();
	}).mousemove(function(e){
		$("#bimg").css({
			"top":e.pageY+5,
			"left":e.pageX+10,
			"position":"absolute",   
			"height":"300px", 
			"width":"200px", 
			"border":"5px dashed #cad", 
			"border-radius":"25px 10px"
		});
	});	
}); 

升级版

<script >
	$(function(){
		//放大镜
		$(".imagess").mouseover(function(event){
			var bigImage = $("<img id='bimg' src='"+$(this).attr("src")+"' />");
			$(bigImage).css({
				"top":event.pageY+5,
				"left":event.pageX+10,
				"width":this.width*4,
				"height":this.height*4,
				"position":"absolute",
				"border":"5px solid #ccaadd",
				"border-radius":"50px 50px",
				"display":"none",
			});
			
			//追加到body中
			$("body").append(bigImage);
			//多久展示出来 毫秒
			bigImage.show(1000);
		}).mouseout(function(){	
			$("#bimg").remove();
		}).mousemove(function(e){
			$("#bimg").css({
				"top":event.pageY+5,
				"left":event.pageX+10,
				"width":this.width * 4,
				"height":this.height * 4,
				"position":"absolute",
				"border":"5px solid #ccaadd",
				"border-radius":"50px 50px"
			});
		});
	
	});
</script>