效果图如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
text-align: center;
}
div img{
width: 200px;
height: 200px;
margin-right: 20px;
cursor: pointer;
}
.bigBox{
width: 400px;
height: 400px;
position: absolute;
display: none;
}
.bigBox img{
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
function get(){
if(arguments.length==1){
return document.getElementById(arguments[0]);
}else{
return arguments[0].getElementsByTagName(arguments[1]);
}
}
var box=get(document,"div")[0],
imgs=get(box,"img"),
bigBox=get("bigBox"),
i=0;
for(i=0;i<imgs.length;i++){
//鼠标移到相应的图片触发
imgs[i].οnmοuseοver=function(){
var big=document.createElement("img");
var big=new Image();
big.src=this.src;
bigBox.appendChild(big);
bigBox.style.display="block";
this.style.opacity="0.6";
};
//鼠标移动,改变坐标,这里大图的坐标相比鼠标的坐标要偏移20像素,如果大图坐标直接与鼠标坐标相等,很容易重复触发onmouseover事件,从而不断的添加big节点
imgs[i].οnmοusemοve=function(event){
var event=event || window.event;
marginRight=box.offsetWidth-event.clientX-20;
//当大图到达浏览器窗口右边界时改为左侧显示
bigBox.style.left=bigBox.offsetWidth>marginRight?event.clientX-20-bigBox.offsetWidth+"px":event.clientX+20+"px";
bigBox.style.top=event.clientY+20+"px";
};
//鼠标移出,清除大图节点
imgs[i].οnmοuseοut=function(){
bigBox.style.display="none";
bigBox.removeChild(bigBox.lastChild);
this.style.opacity="";
};
}
};
</script>
</head>
<body>
<div>
<img src="../images/1.jpg">
<img src="../images/2.jpg">
<img src="../images/3.jpg">
<img src="../images/4.jpg">
</div>
<div class="bigBox" id="bigBox"></div>
</body>
</html>
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)