图片局部放大效果结合的知识点主要是DOM的操作，以及事件的应用，所以首先要对DOM的操作有一定了解，其次能对事件的应用有一定的累积。

　　

　　如上图，可以看到，这是放大镜的基本效果，主要分成左右两个部分。左边分成一张大图，和一个导航栏，在右边则是一个放大镜放大后的图片。因此，我在画页面的时候，大体的HTMl结构如下：

 <body>

     <div class="choose">

         <div class="content">

             <img src="data:images/small1.jpg" id = "small">

             <div class="shadow"></div>

         </div>

         <ul id = "listshow">

             <li class="selected">

                 <img src="data:images/small1.jpg" data-img = "images/big1.jpg" alt="">

             </li>

             <li>

                 <img src="data:images/small2.jpg" data-img = "images/big2.jpg" alt="">

             </li>

             <li>

                 <img src="data:images/small3.jpg" data-img = "images/big3.jpg" alt="">

             </li>

             <li>

                 <img src="data:images/small4.jpg" data-img = "images/big4.jpg" alt="">

             </li>

         </ul>

     </div>

     <div class="larger">

         <img src="data:images/big1.jpg" id = "big">

     </div>

 </body>

　在这个时候，将静态页面按常规方式进行布局，给予css样式如下：

    <style>

         *{

             padding:;

             margin:;

             list-style: none;

         }

         .choose{

             width: 400px;

             height: 600px;

             float: left;

             margin:50px 0 0 50px;

         }

         .content{

             width: 400px;

             height: 400px;

             position: relative;

         }

         .content img {

             width: 400px;

             height: 400px;

         }

         #listshow{

             width: 400px;

             height: 100px;

             margin-top: 20px;

         }

         #listshow li{

             width: 98px;

             height: 100px;

             float: left;

             border:1px solid #666;

         }

         #listshow li img{

             width: 98px;

             height: 100px;

         }

         #listshow .selected{

             border-color: brown;

         }

         .larger{

             width: 400px;

             height: 400px;

             position: absolute;

             top: 50px;

             left: 500px;

             float: left;

             overflow: hidden;

             display: none;

         }

         #big{

             width: 800px;

             height: 800px;

             position: absolute;

             left:;

             top:;

         }

         .shadow{

             width: 200px;

             height: 200px;

             background-color: rgba(145,200,200,.4);

             position: absolute;

             left:;

             top:;

             z-index:;

             display: none;

         }

     </style>

　　那么这个时候，开始写js样式，分布书写的话，第一步要考虑到左边的选项卡。选项卡我采用直接使用src赋值的方法，将滑过的图片对应的src给大图，代码呈现：

  for(var i = 0;i<showli.length;i++){

         var showitem = showli[i];

         showitem.onmouseover =showitem.onclick =  function(e){

             let evt = window.event||e;

             for(var j =0;j<showli.length;j++){

                 showli[j].className = "";

             }

             var showimg = this.getElementsByTagName("img")[0];

             var imgsrc = showimg.src;

             small.src = imgsrc;

             var bigsrc = showimg.getAttribute("data-img");

             big.src = bigsrc;

             this.className = "selected";

         }

     }

　　这样就可以成功实现选项卡功能，比较简单粗暴的一种方式，当然，大家使用selected结合点击下标和大图下标相等的这一点，也一样可以做出来。

　　

　　接下来要考虑到，鼠标在大图上移动时，遮罩层的移动效果。值得一提的时候，这个地方其实存在一个视觉上的误区，看起来是在滑动遮罩层，其实是鼠标的滑动，而遮罩层通过获取鼠标的clientX，clientY来确定自己的位置，遮罩层位置获取代码：

     content.onmousemove = function (e) {

         var evt = window.event||e;

         larger.style.display = "block";

         shadow.style.display = "block";

         var clientX = evt.clientX;

         var clientY = evt.clientY;

         var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;

         var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

         var X = clientX+scrollLeft-chooseMarginL-shadowW/2;

         var Y = clientY+scrollTop-chooseMarginT-shadowH/2;

         if(X<=0){

             X = 0;

         }

         if(X>=maxX){

             X = maxX;

         }

         if(Y<=0){

             Y = 0;

         }

         if(Y>=maxY){

             Y = maxY;

         }

 //        防止遮罩层粘滞，跟随鼠标一起滑出大图位置

         var bigX = X*bigW/contentW;

         var bigY = Y*bigH/contentH;

 //  bigX / bigW = X / contentW,主图和遮罩层之间存在两倍关系，放大图和原图之间也有两倍关系

         shadow.style.left = X+"px";

         shadow.style.top = Y+"px";

         big.style.left = -bigX+"px";

         big.style.top = -bigY+"px";

     }

　　　　在这里，计算较多，尤其要注意遮罩层阴影，主图以及放大图之间的倍数关系。

　　　　到这里，基本功能就实现了，这里面涉及的计算可以适当配图理解，尤其注意点击位置的获取。

js实现图片局部放大效果的更多相关文章

  1. JS实现图片''推拉门''效果

    JS实现图片''推拉门''效果   ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通 ...

  2. 3月题外：关于JS实现图片缩略图效果的一些小问题

    由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...

  3. JS中图片飞飞效果

    当鼠标在界面上移动的时候,后面有一连串的图片跟随者一起飘动,效果如下: 实现的基本思想:准备五个img标签,为了方便控制都放在一个div里面,设置div的定位方式为 fixed,设置成这中定位方式主要 ...

  4. 3月题外：关于JS实现图片缩略图效果的一个小问题

    由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...

  5. js实现图片幻灯片效果

    其效果是点击图片切换到下一张图片 首先准备五张图片 <ul class="imge"> <li><img src="images/1.jpg ...

  6. 使用纯生js实现图片轮换

    效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  7. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  9. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

随机推荐

  1. IIS简单的反向代理设置

    下载IIS扩展 1.URL Rewrite 地址: https://www.iis.net/downloads/microsoft/url-rewrite 2.Application Request ...

  2. 剑指offer 08：跳台阶

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). public class Solution { public int ...

  3. npm配置国内镜像资源+淘宝镜像

    将npm的注册表源设置为国内的镜像 1.国内用户,建议将npm的注册表源设置为国内的镜像,可以大幅提升安装速度 2.国内优秀npm镜像推荐及使用:http://riny.net/2014/cnpm/ ...

  4. 1047 Integer Inquiry

    String 大数加法模板 #include<stdio.h> #include<string> #include<iostream> using namespac ...

  5. OpenGL.Qt532.cube

    1.官方的例子(安装好代源码的Qt532就有该例子) E:\Project_Qt532\Official_Examples\opengl\cube E:\Project_Qt532\Official_ ...

  6. PyQt5——基本控件

    PyQt5基本控件使用方法详见:https://blog.csdn.net/jia666666/article/list/5?t=1& PyQt5基本控件汇总: 1.QMainWindow 2 ...

  7. fiddler抓不到chrome浏览器的请求

    今天遇到一个非常尴尬的问题,接口在某种情况下会报错,此时前端会展示NAN之类的东西,由于复现不了,接口现在一直不报 错了,所以就让前端做了个友好提示, 当接口报错时,给个提示“请稍后重试” ,我要测试 ...

  8. WPF界面假死

    首先要检查那些滥用 Timer.Dispacher Timer 或者滥用什么“线程+死循环+阻塞”轮询的代码. 这种是编程大忌,有些人不会设计事件驱动程序,而是滥用轮询. 若是:触发事件后的假死,搜W ...

  9. jQueryEasyUI应用 – datagrid之CRUD应用

    本文 jQueryEasyUI + SpringBoot + Mybatis整合Datagrid的CRUD应用 一.前言准备 1.我们将使用下面的插件: datagrid:向用户展示列表数据. dia ...

  10. docker 中安装 rabbitMQ

    安装rabbitMQ的命令 docker run -d --hostname my-rabbit --name rabbit -e RABBITMQ_DEFAULT_USER=admin -e RAB ...