图片放大镜(像淘宝浏览商品一样)JS操作

×
目录
[1]布局 [2]JS操作-获得元素 [3]大图及面板 [4]面板随着鼠标移动 [5]控制面板移动范围 [6]大图动起来 [7]代码

-------------------------------------

一,布局

一个大的div,包括下面:

左边是小图div,小图中有可移动的面板.右边是大图div,

学到的内容:fiter 滤镜 这里;  overflow 这里

offsetLeft(HTML DOM 元素对象) 这里

<style type="text/css">
    #div1{
         200px;
        height: 200px;
        padding: 5px;
        border: 1px solid #ccc;
        position: relative;
    }
    #div1 .small_pic{
         200px;
        height: 200px;
        background: #eee;
        position: relative;
    }
    #div1 .float_layer{
         50px;
        height: 50px;
        border:1px solid #000;
        background: #fff;
        filter: alpha(opacity:30);  //滤镜
        opacity: 0.3;
        position: absolute;
        top: 0px;
        left: 0px;
        display: none;
    }
    #div1 .mark{
         100%;
        height:100%;
        position: absolute;
        z-index: 2;
        left: 0px;
        top: 0px;
        background: red;
        filter: alpha(opacity:0);
        opacity: 0;
    }
    #div1 .big_pic{
        position: absolute;
        top: -1px;
        left: 215px;
         250px;
        height: 250px;
        overflow: hidden;
        border: 2px solid #ccc;
        display: none;

    }
    #div1 .big_pic img{
        position: absolute;
        top: 0px;
        left: 0px;
        
    }
</style>
<body>
    <div id="div1">
        <div class="small_pic">
        <span class="mark"></span>
            <span class="float_layer"></span>
            <img src="images/small.png" alt="放大图片1">
        </div>
        <div class="big_pic">
            <img src="images/big.png" alt="放大图片2">
        </div>
    </div>
</body>

-------------------------------------

二,JS操作-获得元素

写获得class函数

function getByClass(oParent, sClass)
{
    var aEle=oParent.getElementsByTagName('*');
    var aTmp=[];
    var i=0;
    
    for(i=0;i<aEle.length;i++)
    {
        if(aEle[i].className==sClass)
        {
            aTmp.push(aEle[i]);
        }
    }
    
    return aTmp;
}

-------------------------------------

三,控制大图及面板的出现和隐藏.

mouseover mouseout

    oMark.onmouseover=function()
    {
        oFloat.style.display='block';
        oBig.style.display='block';


    };
    oMark.onmouseout=function(){
        oFloat.style.display='none';
        oBig.style.display='none';
    };

-------------------------------------

四,让面板随着鼠标移动

mousemove

鼠标位置

下面是确定面板的left

var oEvent=ev||event;
        var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
        var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
oFloat.style.left=l+'px';
oFloat.style.top=t+'px';

-------------------------------------

五,控制面板的可移动范围

判断 超出时强制为某值

if(l<-5)
        {
            l=-5;
        }
        else if (l>oMark.offsetWidth-oFloat.offsetWidth+5){l=oMark.offsetWidth-oFloat.offsetWidth+5;}//参考面板left的确定 这里

        if(t<-5)
        {
            t=-5;
        }

 -------------------------------------

六,大图动起来

按照一个比例

面板在小图里可以移动范围除以小图的宽度,

var tempX=l/(oMark.offsetWidth-oFloat.offsetWidth);
        var tempY=t/(oMark.offsetHeight-oFloat.offsetHeight);

        document.title=tempX;
        oImg.style.left=-tempX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
        oImg.style.top=-tempY*(oImg.offsetHeight-oBig.offsetHeight)+'px';

 下面是效果图.请把鼠标放在图片上

 -------------------------------------

七,代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜效果</title>
<style type="text/css">
    #div1{
         200px;
        height: 200px;
        padding: 5px;
        border: 1px solid #ccc;
        position: relative;
    }
    #div1 .small_pic{
         200px;
        height: 200px;
        background: #eee;
        position: relative;
    }
    #div1 .float_layer{
         50px;
        height: 50px;
        border:1px solid #000;
        background: #fff;
        filter: alpha(opacity:30);
        opacity: 0.3;
        position: absolute;
        top: 0px;
        left: 0px;
        display: none;
    }
    #div1 .mark{
         100%;
        height:100%;
        position: absolute;
        z-index: 2;
        left: 0px;
        top: 0px;
        background: red;
        filter: alpha(opacity:0);
        opacity: 0;
    }
    #div1 .big_pic{
        position: absolute;
        top: -1px;
        left: 215px;
         250px;
        height: 250px;
        overflow: hidden;
        border: 2px solid #ccc;
        display: none;

    }
    #div1 .big_pic img{
        position: absolute;
        top: 0px;
        left: 0px;
        
    }
</style>
<script type="text/javascript">
function getByClass(oParent, sClass)
{
    var aEle=oParent.getElementsByTagName('*');
    var aTmp=[];
    var i=0;
    
    for(i=0;i<aEle.length;i++)
    {
        if(aEle[i].className==sClass)
        {
            aTmp.push(aEle[i]);
        }
    }
    
    return aTmp;
}

window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    var oMark=getByClass(oDiv, 'mark')[0];
    var oFloat=getByClass(oDiv,'float_layer')[0];
    var oBig=getByClass(oDiv,'big_pic')[0];    
    var oSmall=getByClass(oDiv,'small_pic')[0];
    var oImg=oBig.getElementsByTagName('img')[0];
    oMark.onmouseover=function()
    {
        oFloat.style.display='block';
        oBig.style.display='block';


    };
    oMark.onmouseout=function(){
        oFloat.style.display='none';
        oBig.style.display='none';
    };
    oMark.onmousemove=function(ev){
        var oEvent=ev||event;
        var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
        var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
        
        if(l<-5)
        {
            l=-5;
        }
        else if (l>oMark.offsetWidth-oFloat.offsetWidth+5){l=oMark.offsetWidth-oFloat.offsetWidth+5;}

        if(t<-5)
        {
            t=-5;
        }
                else if (t>oMark.offsetHeight-oFloat.offsetHeight+5){t=oMark.offsetHeight-oFloat.offsetHeight+5;}


        oFloat.style.left=l+'px';
        oFloat.style.top=t+'px';
        var tempX=l/(oMark.offsetWidth-oFloat.offsetWidth);
        var tempY=t/(oMark.offsetHeight-oFloat.offsetHeight);

        document.title=tempX;
        oImg.style.left=-tempX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
        oImg.style.top=-tempY*(oImg.offsetHeight-oBig.offsetHeight)+'px';

        
    }
    

};

</script>
</head>
<body>
    <div id="div1">
        <div class="small_pic">
        <span class="mark"></span>
            <span class="float_layer"></span>
            <img src="images/small.png" alt="放大图片1">
        </div>
        <div class="big_pic">
            <img src="images/big.png" alt="放大图片2">
        </div>
    </div>
</body>
</html>


作者：8亩田
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接.

本文如对您有帮助，还请多帮 【推荐】 下此文。
如果喜欢我的文章，请关注我的公众号
如果有疑问,请下面留言

学而不思则罔 思而不学则殆
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/liu-wang/p/6125314.html