好久沒整理知識點了，這周時間一直在寫項目，忙成狗。。。終于回歸了
只要你是個網(wǎng)民就應(yīng)該見過某寶某東的放大鏡效果，當(dāng)然，不是網(wǎng)民你也看不到我這篇博客了，咳咳咳，寫了幾個js小栗子后呢，就稍微融合下目前所學(xué)的知識點啦~~~有點小雞凍呢

布局 布局 布局

不管寫什么效果第一步的布局依然必不可少，怎樣的布局還決定你最后寫效果的思路。放大鏡效果說白了就是一個計算比例的過程，將小圖的局部放大，我將它總結(jié)為：小圖片上的可移動透明盒子 / 小盒子 近似等于大盒子 / 大盒子里的圖片，具體看代碼（放大鏡比例：#pic / #little = #big /# bigimg ）

<div id="box">
    <div id="little">   //小盒子width：360px，height：360px;
        <div id="pic"></div>   //小圖片上的可移動透明盒子width: 200px;height: 200px;
        <img id="small" src="lesson11/img/little.jpg" width="360" height="360"/>
    </div>
    <div id="big">  //大盒子width: 440px;height: 440px;
        <img id="bigimg" src="lesson11/img/big.jpg" width="800" height="800"/>
    </div>
</div>

#box{
    width: 810px;
    margin:100px auto;
}
#little{
    width: 360px;
    height: 360px;
    border:2px solid #ccc;
    float: left;
    position: relative;
}
#pic{
    width: 200px;
    height: 200px;
    background: #ccc;
    opacity: .5;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
img{
    display: block;
}
#big{
    width: 440px;
    height: 440px;
    float: right;
    border:2px solid #ccc;
    overflow: hidden;
    display: none;
    position: relative;
}
#bigimg{
    position: absolute;
    top: 0;
    left: 0;
}

現(xiàn)在效果圖如下：

Paste_Image.png

哈哈。是不是覺得美美的，不過效果還沒寫呢

js js js

var oBox = document.getElementById("box");
var oLittle = document.getElementById("little");
var oPic = document.getElementById("pic");
var oBig = document.getElementById("big");
var oSmall = document.getElementById("small");
var oBigimg = document.getElementById("bigimg");
//鼠標(biāo)劃入小盒子，透明框顯示大盒子顯示
oLittle.onmouseover = function(){
    oPic.style.display = 'block';
    oBig.style.display = 'block';
}
//鼠標(biāo)劃出小盒子，透明框消失大盒子消失
oLittle.onmouseout = function(){
    oPic.style.display = 'none';
    oBig.style.display = 'none';
}
    //透明框移動大圖移動
oPic.onmousemove = function( ev ){
    ev = ev || event ;
    var bl = oBox.offsetLeft;
    var bt = oBox.offsetTop;
    var pw = oPic.offsetWidth;
    var ph = oPic.offsetHeight;
    var x = ev.clientX - bl - pw / 2;
    var y = ev.clientY - bt - ph /2;
    var Px = oSmall.offsetWidth - oPic.offsetWidth;
    var Py = oSmall.offsetHeight - oPic.offsetHeight;
//透明框不能超出小盒子
    if( x < 0 ){
        x = 0;
    }else if( x > Px ){
        x = Px;
    };
    if( y < 0 ){
        y = 0 ;
    }else if( y > Py ){
        y = Py;
    };
    oPic.style.left = x + 'px';
    oPic.style.top = y + 'px';
    var prex = x / Px;
    var prey = y / Py;
    oBigimg.style.left = -prex*( oBigimg.offsetWidth - oBig.offsetWidth  ) + 'px';
    oBigimg.style.top = -prey*( oBigimg.offsetHeight - oBig.offsetHeight ) + 'px';
}

呼啦啦~~~精裝豪華版放大鏡效果圖來啦

Paste_Image.png