javascript案例之放大镜效果

效果图

如何实现该效果呢?? 我们先来进行分析

实现思路
 1.鼠标移入移出事件
       1>移入:悬浮块和大图显示
       2>移出:悬浮块和大图隐藏
 2.鼠标移动(悬浮块随着鼠标移动)
 1>获取鼠标当前的位置(e.clietX)
 2>获取鼠标最大可以移动的距离left( left= 鼠标位置 - 悬浮块宽度/2 )这里悬浮块宽度/2是为了保持在正中间

 3>判断是否碰壁(<0，则=0；>max,则=max) 这里配合上图指的是 悬浮块在div(id:left)的可视区移动距离
 4>设置悬浮块的位置 ( this.style.left = left+'px') 这里this指向悬浮块
 5>求比例 (分两步 => 1.求左右两边的宽高比例 2.求左右移动的距离比例)
 (公式: 小图的宽/悬浮框的宽=大图的宽/right的宽)
 >求出宽度比例 =小图宽度/悬浮块宽度
 >求出高度比例 =小图高度/悬浮块高度
 设置大图的宽高
 style.width=宽度比例*right的宽
 style.height=高度比例*right的高
 6>左边移动 =右边移动的距离 (公式: 左边悬浮框实际走的距离/最大能够走的距离=右边实际走得距离？/右边最大能够走的距离 )
 >左边的比例=鼠标最大可以移动的距离left/最大可视区(鼠标最大可以移动的距离left-悬浮块的宽度)
 7>右边移动 (右边能够走的距离 = (大图的宽高-div的宽高)*左边移动的比例+"px") 注释：左边向下，右边得向上 ,故要取反

下面是代码：
css部分

<style>
    body{
        margin:0;
 padding:0;
 }
 #left{
 width:400px;
 height:300px;
 position:relative;
 }
 #left img{
 width:400px;
 height:255px;
 }
 #float{
 width:160px;
 height:120px;
 background:rgba(0,0,0,0.4);
 position:absolute;
 left:0;
 top:0;
 display: none;
 z-index: 3;
 }
 #right{
 width:400px;
 height:300px;
 position:absolute;
 left:400px;
 top:0;
 overflow:hidden;
 border:1px solid #000;
 z-index: 3;
 display: none;
 }
 #right img{
 position:absolute;
 }
</style>

内容及js部分

<div id="left">
 <div id="float"></div>
 <img src="macbook-small.jpg" id="smallImg"/>
</div>
<div id="right">
 <img src="macbook-big.jpg" id="bigImg"/>
</div>

<script>

//获取元素
    var oleft=document.getElementById('left');
 var oright=document.getElementById('right');
 var float=document.getElementById('float');
 var smallImg=document.getElementById('smallImg');
 var bigImg=document.getElementById('bigImg');
 //1.鼠标移入移出事件
 oleft.onmouseover=function () {
 float.style.display='block';
 oright.style.display='block';
 }
 oleft.onmouseout=function () {
 float.style.display='none';
 oright.style.display='none';
 }
 //2.鼠标移动
 oleft.onmousemove=function (ev) {
 //1>获取鼠标当前位置
 var e= ev || event;
 //2>获取鼠标最大可以移动的距离left
 var left=e.clientX-float.offsetWidth/2;
 var top=e.clientY-float.offsetHeight/2;
 //3>判断是否碰壁
 if(left<0){left=0}
 if(top<0){top=0}
 if(left>oleft.offsetWidth-float.offsetWidth){left=oleft.offsetWidth-float.offsetWidth}
 if (top>oleft.offsetHeight-float.offsetHeight) {top=oleft.offsetHeight-float.offsetHeight}
 //4>设置悬浮块的位置
 float.style.left=left+'px';
 float.style.top=top+'px';
 // 5>求比例 (分两步 => 1.求左右两边的宽高比例 2.求左右移动的距离比例)
 var scaleW=smallImg.offsetWidth/float.offsetWidth;
 var scaleH=smallImg.offsetHeight/float.offsetHeight;
 bigImg.style.width=scaleW*oright.offsetWidth+'px';
 bigImg.style.height=scaleH*oright.offsetHeight+'px';

 //(右边能够走的距离 = (大图的宽高-div的宽高)*左边移动的比例) 注释：左边向下，右边得向上 ,故要取反
 var scaleL=left/(oleft.offsetWidth-float.offsetWidth);
 var scaleT=top/(oleft.offsetHeight-float.offsetHeight);
 bigImg.style.left=-scaleL*(bigImg.offsetWidth-oright.offsetWidth)+"px";
 bigImg.style.top=-scaleT*(bigImg.offsetHeight-oright.offsetHeight)+"px";
 }
</script>


总结一下：这部分主要是要考虑比例关系，所以要写之前最好先画图。想清楚两者之前的关系，计算得出比例。本博主下次会退出一个淘宝的放大镜效果图，其属性跟这个实现方式差不多，所以如有需要，可以参考一下.

javascript案例之放大镜效果

猜你喜欢