模仿淘宝图片放大效果图（图片位于鼠标指针左边或右边）

一、放大后的图片始终显示在鼠标的左边

        1、页面显示小图的HTML

<div class="imgBox"><img border=1 class="tip" src="/attendance/showImg?imgName='+img+'"/></div>

         2、大图显示的样式

#tip {
	position:absolute;
	color:#333;
	display: none;
}
#tip s {
	position:absolute;
	top:40px;
	right:-20px;
	display:block;
	width:0px;
	height:0px;
	font-size:0px;
	line-height:0px;
	border-color:transparent transparent transparent #BBA;
	border-style:dashed dashed dashed solid;
	border-width:10px;
}
#tip s i {
	position:absolute;
	top:-10px;
	right:-8px;
	display:block;
	width:0px;
	height:0px;
	font-size:0px;
	line-height:0px;
	border-color:transparent transparent transparent #fff;
	border-style:dashed dashed dashed solid;
	border-width:10px;
}
#tip .t_box {
	position:relative;
	background-color:#CCC;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	bottom:-3px;
	right:3px;
}
#tip .t_box div {
	position:relative;
	background-color:#FFF;
	border:1px solid #ACA899;
	background:#FFF;
	padding:1px;
	top:-3px;
	left:-3px;
}
.tip {
	width:82px;
	height:82px;
	border:1px solid #DDD;
}

         3、鼠标移动到小图上显示大图的时间监听js

$('#clockinTable').on("mouseover mouseout mousemove","img.tip",function(e){
		var pageWidth = document.documentElement.clientWidth;
		var type = e.type;
        if (type === "mouseover"){
        	var $tip=$('<div id="tip"><div class="t_box"><div><img src="'+this.src+'" /><s><i></i></s></div></div></div>');
        	$('body').append($tip);
        	$('#tip').show('fast');
        }else if(type === "mouseout"){
        	$('#tip').remove();
        }else if(type === "mousemove"){
        	$('#tip').css({"top":(e.pageY-60)+"px","right":(pageWidth-e.pageX+30)+"px"});
        }
	})

二、放大后的图片始终显示在鼠标的左边

        1、页面显示小图的HTML

<div class="imgBox"><img border=1 class="tip" src="/attendance/showImg?imgName='+img+'"/></div>

         2、大图显示的样式

#tip {
	position:absolute;
	color:#333;
	display:none;
}
#tip s {
	position:absolute;
	top:40px;
	left:-20px;
	display:block;
	width:0px;
	height:0px;
	font-size:0px;
	line-height:0px;
	border-color:transparent #BBA transparent transparent;
	border-style:dashed solid dashed dashed;
	border-width:10px;
}
#tip s i {
	position:absolute;
	top:-10px;
	left:-8px;
	display:block;
	width:0px;
	height:0px;
	font-size:0px;
	line-height:0px;
	border-color:transparent #fff transparent transparent;
	border-style:dashed solid dashed dashed;
	border-width:10px;
}
#tip .t_box {
	position:relative;
	background-color:#CCC;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	bottom:-3px;
	right:-3px;
}
#tip .t_box div {
	position:relative;
	background-color:#FFF;
	border:1px solid #ACA899;
	background:#FFF;
	padding:1px;
	top:-3px;
	left:-3px;
}
.tip {
	width:82px;
	height:82px;
	border:1px solid #DDD;
}

         3、鼠标移动到小图上显示大图的时间监听js

$('#clockinTable').on("mouseover mouseout mousemove","img.tip",function(e){
		var type = e.type;
        if (type === "mouseover"){
        	var $tip=$('<div id="tip"><div class="t_box"><div><img src="'+this.src+'" /><s><i></i></s></div></div></div>');
        	$('body').append($tip);
        	$('#tip').show('fast');
        }else if(type === "mouseout"){
        	$('#tip').remove();
        }else if(type === "mousemove"){
        	$('#tip').css({"top":(e.pageY-60)+"px","left":(e.pageX+30)+"px"});
        }
	})