放大镜效果

sjy7329

于 2018-12-26 16:33:20 发布

阅读量154

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/sunjynyue/article/details/85264437

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜效果</title>
    <style type="text/css">
        *{ margin:0; padding:0;}
        #div1{ width:312px; margin:50px auto; position:relative;}
        .small{ width:310px; height:310px; border:1px solid #cdcdcd; overflow:hidden; left:0; top:0; position:absolute;}
        .mark{ position:absolute; width:100%; height:100%; background:#ff0000; filter:alpha(opacity:0); opacity:0; z-index:2;cursor:move;}
        .float1{ width:100px; height:100px; background:#fede4f; border:1px solid #aaa; filter:alpha(opacity:50);opacity:0.5; position:absolute;  display:none;}
        .big{ width:310px; height:310px; border:1px solid #cdcdcd; overflow:hidden; position:absolute; left:320px; top:0; display:none;}
        .big img{ position:absolute; left:0; top:0;width:900px;height:900px;}
        #list{ width:288px; height:46px; overflow:hidden; position:absolute; left:10px; top:320px;}
        #list ul{ position:absolute; left:0;}
        #list li{ list-style:none; float:left; padding:4px; overflow:hidden; width:40px; height:40px;}
        #list li img{ border:1px solid #cdcdcd;width:42px;height:42px;}
        #list .active img{  border:1px solid #ff0000;}
        #left{ width:10px; height:45px; display:block; background:url(images/left.gif) no-repeat; position:absolute; top:322px; left:0; cursor:pointer;}
        #right{ width:10px; height:45px; display:block; background:url(images/right.gif) no-repeat; position:absolute; top:322px; left:300px; cursor:pointer;}
    </style>
</head>
<body>
<div id="div1">
    <div class="small" id="small">
        <span class="float1" id="float1"></span>
        <div class="mark"></div>
        <img src="images/m1.jpg" width="310" height="310" id='imgNode' />
    </div>
    <div class="big" id="big">
        <img src="images/b1.jpg" />
    </div>
    <span id="left"></span>
    <span id="right"></span>
    <div id="list">
        <ul>
            <li class="active"><img src="images/s1.jpg" /></li>
            <li><img src="images/s2.jpg" /></li>
            <li><img src="images/s3.jpg" /></li>
            <li><img src="images/s4.jpg" /></li>
            <li><img src="images/s5.jpg" /></li>
            <li><img src="images/s6.jpg" /></li>
            <li><img src="images/s7.jpg" /></li>
            <li><img src="images/s8.jpg" /></li>
            <li><img src="images/s9.jpg" /></li>
            <li><img src="images/s10.jpg" /></li>
        </ul>
    </div>
</div>
</body>
<script>
    //鼠标碰到谁让谁有一个红色边框
    var allLi=list.children[0].children;
    for(var i=0;i<allLi.length;i++){
        allLi[i].οnmοusemοve=function(){
            for(var i=0 ;i<allLi.length;i++){
                allLi[i].className='';
            }
            this.className='active';
            //找出所在的路径并且替换
            setImg(this.children[0],'m',imgNode);
            setImg(this.children[0],'b',big.children[0]);
        }
    }

    //点击右边按钮
    var arr=[];
    for(var i=0;i<allLi.length;i++){
       arr.push(allLi[i]);
    }
    right.οnclick=function(){
        arr.unshift(arr.pop());
        list.children[0].innerHTML='';
        for(var i=0;i<arr.length;i++){
            list.children[0].appendChild(arr[i]);
            console.log(arr[i]);
        }
        //点击右边按钮总是第一个缩略图加上红色边框;
        for(var i=0;i<allLi.length;i++){
            allLi[i].className='';
        }
        allLi[0].className='active';
        //找出所在的路径并且替换
        setImg(allLi[0].children[0],'m',imgNode);
        setImg(allLi[0].children[0],'b',big.children[0]);
    };

    //点击左边按钮
    left.οnclick=function(){
        arr.push(arr.shift());
        list.children[0].innerHTML='';
        for(var i=0;i<arr.length;i++){
            list.children[0].appendChild(arr[i]);
            console.log(arr[i]);
        }
        //点击右边按钮总是第一个缩略图加上红色边框;
        for(var i=0;i<allLi.length;i++){
            allLi[i].className='';
        }
        allLi[0].className='active';
        //找出所在的路径并且替换
        setImg(allLi[0].children[0],'m',imgNode);
        //setImg(allLi[0].children[0],'b',big.children[0]);
    };

    //放大效果
    small.οnmοuseοver=function(){
        float1.style.display='block';
        big.style.display='block';
    };
    small.οnmοusemοve=function(e){
        var ev= e || event;
        var needL=ev.clientX - div1.offsetLeft - float1.offsetWidth/2;
        var needT=ev.clientY -div1.offsetTop -float1.offsetHeight/2;
        //不超出左边距离
        needL<0?needL=0:needL;
        //不超出上边距离
        needT<0?needT=0:needT;
        //不超出右边距离
        var maxL=(small.offsetWidth-2)-float1.offsetWidth;
        needL>maxL?needL=maxL:needL;
        //不超出底部距离
        var maxT=(small.offsetHeight-2)-float1.offsetHeight;
        needT>maxT?needT=maxT:needT;

        var preL=float1.offsetLeft/maxL;
        big.children[0].style.left=-preL*(big.children[0].offsetWidth-big.offsetWidth+2)+'px';

        var preT=float1.offsetTop/maxT;
        big.children[0].style.top=-preT*(big.children[0].offsetHeight-big.offsetHeight+2)+'px';

        float1.style.left=needL+'px';
        float1.style.top=needT+'px';
    };
    small.οnmοuseοut=function(){
      float1.style.display='none';
      big.style.display='none';
    };

    //封装图片路径函数
    function setImg(node,size,imgNode){
        var iSrc=node.src;
        var iSrcLast=iSrc.substring(0,iSrc.lastIndexOf('s'));
        var iSrcNext=iSrc.substring(iSrc.lastIndexOf('s')+1);
        var lastImgSrc=iSrcLast+size+iSrcNext;

        imgNode.src=lastImgSrc;
    }
</script>
</html>

sjy7329

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
放大镜效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;放大镜效果&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫