js实现图片放大显示效果

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>放大镜的实现</title>
<style type="text/css">
*{padding:0;margin:0;}
a>img{border:0;display:block;}
ul,li{list-style:none;}
#product{width:430px;height:520px;margin:50px;}
#product .p_header{width:430px;height:430px;}
#p_h_a{display:block;position:relative;}
#cover{width:50%;height:50%;background-image:url(images/scanbg.png);display:block;position:absolute;top:0;left:0;display:none;cursor:move;}
#bigImg{width:100%;height:100%;background-image:url(images/b_1.jpg);position:absolute;top:0;left:102%;box-shadow:2px 5px 10px #333;padding:10px;display:none;}
#tab{padding:10px 20px;}
#pro li{width:60px;height:60px;float:left;margin:0 7px;border:2px solid transparent;transition:border-color .5s linear;cursor:pointer;}
#pro li:hover{border-color:#f60;}
</style>
</head>
<body>
<div id="abc" style="height:300px;"></div>
<div id="product">
<div class="p_header">
<a href="javascript:void(0);" id="p_h_a">
<img src="images/m_1.jpg" id="mImg"/>
<span id="cover"></span>
<div id="bigImg"></div>
</a>
</div>

<div id="tab">
<ul id="pro">
<li><img src="images/s_1.jpg"/></li>
<li><img src="images/s_2.jpg"/></li>
<li><img src="images/s_3.jpg"/></li>
<li><img src="images/s_4.jpg"/></li>
<li><img src="images/s_5.jpg"/></li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
function $(id){
return document.getElementById(id);
};
//找到pro下方的所有li元素
var pChilds = $("pro").children;
var mImgDom = $("mImg");
var bImgDom = $("bigImg");
var aDom = $("p_h_a");
var coverDom = $("cover");
for(var i=0;i<pChilds.length;i++){
//鼠标移入li元素
pChilds[i].onmouseover = function(){
//获取当前li元素的第一个孩子img的src地址
var sImgSrc = this.children[0].src;
//将sImgSrc替换成中等图片和大图片的src
var mImgSrc = sImgSrc.replace("images/s_","images/m_");
var bImgSrc = sImgSrc.replace("images/s_","images/b_");
//设置中等图片的路径
mImgDom.src = mImgSrc;
//设置大等图片的路径
bImgDom.style.backgroundImage = "url("+bImgSrc+")";
};
}

//鼠标在a链接移动的时候
aDom.onmousemove = function(e){
e = e||window.event;
var sTop = document.body.scrollTop||document.documentElement.scrollTop;
var sLeft = document.body.scrollLeft||document.documentElement.scrollLeft;
var x = e.pageX?e.pageX:e.clientX+sLeft;
var y = e.pageY?e.pageY:e.clientY+sTop;
var curX = x - this.offsetLeft - coverDom.offsetWidth/2;
var curY = y - this.offsetTop - coverDom.offsetHeight/2;
var maxWidth = this.offsetWidth - coverDom.offsetWidth;
var maxHeight = this.offsetHeight - coverDom.offsetHeight;
//判断边界
if(curX<0){
curX = 0;
}else if(curX>=maxWidth){
curX = maxWidth;
}
curY = curY<0?curY=0:curY>=maxHeight?maxHeight:curY;
coverDom.style.left = curX+"px";
coverDom.style.top = curY+"px";
//计算比率
var px = curX/(this.offsetWidth/2)*100+"%";
var py = curY/(this.offsetHeight/2)*100+"%";
bImgDom.style.backgroundPosition = ""+px+" "+py+"";
};

//鼠标移入a连接的时候 onmouseover onmouseenter
aDom.onmouseenter = function(){
//拖拽层显示
coverDom.style.display = "block";
//大图片显示
bImgDom.style.display = "block";
};
//鼠标移出a连接的时候 onmouseout onmouseleave
aDom.onmouseleave = function(){
//拖拽层显示
coverDom.style.display = "none";
//大图片显示
bImgDom.style.display = "none";
};
//解决bug问题
bImgDom.onmousemove = function(){
//拖拽层显示
coverDom.style.display = "none";
//大图片显示
bImgDom.style.display = "none";
};
};
</script>
</body>
</html>

ucicno000

发布了70 篇原创文章 · 获赞 16 · 访问量 8万+

私信关注

js实现图片放大显示效果

猜你喜欢