JS 放大鏡特效

阿新 • • 發佈：2019-02-15

<!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;
        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;
        opacity: 0;
    }
    #div1 .big_pic{
        position: absolute;
        top: -1px;
        left: 215px;
        width: 450px;
        height: 450px;
        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/01.jpg" alt="放大圖片1" style="width: 200px;">
        </div>
        <div class="big_pic">
            <img src="images/01.jpg" alt="放大圖片2">
        </div>
    </div>
</body>
</html>

js放大鏡特效

如何原理指定開發事件捕獲兼容 clientx 寬高 top 原理分析：當鼠標在小圖片上移動時，通過捕捉鼠標在小圖片上的位置，定位大圖片的相應位置。（同時，當鼠標在小圖片上移動時，右側大圖片往相反的方向移動。）放大鏡特效設計： ①頁面元素：小圖片，大圖片以及盛放圖

JS 放大鏡特效

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大鏡效果</title> <style

原生js 放大鏡特效

最近在做ecshop的二次開發，遇到一些jquery外掛與ecshop的衝突，調整衝突的需要修改的地方又太多，修改起來得不償失，故做了一個原生的js實現商品詳情頁面的放大鏡效果，以避免衝突！下面介紹一下程式碼及實現過程：首先，建立fangda.html檔案在檔案頭

js常用特效-幻燈片

out cti 自動播放 cto -h src con interval clas 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta char

js常用特效——選項卡效果

weight ont pad absolut cursor asc spa cto clear 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset

JS小特效

ima color absolut fun cli pen left animate ray 1 <script type="text/javascript"> 2 /* 鼠標點擊特效 */ 3 var a_idx = 0; 4 jQuery(docu

JS 放大鏡

http://www.elevateweb.co.uk/image-zoom/examples HTML <img id="zoom_05" src="small/image1.png" data-zoom-image="large/image1.jpg"/> JAVASCRIPT $("

JS倒計時特效

我們在做專案中，不知道什麼時候就用到了前端的倒計時一些的特效，就比如；在我這次做的支付掃碼的專案中就用到倒計時這個特效。在這裡也和大家分享一下倒計時的程式碼 <script type="text/javascript"> window.onload=function(){ v

js滑鼠特效

1、效果，如圖：原始碼： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>star&

js放大鏡

解釋都在程式碼裡面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

原生JS投票特效

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS+CSS實現投票效果 - 何問起</title> <link rel="s

H5+原生js 雪花特效

概述隨著前端技術的發展，越來越多的H5技術被應用到實際開發中，本次實現的是螢幕實現雪花飄落特效。 2 效果圖如下： 3 主要功能實現雪花飄落。。。。後續功能可以自己酌情新增 4實現方式首先，我們需要一個容器，在這裡只需要一個div就可以

JS打字特效 JS 原生程式碼

<html> <head> <title>打字效果的帶連結的新聞標題</title> <meta http-equiv="Content-Type

JS放大鏡demo詳細講解

前言：此放大鏡可直接改變圖片（我是用的是zoom.jpg）使用。前提是必須跟我一樣的佈局，不然裡面的clientX和offsetLeft得作出相應改動。前提先了解數學演算法：求遮罩層mask寬度大圖、大圖顯示區、小圖、遮罩層 1、小圖是

IE瀏覽器下的JS滑鼠特效（文字跟隨滑鼠環繞的特效）

前些天看一些特效介紹的時候，有看到這個就照著做了這個滑鼠環繞文字的特效，目前只能在IE下實現效果。將它分享給大家。希望對大家的學習有幫助，如果有什麼問題，歡迎指正。希望和大家多交流，共同

原生js放大鏡demo

HTML程式碼 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>放大鏡Demo</title> <link

js雪花特效_跟隨頁面滾動的下雪特效

這星期寧波有些地方已經開始下雪了，氣溫一下子降了很多，又快過年了。冬天最喜歡的就是下雪了，我想沒有幾個人不喜歡的，所以就從網路上到處收集有關雪花的特效，今天就來分享第一個JS雪花特效。這是個從淘寶網上拿下來的下雪特效，雪花從頁面的頂部一直往下飄落，當你向下滾動頁面時雪花又從

CSS放大鏡特效

一、CSS程式碼 #divcss5 { width: 120px; height: 90px; padding: 5px; border: 1px solid #ccc; position: relative; } #divcss5 .small_pic { wid

JS 放大鏡（淘寶商品放大鏡）的實現

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

JS文字特效：彩色滾動變幻效果，只適合少量的文字。（過多對頁面有影響）

string cti timeout prefix 哪裏 function 是我 script floor JS代碼如下：代碼具體是在哪裏的我不知道但是我的有道雲上有。如有哪位朋友知道，還望聯系下，添加出處。 <div id="chakhsu"></d

JS 放大鏡特效

相關推薦