html:
<div id="wrap">
<img src="imgs/2.jpg" id="small">
<div id="move"></div>
<div id="bigPic">
<img src="./imgs/2.jpg" id="bigImg">
</div>
</div>
<div id="box">
<ul>
<li>
<img src="./imgs/2.jpg">
</li>
<li>
<img src="./imgs/3.jpg">
</li>
<li>
<img src="./imgs/4.jpg">
</li>
<li>
<img src="./imgs/5.jpg">
</li>
</ul>
</div>
css:
*{
padding:0;
margin:0;
}
#wrap{
width:400px;
height:400px;
background:pink;
margin-top:80px;
margin-left:100px;
border:1px solid #ccc;
position:relative;
}
#wrap #small{
width:100%;
display:block;
}
#move{
width:160px;
height:160px;
background:rgba(255,242,0,0.3);
position:absolute;
top:0;
left:0;
display:none;
}
#bigPic{
width:400px;
height:400px;
position:absolute;
top:0;
left:400px;
border:1px solid #ccc;
margin-left:10px;
overflow:hidden;
display:none;
}
#bigImg{
position:absolute;
}
#box{
width:400px;
height:100px;
margin-top:5px;
margin-left:100px;
}
#box li{
width:100px;
height:100px;
list-style:none;
float:left;
}
li img{
width:100%;
}
js:
window.onload = function(){
// 获取小图外div
var wrap = document.getElementById("wrap");
// 获取小图;
var smallImg = document.getElementById("small");
// 获取大图外div
var bigPic = document.getElementById("bigPic");
// 获取大图;
var bigImg = document.getElementById("bigImg");
// 获取move
var move = document.getElementById("move");
//刚开始move和大图是隐藏的;
wrap.onmouseover = function(){
move.style.display = "block";
bigPic.style.display = "block";
}
wrap.onmouseout = function(){
move.style.display = "none";
bigPic.style.display = "none";
}
bigPic.onmouseover = function(){
move.style.display = "none";
bigPic.style.display = "none";
}
//实现效果:鼠标在大图上移动,move跟随;
wrap.onmousemove = function(e){
var e = e || window.event;
var newLeft = e.clientX - wrap.offsetLeft - move.offsetWidth/2;
var newTop = e.clientY - wrap.offsetTop - move.offsetHeight/2;
//临界值;
var maxLeft = wrap.offsetWidth-1 - move.offsetWidth;
var maxTop = wrap.offsetHeight - move.offsetHeight;
//横向临界值
if(newLeft >= maxLeft){
newLeft = maxLeft;
}
if(newLeft <= 0){
newLeft = 0;
}
//纵向临界值;
if(newTop >= maxTop){
newTop = maxTop
}
if(newTop <= 0){
newTop = 0;
}
//大图和小图的联系是:
// 小图左偏移/小图宽 = 大图左偏移/大图宽 现在求大图左偏移
var newBigLeft = newLeft*bigImg.offsetWidth/smallImg.offsetWidth;
var newBigTop = newTop*bigImg.offsetHeight/smallImg.offsetHeight;
bigImg.style.left = -newBigLeft + "px";
bigImg.style.top = -newBigTop + "px";
move.style.left = newLeft + "px";
move.style.top = newTop + "px";
move.style.cursor = "move";
}
// 获取li外层的div元素;
var oBox = document.getElementById("box");
var oLis = oBox.getElementsByTagName("li");
for(var i = 0;i<oLis.length;i++){
oLis[i].onmouseover = function(){
smallImg.src = this.children[0].src;
bigImg.src = this.children[0].src;
}
}
}