图片局部放大效果结合的知识点主要是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. Go-延时函数defer

    关于延时调用函数(Deferred Function Calls)      延时调用函数基本语法如下: defer func_name(param-list) {} 当一个函数前有关键字 defer ...

  2. Vue-admin工作整理（十四）：Vuex和双向绑定

    概述,普通的直接通过input修改值然后取是不符合vue的规格的,所有数据定义和传递必须通过actions或者mutation来做 思路:通过在mutation层对字段进行定义值,在store中通过v ...

  3. structure streaming笔记

    基于micro-batch, spark2.3之后, 支持continues processing 基于spark SQL 如同在静态table上运行标准批查询一样表现流计算, spark 通过在一个 ...

  4. 【BZOJ】 1041: [HAOI2008]圆上的整点

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1041 ${x^{2}+y^{2}=r^{2} }$ ${\Rightarrow y^{2} ...

  5. web优化及web安全攻防学习总结

    web优化 前端:(高性能网站建设进阶指南) 使用gzip压缩(节省服务器的 网络带宽) 减少http请求( 减少DNS请求所耗费的时间. 减少服务器压力. 减少http请求头) 使用cdn(用户可以 ...

  6. MySQL 存储过程循环

    MySQL  存储过程循环 MySQL循环语句(包括WHILE,REPEAT和LOOP)来根据条件反复运行代码块. MySQL提供循环语句,允许您根据条件重复执行一个SQL代码块. MySQL中有三个 ...

  7. 数据库-left join，right join，inner join，full join

    2019-04-18 22:36:26 sql中的连接查询有inner join(内连接).left join(左连接).right join(右连接).full join(全连接)四种方式,它们之间 ...

  8. D - Mayor's posters（线段树+离散化）

    题目: The citizens of Bytetown, AB, could not stand that the candidates in the mayoral election campai ...

  9. Linux进程管理的学习

    uptime 简洁显示服务器负载 uptime 显示内核版本 uname -r dstat命令 cpu.内存.io等查看工具 dstat dstat --top-cpu dstat --top-io ...

  10. Centos7安装Nginx+PHP+MySQL

    之前曾经在服务器上从头到尾搭过一次环境,但那时新手一枚,很多地方搞不定,是前辈帮忙解决的.这次独自一人在服务器上撘环境,感慨上次没有做好相关笔记,所以事后整理一下,下次再搭环境时可以轻车熟路. 一.准 ...