图片局部放大效果结合的知识点主要是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. 2018年底，IOS面试题的复习之OC的反射机制

    明天要去面试一个公司,今天复习下IOS题目吧 1.说一下OC的反射机制 答:OC的反射机制类似于JAVA的反射机制,这种动态反射机制可以让OC语言更加灵活.这句话是对反射机制的初步认识,具体表现在哪里 ...

  3. testng.xml中groups标签使用

    XML配置如下: <?xml version="1.0" encoding="UTF-8"?> <suite name="suite ...

  4. aop（execution()表达式）

    execution(* com.tp.soft.service..*.*(..)) 整个表达式可以分为五个部分: 1.execution(): 表达式主体. 2.第一个*号:表示返回类型,*号表示所有 ...

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

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

  6. jupyter notebook——安装配置

    本地登陆 cmd输入下面的命令,会进入用户主目录 jupyter notebook 在浏览器打开时,提示输入token,复制命令行上的token还是不能进入,其实浏览器上有提示的,按照提示操作即可,输 ...

  7. Lab 10-2

    The file for this lab is Lab10-02.exe. Questions and Short Answers Does this program create any file ...

  8. rocketMQ No route info of this topic 错误

    最近在使用rocketmq 发送消息,出现了No route info of this topic 异常,但奇怪的是我的其它的服务都可以成功发送,唯有crs服务不能成功发送,在网上搜索的解决方式基本上 ...

  9. Matlab:正则Euler分裂

    函数文件1: function b=F(x0,h,u,tau) b(,)=x0()-u(); b(,)=x0()-u()+*h*1e8*cos(tau)*x0(); 函数文件2: function g ...

  10. Vue+Element+Select获取选中的对象

              案例演示:获取select当前选中的所有内容 <el-select v-model="value8" filterable placeholder=&qu ...