碼上快樂

相關內容    簡體    繁體

圖片放大鏡(像淘寶瀏覽商品一樣)JS操作

本文轉載自   查看原文   2016-12-02 20:19   2509    js
×
目錄
[1]布局 [2]JS操作-獲得元素 [3]大圖及面板 [4]面板隨着鼠標移動 [5]控制面板移動范圍 [6]大圖動起來 [7]代碼

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

一,布局

一個大的div,包括下面:

左邊是小圖div,小圖中有可移動的面板.右邊是大圖div,

學到的內容:fiter 濾鏡 這里;  overflow 這里

offsetLeft(HTML DOM 元素對象) 這里

<style type="text/css">
    #div1{
        width: 200px;
        height: 200px;
        padding: 5px;
        border: 1px solid #ccc;
        position: relative;
    }
    #div1 .small_pic{
        width: 200px;
        height: 200px;
        background: #eee;
        position: relative;
    }
    #div1 .float_layer{
        width: 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{
        width: 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;
        width: 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{
        width: 200px;
        height: 200px;
        padding: 5px;
        border: 1px solid #ccc;
        position: relative;
    }
    #div1 .small_pic{
        width: 200px;
        height: 200px;
        background: #eee;
        position: relative;
    }
    #div1 .float_layer{
        width: 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{
        width: 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;
        width: 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>

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 JS 圖片放大鏡 js 實現商品放大鏡效果 JS實現圖片放大鏡 js放大鏡 基於Jquery的商城商品圖片的放大鏡效果(非組件) js實現商品列表及放大鏡效果 原生JS實現圖片放大鏡插件 js、jquery實現放大鏡效果 [原創] JavaScript 圖片放大鏡插件 enlarge.js 以及移動版 enlarge.touch.js Magnifier.js - 支持鼠標滾輪縮放的圖片放大鏡效果
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM