HTML放大鏡的一種實現(xiàn)及原理講解（js）

0.效果預(yù)覽

預(yù)覽.png

上下方的寬度和高度指的是圖片內(nèi)可移動滑塊的長寬般甲，下文以‘放大鏡’來稱呼該滑塊免钻。

基本功能

移動放大鏡來選擇需要放大的區(qū)域另患。
可以根據(jù)需求調(diào)整放大鏡尺寸和倍數(shù)凭语，默認放大鏡尺寸為50px*50px，放大倍數(shù)為2倍薄啥。
上下滑動鼠標(biāo)滾輪來放大（縮性稹）放大鏡尺寸。
下方實時顯示放大鏡當(dāng)前尺寸和放大倍數(shù)垄惧。

eg: 調(diào)整放大鏡大小來顯示一行英文

image.png

1.原理講解

HTML部分

<body>
    <div id="parent">
        <div id="setting">
            <span id="set">Setting</span> <span>寬:</span><input type="text" id="mgfW"><span>高:</span><input type="text" id="mgfH"><span>倍數(shù):</span><input type="text" id="times">
            <input type="button" value="確認" id="sure">
        </div>
        <div id="curPic">
            <div id="mgf"></div>
            <img src="./0.jpg" />
        </div>
        <p id="inF">當(dāng)前寬度：<span id ="curW"></span> 當(dāng)前高度：<span id="curH"></span> 當(dāng)前倍數(shù)：<span id="curT"></span></p>
        <div id="boxEnlarge">
            <img src="./0.jpg" />
        </div>
    </div>
</body>

CSS部分

#parent{
    position: relative;
    margin: 50px auto;
}
#setting{
    position: absolute;
    width: 400px;
    top:20px;
    left: 50px;
    text-align: center;
    font-family: SimSun;
}
#inF{
    position: absolute;
    left: 50px;
    width: 400px;
    top: 440px;
    text-align: center;
    font-family: Simsun;
}
#curW, #curH, #curT{
    color: blue;
}
#set{
    font-weight: bold; 
    font-style: italic;
}
#sure{
    font-family: Simsun;
    color:red;
}
#mgfH, #mgfW, #times{
    width: 50px;
}
#curPic{
    position: absolute;
    top: 50px;
    left: 50px;
}
#curPic:hover{
    cursor: move;
}
#curPic img{
    width: 400px;
    height: 400px;
}
#mgf{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255, 230, 93, 0.3);
}
#boxEnlarge{
    display: none;
    position: absolute;
    top: 50px;
    left: 550px;
    overflow: hidden;
}

準備一張圖片（最好是大圖）刁愿，默認顯示區(qū)和放大區(qū)域兩部分放入該圖片，默認區(qū)域和內(nèi)部的圖片大小事先是設(shè)置好了的到逊，放大區(qū)域和內(nèi)部的圖片大小之后根據(jù)放大倍數(shù)設(shè)置铣口。

JS部分

①控制放大區(qū)域和放大鏡的顯示與隱藏

var parent = document.getElementById('parent');
var curpic = document.getElementById('curPic');
var mgf = document.getElementById("mgf");
var boxEnlarge = document.getElementById("boxEnlarge");
/*鼠標(biāo)移至圖片范圍時，顯示‘放大鏡’和放大區(qū)域*/
curpic.onmouseover = function(){
    var mgf = document.getElementById("mgf");
    mgf.style.display = "block";
    boxEnlarge.style.display = "block";
}
/*鼠標(biāo)移出圖片范圍時觉壶，隱藏‘放大鏡’和放大區(qū)域*/
curpic.onmouseout = function(){
    var mgf = document.getElementById("mgf");
    mgf.style.display = "none";
    boxEnlarge.style.display = "none";
}

②放大鏡的倍數(shù)和尺寸設(shè)置

/*默認‘放大鏡’尺寸和放大倍數(shù)*/
var times = 2;
var mgfW = 50;
var mgfH = 50;
var curT = document.getElementById('curT');
var curW = document.getElementById('curW');
var curH = document.getElementById('curH');
curT.innerText = 2+'倍';
curW.innerText = 50+'px';
curH.innerText = 50+'px;'
mgf.style.width = mgfW + 'px';
mgf.style.height = mgfH + 'px';
/*自定義‘放大鏡’尺寸和放大倍數(shù)*/
var button = document.getElementById('sure');
button.onclick = function (){//點擊確認按鈕觸發(fā)事件
    times = document.getElementById('times').value;
    mgfH = document.getElementById('mgfH').value;
    mgfW = document.getElementById('mgfW').value;
    if(mgfH > curpic.offsetHeight){
        mgfH = curpic.offsetHeight;
    }
    if(mgfW > curpic.offsetWidth){
        mgfW = curpic.offsetWidth;
    }
    mgf.style.width = mgfW + 'px';
    mgf.style.height = mgfH + 'px';
    curH.innerText = mgfH + 'px';
    curW.innerText = mgfW + 'px';
    curT.innerText = times + '倍';
}

③放大鏡隨鼠標(biāo)移動

/*‘放大鏡’隨鼠標(biāo)移動*/
curpic.onmousemove = function(){
    Move();
}
function Move(e){
    /*根據(jù)‘放大鏡’和放大倍數(shù)設(shè)置放大區(qū)域大小*/
    boxEnlarge.style.width = mgf.offsetWidth*times + 'px';
    boxEnlarge.style.height = mgf.offsetHeight*times + 'px';
    
    /*鼠標(biāo)移至‘放大鏡’中心*/
    e = e || event;
    var mgfx = e.clientX - curpic.offsetLeft - parent.offsetLeft - mgf.offsetWidth/2;
    var mgfy = e.clientY - curpic.offsetTop - parent.offsetTop - mgf.offsetHeight/2;
    if(mgfx<0){
        mgfx = 0;
    }
    if(mgfx >= curpic.offsetWidth-mgf.offsetWidth){
        mgfx = curpic.offsetWidth-mgf.offsetWidth;
    }
    if(mgfy<0){
        mgfy = 0;
    }
    if(mgfy >= curpic.offsetHeight-mgf.offsetHeight){
        mgfy = curpic.offsetHeight-mgf.offsetHeight;
    }
    mgf.style.left = mgfx + 'px';
    mgf.style.top = mgfy + 'px';
    
    /*設(shè)置放大的圖片尺寸并根據(jù)‘放大鏡’的移動調(diào)整顯示區(qū)域*/
    var pic = boxEnlarge.children[0];
    pic.style.width = curpic.offsetWidth*times + 'px';
    pic.style.height = curpic.offsetHeight*times + 'px';
    pic.style.marginLeft = ((-1)*mgf.offsetLeft*times)+'px';
    pic.style.marginTop = ((-1)*mgf.offsetTop*times)+'px';
}

④鼠標(biāo)滾動放大（縮心蕴狻）放大鏡

//未設(shè)置兼容性
curpic.onmousewheel = function(e){
    if(e.wheelDelta>0){
        if(mgf.offsetWidth*1.5 > curpic.offsetWidth){
            mgf.style.width = curpic.offsetWidth + 'px';
            return;
        }
        if(mgf.offsetHeight*1.5 > curpic.offsetHeight){
            mgf.style.height = curpic.offsetHeight + 'px';
            return;
        }
        mgf.style.width=mgf.offsetWidth*1.5 +'px';
        mgf.style.height=mgf.offsetHeight*1.5 +'px';
    }
    if(e.wheelDelta<0){
        mgf.style.width= parseInt(mgf.offsetWidth/1.5) +'px';
        mgf.style.height=parseInt(mgf.offsetHeight/1.5) +'px';
    }
    curH.innerText = mgf.offsetHeight + 'px';
    curW.innerText = mgf.offsetWidth + 'px';
    Move();
}

2.完整代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>放大鏡</title>
<style>
#parent{
    position: relative;
    margin: 50px auto;
}
#setting{
    position: absolute;
    width: 400px;
    top:20px;
    left: 50px;
    text-align: center;
    font-family: SimSun;
}
#inF{
    position: absolute;
    left: 50px;
    width: 400px;
    top: 440px;
    text-align: center;
    font-family: Simsun;
}
#curW, #curH, #curT{
    color: blue;
}
#set{
    font-weight: bold; 
    font-style: italic;
}
#sure{
    font-family: Simsun;
    color:red;
}
#mgfH, #mgfW, #times{
    width: 50px;
}
#curPic{
    position: absolute;
    top: 50px;
    left: 50px;
}
#curPic:hover{
    cursor: move;
}
#curPic img{
    width: 400px;
    height: 400px;
}
#mgf{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255, 230, 93, 0.3);
}
#boxEnlarge{
    display: none;
    position: absolute;
    top: 50px;
    left: 550px;
    overflow: hidden;
}
</style>
<script>
    window.onload = function(){
    var parent = document.getElementById('parent');
    var curpic = document.getElementById('curPic');
    var mgf = document.getElementById("mgf");
    var boxEnlarge = document.getElementById("boxEnlarge");
    curpic.onmouseover = function(){
        var mgf = document.getElementById("mgf");
        mgf.style.display = "block";
        boxEnlarge.style.display = "block";
    }
    curpic.onmouseout = function(){
        var mgf = document.getElementById("mgf");
        mgf.style.display = "none";
        boxEnlarge.style.display = "none";
    }
    var times = 2;
    var mgfW = 50;
    var mgfH = 50;
    var curT = document.getElementById('curT');
    var curW = document.getElementById('curW');
    var curH = document.getElementById('curH');
    curT.innerText = 2+'倍';
    curW.innerText = 50+'px';
    curH.innerText = 50+'px;'
    mgf.style.width = mgfW + 'px';
    mgf.style.height = mgfH + 'px';
    var button = document.getElementById('sure');
    button.onclick = function (){
        times = document.getElementById('times').value;
        mgfH = document.getElementById('mgfH').value;
        mgfW = document.getElementById('mgfW').value;
        if(mgfH > curpic.offsetHeight){
            mgfH = curpic.offsetHeight;
        }
        if(mgfW > curpic.offsetWidth){
            mgfW = curpic.offsetWidth;
        }
        mgf.style.width = mgfW + 'px';
        mgf.style.height = mgfH + 'px';
        curH.innerText = mgfH + 'px';
        curW.innerText = mgfW + 'px';
        curT.innerText = times + '倍';
    }
    curpic.onmousewheel = function(e){
        if(e.wheelDelta>0){
            if(mgf.offsetWidth*1.5 > curpic.offsetWidth){
                mgf.style.width = curpic.offsetWidth + 'px';
                return;
            }
            if(mgf.offsetHeight*1.5 > curpic.offsetHeight){
                mgf.style.height = curpic.offsetHeight + 'px';
                return;
            }
            mgf.style.width=mgf.offsetWidth*1.5 +'px';
            mgf.style.height=mgf.offsetHeight*1.5 +'px';
        }
        if(e.wheelDelta<0){
            mgf.style.width= parseInt(mgf.offsetWidth/1.5) +'px';
            mgf.style.height=parseInt(mgf.offsetHeight/1.5) +'px';
        }
        curH.innerText = mgf.offsetHeight + 'px';
        curW.innerText = mgf.offsetWidth + 'px';
        Move();
    }
    curpic.onmousemove = function(){
        Move();
    }
    function Move(e){
        boxEnlarge.style.width = mgf.offsetWidth*times + 'px';
        boxEnlarge.style.height = mgf.offsetHeight*times + 'px';
        e = e || event;
        var mgfx = e.clientX - curpic.offsetLeft - parent.offsetLeft - mgf.offsetWidth/2;
        var mgfy = e.clientY - curpic.offsetTop - parent.offsetTop - mgf.offsetHeight/2;
        if(mgfx<0){
            mgfx = 0;
        }
        if(mgfx >= curpic.offsetWidth-mgf.offsetWidth){
            mgfx = curpic.offsetWidth-mgf.offsetWidth;
        }
        if(mgfy<0){
            mgfy = 0;
        }
        if(mgfy >= curpic.offsetHeight-mgf.offsetHeight){
            mgfy = curpic.offsetHeight-mgf.offsetHeight;
        }
        mgf.style.left = mgfx + 'px';
        mgf.style.top = mgfy + 'px';
        var pic = boxEnlarge.children[0];
        pic.style.width = curpic.offsetWidth*times + 'px';
        pic.style.height = curpic.offsetHeight*times + 'px';
        pic.style.marginLeft = ((-1)*mgf.offsetLeft*times)+'px';
        pic.style.marginTop = ((-1)*mgf.offsetTop*times)+'px';
    }
}
</script>
</head>
<body>
    <div id="parent">
        <div id="setting">
            <span id="set">Setting</span> <span>寬:</span><input type="text" id="mgfW"><span>高:</span><input type="text" id="mgfH"><span>倍數(shù):</span><input type="text" id="times">
            <input type="button" value="確認" id="sure">
        </div>
        <div id="curPic">
            <div id="mgf"></div>
            <img src="./0.jpg" />
        </div>
        <p id="inF">當(dāng)前寬度：<span id ="curW"></span> 當(dāng)前高度：<span id="curH"></span> 當(dāng)前倍數(shù)：<span id="curT"></span></p>
        <div id="boxEnlarge">
            <img src="./0.jpg" />
        </div>
    </div>
</body>
</html>

如有錯誤，歡迎指正~

最后編輯于：2018.12.04 10:18:12

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末铜靶，一起剝皮案震驚了整個濱河市叔遂，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌旷坦，老刑警劉巖掏熬，帶你破解...
沈念sama閱讀 218,284評論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異秒梅，居然都是意外死亡旗芬，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,115評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門捆蜀，熙熙樓的掌柜王于貴愁眉苦臉地迎上來疮丛，“玉大人幔嫂，你說我怎么就攤上這事√鼙。” “怎么了履恩？”我有些...
開封第一講書人閱讀 164,614評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長呢蔫。經(jīng)常有香客問我切心，道長，這世上最難降的妖魔是什么片吊？我笑而不...
開封第一講書人閱讀 58,671評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任绽昏，我火速辦了婚禮，結(jié)果婚禮上俏脊，老公的妹妹穿的比我還像新娘全谤。我一直安慰自己，他們只是感情好爷贫，可當(dāng)我...
茶點故事閱讀 67,699評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布认然。她就那樣靜靜地躺著，像睡著了一般漫萄。火紅的嫁衣襯著肌膚如雪卷员。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,562評論 1贊 305
城市分裂傳說
那天卷胯，我揣著相機與錄音子刮，去河邊找鬼威酒。笑死窑睁，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的葵孤。我是一名探鬼主播担钮，決...
沈念sama閱讀 40,309評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼尤仍！你這毒婦竟也來了箫津？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,223評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤宰啦，失蹤者是張志新（化名）和其女友劉穎苏遥，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體赡模，經(jīng)...
沈念sama閱讀 45,668評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡田炭，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,859評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了漓柑。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片教硫。...
茶點故事閱讀 39,981評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡叨吮，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出瞬矩，到底是詐尸還是另有隱情茶鉴，我是刑警寧澤，帶...
沈念sama閱讀 35,705評論 5贊 347
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布景用，位于F島的核電站涵叮，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏伞插。R本人自食惡果不足惜围肥，卻給世界環(huán)境...
茶點故事閱讀 41,310評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望蜂怎。院中可真熱鬧穆刻，春花似錦、人聲如沸杠步。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,904評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽幽歼。三九已至朵锣，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間甸私，已是汗流浹背诚些。一陣腳步聲響...
開封第一講書人閱讀 33,023評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留皇型，地道東北人诬烹。一個月前我還...
沈念sama閱讀 48,146評論 3贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像弃鸦，于是被迫代替她去往敵國和親绞吁。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,933評論 2贊 355