2018-12-02

放大镜

效果2.gif

HTML

<
>

当前放大倍数

<
5
>

CSS
*{
padding: 0;
margin: 0;
background-color: #eee;
}

smallBox{

position: relative;
width: 400px;
height: 300px;
margin-top: 100px;
margin-left: 200px;

}

floatBox{

position: absolute;
width: 100px;
height: 100px;
background-color: #ccc;
z-index: 9999;  
cursor: move;
display: none;
opacity: 0.5;
left: 0;
top: 0;

}

smallImg{

position: absolute;
width: 400px;
height: 300px;

}

smallImg img{

position: absolute;
width: 400px;
height: 300px; 

}
.active{
z-index: 999;
}

banner{

position: relative;
width: 520px;
height: 80px;
margin-left: 150px;
margin-top: 30px;
overflow: hidden;

}

img{

width: 2500px;
height: 80px;
position: absolute;
left: -630px;

}

img img{

position: relative;
width: 100px;
height: 80px;
overflow: hidden;

}

next,

prve{

width: 50px;
font-size: 36px;
height: 80px;
line-height: 80px;
text-align: center;
margin-top: -80px;
position: absolute;

}

next{

margin-left: 685px;

}

prve{

margin-left: 80px;

}

next:hover,

prve:hover{

cursor: pointer;
background-color: orange;
color: #fff;

}

img img:hover{

cursor: pointer;
transform: scale(1.2);
transition: 1s;

}

btns{

position: relative;
width: 500px;
height: 150px;
margin: 50px 110px;
background-color: #9e9e9e61;

}
p{
width: 500px;
position: absolute;
text-align: center;
height: 50px;
line-height: 50px;
font-size: 36px;
}

turnSmall,

look,

turnBig{

position: absolute;
height: 100px;
line-height: 100px;
font-size: 26px;
margin-top: 50px;
text-align: center;

}

turnSmall{

margin-left: 0px;
width: 100px;
cursor: pointer;

}

turnBig{

margin-left: 450px;
width: 100px;
cursor: pointer;

}

look{

width: 300px;
margin-left: 120px;
background-color: #9e9e9e61;
color: #fff;
font-size: 40px;

}

bigBox{

position: absolute;
top: 200px;
left: 800px;
width: 500px;
height: 400px;
overflow: hidden;
display: none;

}

bigImg{

position: absolute;
width: 500px;
height: 400px;
left: 0px;
top: 0px;

}

bigImg img{

position: absolute;
width: 2665px;
height: 1500px;

}

JavaScript
function byId(id) {
return typeof(id) === "string"?document.getElementById(id):id; //判断id是否为字符串
}//封装一个代替getElementById()的方法

var middleImg = byId('smallImg');
var smallImg = byId('smallImg').getElementsByTagName('img');
var prve = byId('prve');
var next = byId('next');
var img = byId('img');
var index = 2;
var Img = img.getElementsByTagName('img');
var turnSmall = byId('turnSmall');
var turnBig = byId('turnBig');
var look = byId('look');
var bigImg = byId('bigImg').getElementsByTagName('img');
var t = look.innerHTML;
var banner = byId('banner');
var floatBox = byId('floatBox');
var smallBox = byId('smallBox')
var bigBox = byId('bigBox');
var bigpit = byId('bigImg');
var showImg = 8;

//赋值id
+function(){
for(var i=0;i smallImg[i].id = i;
bigImg[i].id = i;
}
}();

for(let i=0;i if(i==3){
Img[i].onclick = function(){
for(var j=0;j if(Img[j].className=="show"){
var oldLeft = Img[j].offsetLeft;
break;
}
}
img.style.transition = "0s";
function come1(){
if(img.offsetLeft<-105){
img.style.left = img.offsetLeft + 5+ 'px';
setTimeout(come1,10);
}
else{
img.style.left = -945 + 'px';
}
}
come1();
for(var k=0;k Img[k].className = "";
}
Img[11].className = "show";
showImg =11;
index = index+(i-j);
if(index>7){
index = index - 8;
}
if(index<0){
index = 8 + index;
}
clear();
smallImg[index].className = 'active';
bigImg[index].className = 'active';

    }
}
else if(i==2){
    Img[i].onclick = function(){
        for(var j=0;j7){
            index = index - 8;
        }
        if(index<0){
            index = 8 + index;
        }
        clear();
        smallImg[index].className = 'active';
        bigImg[index].className = 'active';
    }
}
else if(i==1){
    Img[i].onclick = function(){
        for(var j=0;j7){
            index = index - 8;
        }
        if(index<0){
            index = 8 + index;
        }
        clear();
        smallImg[index].className = 'active';
        bigImg[index].className = 'active';
    }
}
else if(i==16){
    Img[i].onclick = function(){
        for(var j=0;j-1465){
                img.style.left = img.offsetLeft - 5+ 'px';
                setTimeout(come3,10);
            }
            else{
                img.style.left = -630 + 'px';
            }
        }
        come3();    
        for(var k=0;k7){
            index = index - 8;
        }
        if(index<0){
            index = 8 + index;
        }
        clear();
        smallImg[index].className = 'active';
        bigImg[index].className = 'active';
    }
}
else if(i==17){
    Img[i].onclick = function(){
        for(var j=0;j-1570){
                img.style.left = img.offsetLeft - 5+ 'px';
                setTimeout(come4,10);
            }
            else{
                img.style.left = -735 + 'px';
            }
        }
        come4();    
        for(var k=0;k7){
            index = index - 8;
        }
        if(index<0){
            index = 8 + index;
        }
        clear();
        smallImg[index].className = 'active';
        bigImg[index].className = 'active';
    }
}
else{
    Img[i].onclick = function(){
        for(var j=0;j6){
                while(parseInt(img.style.left)%105!=0){
                    cha--;
                    img.style.left = cha +'px';
                }
            }
            else{
                while(parseInt(img.style.left)%105!=0){
                    cha++;
                    img.style.left = cha +'px';
                }
            }
            
        }
        for(var k=0;k7){
            index = index - 8;
        }
        if(index<0){
            index = 8 + index;
        }
        clear();
        smallImg[index].className = 'active';
        bigImg[index].className = 'active';
        console.log(img.offsetLeft)
    
    }
}

}

function changeShowNext(){
showImg++;
if(showImg>19){
showImg = 11;
}
for(var i=0;i Img[i].className = "";
}
Img[showImg].className = "show";
}

function changeShowPrve(){
showImg--;
if(showImg==0){
showImg = 8;
}
for(var i=0;i Img[i].className = "";
}
Img[showImg].className = "show";
}

smallBox.onmouseover = function(){
floatBox.style.display = "block";
bigBox.style.display = "block";
}

smallBox.onmouseout = function(){
floatBox.style.display = "none";
bigBox.style.display = "none";
}

smallBox.onmousemove = function(ev){
var event = ev;
var moveLeft = event.clientX;
var moveTop = event.clientY;
floatBox.style.left = moveLeft-smallBox.offsetLeft - 50+'px';
floatBox.style.top = moveTop -smallBox.offsetTop - 50+ 'px';
if(parseInt(floatBox.style.left)<0){
floatBox.style.left = 0+'px';
}
else if(parseInt(floatBox.style.left)>300){
floatBox.style.left = 300+'px';
}
if(parseInt(floatBox.style.top)<0){
floatBox.style.top = 0+'px';
}
else if(parseInt(floatBox.style.top)>200){
floatBox.style.top = 200+'px';
}
bigpit.style.left = -parseInt(floatBox.style.left)/(smallBox.offsetWidth-floatBox.offsetWidth)(bigImg[0].offsetWidth-bigBox.offsetWidth)+'px';
bigpit.style.top = -parseInt(floatBox.style.top)/(smallBox.offsetHeight-floatBox.offsetHeight)(bigImg[0].offsetHeight-bigBox.offsetHeight)+'px';
}

function clear(){
for(var i=0;i smallImg[i].className = '';
bigImg[i].className = '';
}
}

//next添加class
function putClass(){
index++;
if(index>7){
index = 0;
}
clear();
smallImg[index].className = 'active';
bigImg[index].className = 'active'

}
//prve添加class
function putclass(){
index--;
if(index<0){
index = 7;
}
clear();
smallImg[index].className = 'active';
bigImg[index].className = 'active'
}

next.onclick = function(){
if(img.offsetLeft%105==0){
if(img.offsetLeft==-1365){
img.style.transition = '0s';
showImg = 7;
function GO(){
if(img.offsetLeft>-1470){
img.style.left = img.offsetLeft - 2 +'px';
setTimeout(GO,10);
}
else{
img.style.left = -630 +'px';

            }
            
        }
        GO();
    }
    else{
        img.style.left = img.offsetLeft - 105 +'px';
        img.style.transition = '1s';
    }
    putClass();
    changeShowNext();
    console.log(img.offsetLeft)
    
    
}

}
prve.onclick = function(){
if(img.offsetLeft%105==0){
if(img.offsetLeft==-105){
img.style.transition = '0s';
showImg = 11;
function go(){
if(img.offsetLeft<0){
img.style.left = img.offsetLeft + 2 +'px';
setTimeout(go,10);
}
else{
img.style.left = -840 +'px';

            }
            
        }
        go();
        
    }
    else{
        img.style.left = img.offsetLeft + 105 +'px';
        img.style.transition = '1s';
    }
    putclass();
    changeShowPrve();
    console.log(img.offsetLeft)
}

}

turnBig.onclick = function(){
t++;
if(t>10){
t=10;
}
look.innerHTML = t;
change(t);
}
turnSmall.onclick = function(){
t--;
if(t<1){
t=1;
}
look.innerHTML = t;
change(t);
}

function change(a){
for(var i=0;i bigImg[i].style.width = 533a+'px';
bigImg[i].style.height = 300a +'px';
}
}