美文网首页
2018-12-02

2018-12-02

作者: 一曲一人听 | 来源:发表于2018-12-02 18:42 被阅读0次

    放大镜


    效果2.gif

    HTML
    <!DOCTYPE html>
    <html>
    <head>
    <title>放大镜</title>
    <link rel="stylesheet" type="text/css" href="css.css">
    <meta charset="utf-8">
    </head>
    <body onselectstart="return false;">
    <div id="left">
    <div id="smallBox">
    <div id="floatBox"></div>
    <div id="smallImg">
    <img src="img/01.jpg">
    <img src="img/02.jpg">
    <img src="img/03.jpg" class="active">
    <img src="img/04.jpg">
    <img src="img/05.jpg">
    <img src="img/06.jpg">
    <img src="img/07.jpg">
    <img src="img/08.jpg">
    </div>
    </div>
    <div id="banner">
    <div id="img">
    <img src="img/03.jpg">
    <img src="img/04.jpg">
    <img src="img/05.jpg">
    <img src="img/06.jpg">
    <img src="img/07.jpg">
    <img src="img/08.jpg">
    <img src="img/01.jpg">
    <img src="img/02.jpg">
    <img src="img/03.jpg" class="show">
    <img src="img/04.jpg">
    <img src="img/05.jpg">
    <img src="img/06.jpg">
    <img src="img/07.jpg">
    <img src="img/08.jpg">
    <img src="img/01.jpg">
    <img src="img/02.jpg">
    <img src="img/03.jpg">
    <img src="img/04.jpg">
    <img src="img/05.jpg">
    <img src="img/06.jpg">
    </div>
    </div>
    <div id="btn">
    <span id="prve"><</span>
    <span id="next">></span>
    </div>
    <div id="btns">
    <p>当前放大倍数</p>
    <span id="turnSmall"><</span>
    <span id="look">5</span>
    <span id="turnBig">></span>
    </div>
    <div id="bigBox">
    <div id="bigImg">
    <img src="img/01.jpg">
    <img src="img/02.jpg">
    <img src="img/03.jpg" class="active">
    <img src="img/04.jpg">
    <img src="img/05.jpg">
    <img src="img/06.jpg">
    <img src="img/07.jpg">
    <img src="img/08.jpg">
    </div>
    </div>
    </div>

    <script type="text/javascript" src="js.js"></script>

    </body>
    </html>

    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.length;i++){
    smallImg[i].id = i;
    bigImg[i].id = i;
    }
    }();

    for(let i=0;i<Img.length;i++){
    if(i==3){
    Img[i].onclick = function(){
    for(var j=0;j<Img.length;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.length;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;j<Img.length;j++){
            if(Img[j].className=="show"){
                var oldLeft = Img[j].offsetLeft;
                break;
            }
        }
        img.style.transition = "0s";
        function come2(){
            if(img.offsetLeft<0){
                img.style.left = img.offsetLeft + 5+ 'px';
                setTimeout(come2,10);
            }
            else{
                img.style.left = -840 + 'px';
            }
        }
        come2();    
        for(var k=0;k<Img.length;k++){
            Img[k].className = "";
        }
        Img[10].className = "show";
        showImg=10;
        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==1){
    Img[i].onclick = function(){
        for(var j=0;j<Img.length;j++){
            if(Img[j].className=="show"){
                var oldLeft = Img[j].offsetLeft;
                break;
            }
        }
        img.style.transition = "0s";
        function come5(){
            if(img.offsetLeft<105){
                img.style.left = img.offsetLeft + 5+ 'px';
                setTimeout(come5,10);
            }
            else{
                img.style.left = -735 + 'px';
            }
        }
        come5();    
        for(var k=0;k<Img.length;k++){
            Img[k].className = "";
        }
        Img[9].className = "show";
        showImg=9;
        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==16){
    Img[i].onclick = function(){
        for(var j=0;j<Img.length;j++){
            if(Img[j].className=="show"){
                var oldLeft = Img[j].offsetLeft;
                break;
            }
        }
        img.style.transition = "0s";
        function come3(){
            if(img.offsetLeft>-1465){
                img.style.left = img.offsetLeft - 5+ 'px';
                setTimeout(come3,10);
            }
            else{
                img.style.left = -630 + 'px';
            }
        }
        come3();    
        for(var k=0;k<Img.length;k++){
            Img[k].className = "";
        }
        Img[8].className = "show";
        showImg=8;
        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==17){
    Img[i].onclick = function(){
        for(var j=0;j<Img.length;j++){
            if(Img[j].className=="show"){
                var oldLeft = Img[j].offsetLeft;
                break;
            }
        }
        img.style.transition = "0s";
        function come4(){
            if(img.offsetLeft>-1570){
                img.style.left = img.offsetLeft - 5+ 'px';
                setTimeout(come4,10);
            }
            else{
                img.style.left = -735 + 'px';
            }
        }
        come4();    
        for(var k=0;k<Img.length;k++){
            Img[k].className = "";
        }
        Img[9].className = "show";
        showImg=9;
        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{
    Img[i].onclick = function(){
        for(var j=0;j<Img.length;j++){
            if(Img[j].className=="show"){
                var oldLeft = Img[j].offsetLeft;
                break;
            }
        }
        img.style.transition = "1s";
        var newLeft = Img[i].offsetLeft - oldLeft;
        img.style.left = img.offsetLeft - newLeft+'px';
        if(parseInt(img.style.left)%105!=0){
            var cha = parseInt(img.style.left);
            if(Math.abs(parseInt(img.style.left)%105)>6){
                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;k<Img.length;k++){
            Img[k].className = "";
        }
        Img[i].className = "show";
        showImg = i;
        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';
        console.log(img.offsetLeft)
    
    }
}

    }

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

    function changeShowPrve(){
    showImg--;
    if(showImg==0){
    showImg = 8;
    }
    for(var i=0;i<Img.length;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.length;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.length;i++){
    bigImg[i].style.width = 533a+'px';
    bigImg[i].style.height = 300    a +'px';
    }
    }

    相关文章

      网友评论

          本文标题：2018-12-02

          本文链接：https://www.haomeiwen.com/subject/wuqscqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|2018-12-02|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！