精装豪华版放大镜

好久没整理知识点了，这周时间一直在写项目，忙成狗。。。终于回归了
只要你是个网民就应该见过某宝某东的放大镜效果，当然，不是网民你也看不到我这篇博客了，咳咳咳，写了几个js小栗子后呢，就稍微融合下目前所学的知识点啦~~~有点小鸡冻呢

布局 布局 布局

不管写什么效果第一步的布局依然必不可少，怎样的布局还决定你最后写效果的思路。放大镜效果说白了就是一个计算比例的过程，将小图的局部放大，我将它总结为：小图片上的可移动透明盒子 / 小盒子 近似等于大盒子 / 大盒子里的图片，具体看代码（放大镜比例：#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;
}

现在效果图如下：

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");
//鼠标划入小盒子，透明框显示大盒子显示
oLittle.onmouseover = function(){
    oPic.style.display = 'block';
    oBig.style.display = 'block';
}
//鼠标划出小盒子，透明框消失大盒子消失
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