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.οnmοuseοver=function () {
 float.style.display='block';
 oright.style.display='block';
 }
 oleft.οnmοuseοut=function () {
 float.style.display='none';
 oright.style.display='none';
 }
//2.鼠标移动
 oleft.οnmοusemοve=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>


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

转载于:https://www.cnblogs.com/Arthur123/p/8993458.html