原生js放大镜效果

效果:

1、  鼠标放上去会有半透明遮罩、右边会有大图片局部图

2、  鼠标移动时右边的大图片也会局部移动

放大镜的关键原理:

鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置;

放大镜的移动方向和大图片的移动方向:横向和纵向都是相反,才可以保证同步;

页面元素:

技术点:事件捕获,定位

难点:计算

需要元素:小图片和大图片,存放小图片和大图片的容器,有一个放大镜;

涉及到的技术点:

(1)       鼠标事件的捕获:onmouseover(进入)、onmouseout(移除)、onmousemove(移动)

(2)       offsetLeft、offsetTop、offsetWidth、offsetHeight、event.clientX、event.clientY

  • offsetLeft子元素相对于父元素的左位移
  • offsetWidth,offsetHeight一个元素的宽度和高度,宽度和高度是不包括滚动条的。

event.clientX、event.clientY鼠标的X轴和Y轴,相对于整个页面的坐标,而不是子元素

  • offsetLeft和style.left对比:

(1)、style.left返回的是字符串,如30px、offsetLeft返回的是数值30;

(2)、style.left是可读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left;

(3)、style.left的值需要事先定义,否则取到的值为空。

style.left只针对在HTML中写的值有效,样式表中无法定义style.left;

制作放大镜所需要的计算

》重点:如何让小图片上的放大镜和大图片同步移动

关键:小图片的比例和大图片的比例是一样的,放大镜比例和右侧大的容器比例是一样的;他们之间的比例是相同的

移动时的比例计算:

放大镜核心计算公式:

编码步骤:

1.  新建html文件;(小图片和大图片的容器盛放)

<div id="demo">
    <div id="small-box">
        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="imgs/macbook-small.jpg"/>
    </div>
    <div id="big-box">
        <img src="imgs/macbook-big.jpg"/>
    </div>
</div>

2.  设置样式(放大镜漂浮在小容器里面,并且具有一定的透明度,大图片隐藏)


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<style>

    * {

        margin: 0;

        padding: 0

    }

    #demo {

        display: block;

        width: 400px;

        height: 255px;

        margin: 50px;

        position: relative;

        border: 1px solid #ccc;

    }

    #small-box {

        position: relative;

        z-index: 1;

    }

#float-box {

    display: none;

    width: 160px;

    height: 120px;

    position: absolute;

    background: #ffffcc;

    border: 1px solid #ccc;

    filter: alpha(opacity=50);

    opacity: 0.5;

}

#mark {/*应该是把图片放在这个上面,它的透明度为0,是个block*/

    position: absolute;

    display: block;

    width: 400px;

    height: 255px;

    

    filter: alpha(opacity=0);/*过滤器,目前只有少数浏览器支持*/

    opacity: 0;

    z-index: 10;

}

#big-box {

        display: none;

        position: absolute;

        top: 0;

        left: 460px;

        width: 400px;

        height: 300px;

        overflow: hidden;

        border: 1px solid #ccc;

        z-index: 1;;

    }

    #big-box img {

        position: absolute;

        z-index: 5

    }

</style>

3.  js逻辑代码

(1)       先捕获元素

  

var objDemo=document.getElementById("demo");
var objSmallBox=document.getElementById("small-box");
var objMarkBox=document.getElementById("mark");
var objFloatBox=document.getElementById("float-box");
var objBigBox=document.getElementById("big-box");
var objBigBoxImg=objBigBox.getElementsByTagName("img")[0];

 (2)给小盒子添加事件,移入和移出
  移入:浮动的box和和bigBox显示

objSmallBox.onmouseover=function(){
    objFloatBox.style.display="block";
    objBigBox.style.display="block";
}
//移除:浮动的box和bigBox隐藏
objSmallBox.onmouseout=function(){
    objFloatBox.style.display="none";
    objBigBox.style.display="none";
}

(3)添加事件

(2)    objSmallBox.onmousemove=function(ev){
    var _event=ev;
    //1.第一件事,跟随鼠标的位置来计算放大镜的位置
    //计算值:
    var left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;
    var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2;
    //把值赋值给放大镜
    objFloatBox.style.left=left+"px";
    objFloatBox.style.top=top+"px";

}


(4)计算比例

//3计算比例
var percentX=left/(objMarkBox.offsetWidth-objFloatBox.offsetWidth);
var percentY=top/(objMarkBox.offsetHeight-objFloatBox.offsetHeight);

(5)


1

2

3

//4利用这个比例计算距离后赋值给右侧的图片

objBigBoxImg.style.left=-percentX*(objBigBoxImg.offsetWidth-objBigBox.offsetWidth)+"px";

objBigBoxImg.style.top=-percentY*(objBigBoxImg.offsetHeight-objBigBox.offsetHeight)+"px";)

(6)


1

2

3

4

5

6

7

//5.优化,在前面加判断,不让其溢出,加判断

if(left<0) left=0;

if(top<0) top=0;

if(left>objSmallBox.offsetWidth-objFloatBox.offsetWidth)

        left=objSmallBox.offsetWidth-objFloatBox.offsetWidth;

if(top>objSmallBox.offsetHeight-objFloatBox.offsetHeight)

        top=objSmallBox.offsetHeight-objFloatBox.offsetHeight;

    完整源代码:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        #demo {
            display: block;
            width: 400px;
            height: 255px;
            margin: 50px;
            position: relative;
            border: 1px solid #ccc;
        }
        #small-box {
            position: relative;
            z-index: 1;
        }
        #float-box {
            display: none;
            width: 160px;
            height: 120px;
            position: absolute;
            background: #ffffcc;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }
        #mark {/*应该是把图片放在这个上面,它的透明度为0,是个block*/
            position: absolute;
            display: block;
            width: 400px;
            height: 255px;
            background-color: #fff;
            filter: alpha(opacity=0);/*过滤器,目前只有少数浏览器支持*/
            opacity: 0;
            z-index: 10;
        }
        #big-box {
            display: none;
            position: absolute;
            top: 0;
            left: 460px;
            width: 400px;
            height: 300px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 1;;
        }

        #big-box img {
            position: absolute;
            z-index: 5
        }
    </style>
    <script>

        //页面加载完毕后执行
        window.onload = function () {
            //找六个个元素:demo,smallBox,foatBox,mark,bigfloatBox,imgs,
            var objDemo=document.getElementById("demo");
            var objSmallBox=document.getElementById("small-box");
            var objMarkBox=document.getElementById("mark");
            var objFloatBox=document.getElementById("float-box");
            var objBigBox=document.getElementById("big-box");
            var objBigBoxImg=objBigBox.getElementsByTagName("img")[0];

            //给小盒子添加事件,移入和移出
            //移入:浮动的box和和bigBox显示
            objSmallBox.onmouseover=function(){
                objFloatBox.style.display="block";
                objBigBox.style.display="block";
            }
            //移除:浮动的box和bigBox隐藏
            objSmallBox.onmouseout=function(){
                objFloatBox.style.display="none";
                objBigBox.style.display="none";
            }

            //给小盒子添加鼠标移动事件
            objMarkBox.onmousemove=function(ev){
                var _event=ev||window.event;//做兼容性,兼容IE
                //1计算值:
                var left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;
                var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2;

                //5.优化,在前面加判断,不让其溢出,加判断
                if(left<0) left=0;
                if(top<0) top=0;
                if(left>objSmallBox.offsetWidth-objFloatBox.offsetWidth)
                        left=objSmallBox.offsetWidth-objFloatBox.offsetWidth;
                if(top>objSmallBox.offsetHeight-objFloatBox.offsetHeight)
                        top=objSmallBox.offsetHeight-objFloatBox.offsetHeight;

                //2把值赋值给放大镜
                objFloatBox.style.left=left+"px";
                objFloatBox.style.top=top+"px";

                //3计算比例
                var percentX=left/(objMarkBox.offsetWidth-objFloatBox.offsetWidth);
                var percentY=top/(objMarkBox.offsetHeight-objFloatBox.offsetHeight);

                //4利用这个比例计算距离后赋值给右侧的图片
                objBigBoxImg.style.left=-percentX*(objBigBoxImg.offsetWidth-objBigBox.offsetWidth)+"px";
                objBigBoxImg.style.top=-percentY*(objBigBoxImg.offsetHeight-objBigBox.offsetHeight)+"px";
            }

        }
    </script>
</head>
<body>
<div id="demo">
    <div id="small-box">
        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="imgs/macbook-small.jpg"/>
    </div>
    <div id="big-box">
        <img src="imgs/macbook-big.jpg"/>
    </div>
</div>
</body>
</html>

原文地址:https://www.cnblogs.com/xiewangfei123/p/12065711.html

时间: 2024-10-11 01:56:13

原生js放大镜效果的相关文章

原生js动画效果(源码解析)

在做页面中,多数情况下都会遇到页面上做动画效果,之前一直都是用jquery,一直没有试过用原生的js来做,今天正好看到一篇js原生动画的效果,特记录在此, 原文地址:http://www.it165.net/pro/html/201410/23513.html 1.匀速动画效果 说明:匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的 01.<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www

最全js 放大镜效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js放大镜效果

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="智能社 - zhinengshe.com"> <meta name="copyright" content="智能社 - zhinengshe.com"> <title

javascript -- (js放大镜效果)

<style> * { margin: 0; padding: 0; } </style> <script type = "text/javascript" > var body = document.getElementsByTagName('body')[0]; var box1 = document.createElement('div'); var box2 = document.createElement('div'); var mask

原生js实现的放大镜效果

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style&

原生js实现放大镜效果

放大镜效果主要涉及3个鼠标事件: 1.onmouseover,鼠标移入浮动小方块和显示放大的区域显示: 2.onmousemove,鼠标移动,小方块和放大区域一起移动: 3.onmouseout,鼠标移除小方块和放大区域消失. 其实放大镜效果最主要的是小方块与放大区域的比例及位置: <div id="small_box"> <div class="small_Pic"> <div id="float_box">

原生JS实现简单的淘宝放大镜效果

大家经常去淘宝买东西会发现,淘宝上的放大镜效果挺有意思的,这里简单的实现了下,代码中的图片地址 亲们可以自行更换; <!DOCTYPE html> <html> <head> <title>放大镜</title> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } body{ hei

利用原生JS实现网页1920banner图滚动效果

内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920banner图的切换效果,并针对低分辨率电脑设备进行了适配,实现了JS代码与HTML代码的完全分离,符合w3c的标准使用规范,希望能给各位开发者朋友以帮助和参考.如发现有缺陷和不足,欢迎大家予以指正,如有更好的意见或解决方法,可在评论区交流互动.一下为代码内容: <!DOCTYPE html> <

图片切换特效(1):原生JS图片切换效果

转自:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">