• js实现放大镜效果


     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>无标题文档</title>
     6 <style type="text/css">
     7 #pic{
     8     float:left;    
     9     }
    10 #photo{
    11     float:left;
    12     height:100px;
    13     width:100px;
    14     margin-left:50px;
    15     background-repeat:no-repeat;
    16     background-image:url(1.jpg);
    17     }
    18 #mask{
    19     width:50px;
    20     height:50px;
    21     background-color:#3FC;
    22     position:absolute;
    23     border-style:dashed;
    24     border-color:#00F;
    25     opacity:0.5;
    26     }
    27 </style>
    28 </head>
    29 
    30 <body>
    31 <div id="pic">
    32 <img src="2.jpg" id="picture"  style="cursor:move"/>
    33 </div>
    34 <div id="photo"></div>
    35 <div id="mask"></div>>
    36 </body>
    37 <script type="text/javascript">
    38 document.body.addEventListener("mousemove",function(e){
    39     var pho=document.getElementById("photo");
    40     var pic=document.getElementById("pic");
    41     {
    42     var masker=document.getElementById("mask");
    43     
    44     masker.style.left=e.clientX-25+"px";
    45     masker.style.top=e.clientY-25+"px";
    46     pho.style.backgroundPosition=((50-e.clientX*2)+"px "+(50-e.clientY*2)+"px");
    47     }
    48 },false);
    49 </script>
    50 </html>

    将小图名称改为2.jpg,大图名称改为1.jpg

    以上即为demo部分,注意该demo请在非IE浏览器中运行,下面详细讲解一下设计思路

    我主要采用一张大图跟一张小图,我这里小图的长宽都是大图的一半,当鼠标在小图上移动时,可以预先设定出一个区域,我的demo是以鼠标为中心,划分出一个50*50的预选区,所以在放大区就应该是100*100的区域,当鼠标移动到图片上时出现一个蒙版即预选区,同时在放大区生成一张大图。

    代码部分:

    1.html部分

    1 <body>
    2 <div id="pic">
    3 <img src="2.jpg" id="picture"  style="cursor:move"/>
    4 </div>
    5 <div id="photo"></div>
    6 <div id="mask"></div>>
    7 </body>

    三个div没什么好说的,一个图片区域pic,一个放大区photo,一个蒙版区mask

    2.css部分

     1 <style type="text/css">
     2 #pic{
     3     float:left;    
     4     
     5     }
     6 
     7 #photo{
     8     float:left;
     9     height:100px;
    10     width:100px;
    11     margin-left:50px;
    12     background-repeat:no-repeat;
    13     background-image:url(1.jpg);
    14     }
    15 #mask{
    16     width:50px;
    17     height:50px;
    18     background-color:#3FC;
    19     position:absolute;
    20     border-style:dashed;
    21     border-color:#00F;
    22     opacity:0.5;
    23     }
    24 </style>

    需要说一下的是,mask蒙版区域大小为50*50,所以放大区相应的放大一倍即为100*100,opcity为蒙版透明度

    3.js部分

     1 <script type="text/javascript">
     2 document.body.addEventListener("mousemove",function(e){
     3     var pho=document.getElementById("photo");
     4     var pic=document.getElementById("pic");
     5     {
     6     var masker=document.getElementById("mask");
     7     
     8     masker.style.left=e.clientX-25+"px";
     9     masker.style.top=e.clientY-25+"px";
    10     pho.style.backgroundPosition=((50-e.clientX*2)+"px "+(50-e.clientY*2)+"px");
    11     }
    12 },false);
    13 </script>

    捕捉鼠标移动事件,e.clientX为当前鼠标坐标,以鼠标为中心做一个50*50的蒙版,然后在放大区以两倍的放大倍数显示出来。

  • 相关阅读:
    python 获取项目的根路径
    信息系统项目管理师-1.4软件工程
    信息系统项目管理师
    信息系统项目管理师-导学
    信息系统项目管理师-考试安排
    读取text行列
    pipeline基本框架思维
    Linux压缩隐藏文件
    python+appium环境搭建
    leetcode for mysql
  • 原文地址:https://www.cnblogs.com/leavenup/p/2657055.html
Copyright © 2020-2023  润新知