文档章节

js实现图片局部放大效果

o
 osc_z1hvg4cu
发布于 2018/04/24 21:44
字数 971
阅读 21
收藏 0

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

  

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

 1 <body>
 2     <div class="choose">
 3         <div class="content">
 4             <img src="images/small1.jpg" id = "small">
 5             <div class="shadow"></div>
 6         </div>
 7         <ul id = "listshow">
 8             <li class="selected">
 9                 <img src="images/small1.jpg" data-img = "images/big1.jpg" alt="">
10             </li>
11             <li>
12                 <img src="images/small2.jpg" data-img = "images/big2.jpg" alt="">
13             </li>
14             <li>
15                 <img src="images/small3.jpg" data-img = "images/big3.jpg" alt="">
16             </li>
17             <li>
18                 <img src="images/small4.jpg" data-img = "images/big4.jpg" alt="">
19             </li>
20         </ul>
21     </div>
22     <div class="larger">
23         <img src="images/big1.jpg" id = "big">
24     </div>
25 </body>

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

 1    <style>
 2         *{
 3             padding: 0;
 4             margin: 0;
 5             list-style: none;
 6         }
 7         .choose{
 8             width: 400px;
 9             height: 600px;
10             float: left;
11             margin:50px 0 0 50px;
12         }
13         .content{
14             width: 400px;
15             height: 400px;
16             position: relative;
17         }
18 
19         .content img {
20             width: 400px;
21             height: 400px;
22         }
23         #listshow{
24             width: 400px;
25             height: 100px;
26             margin-top: 20px;
27         }
28         #listshow li{
29             width: 98px;
30             height: 100px;
31             float: left;
32             border:1px solid #666;
33         }
34         #listshow li img{
35             width: 98px;
36             height: 100px;
37         }
38         #listshow .selected{
39             border-color: brown;
40         }
41         .larger{
42             width: 400px;
43             height: 400px;
44             position: absolute;
45             top: 50px;
46             left: 500px;
47             float: left;
48             overflow: hidden;
49             display: none;
50         }
51         #big{
52             width: 800px;
53             height: 800px;
54             position: absolute;
55             left: 0;
56             top: 0;
57         }
58         .shadow{
59             width: 200px;
60             height: 200px;
61             background-color: rgba(145,200,200,.4);
62             position: absolute;
63             left: 0;
64             top: 0;
65             z-index: 10;
66             display: none;
67         }
68     </style>

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

 1  for(var i = 0;i<showli.length;i++){
 2         var showitem = showli[i];
 3         showitem.onmouseover =showitem.onclick =  function(e){
 4             let evt = window.event||e;
 5             for(var j =0;j<showli.length;j++){
 6                 showli[j].className = "";
 7             }
 8             var showimg = this.getElementsByTagName("img")[0];
 9             var imgsrc = showimg.src;
10             small.src = imgsrc;
11             var bigsrc = showimg.getAttribute("data-img");
12             big.src = bigsrc;
13             this.className = "selected";
14         }
15     }

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

  

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

 1     content.onmousemove = function (e) {
 2         var evt = window.event||e;
 3 
 4         larger.style.display = "block";
 5         shadow.style.display = "block";
 6         var clientX = evt.clientX;
 7         var clientY = evt.clientY;
 8 
 9         var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
10         var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
11 
12         var X = clientX+scrollLeft-chooseMarginL-shadowW/2;
13         var Y = clientY+scrollTop-chooseMarginT-shadowH/2;
14 
15         if(X<=0){
16             X = 0;
17         }
18         if(X>=maxX){
19             X = maxX;
20         }
21         if(Y<=0){
22             Y = 0;
23         }
24         if(Y>=maxY){
25             Y = maxY;
26         }
27 //        防止遮罩层粘滞,跟随鼠标一起滑出大图位置
28         var bigX = X*bigW/contentW;
29         var bigY = Y*bigH/contentH;
30 //  bigX / bigW = X / contentW,主图和遮罩层之间存在两倍关系,放大图和原图之间也有两倍关系
31         shadow.style.left = X+"px";
32         shadow.style.top = Y+"px";
33 
34         big.style.left = -bigX+"px";
35         big.style.top = -bigY+"px";
36 
37     }

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

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

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

setTimeout还是setInterval? - setTimeout or setInterval?

问题: As far as I can tell, these two pieces of javascript behave the same way: 据我所知,这两个javascript的行为方式相同: Option A: 选项A: function myTimeoutFunction(){ ......

技术盛宴
22分钟前
5
0
在virtualenv中使用Python 3 - Using Python 3 in virtualenv

问题: Using virtualenv , I run my projects with the default version of Python (2.7). 使用virtualenv ,我使用默认版本的Python(2.7)运行项目。 On one project, I need to use Pyth......

富含淀粉
52分钟前
9
0
Python的__init__和self是做什么的? - What __init__ and self do on Python?

问题: I'm learning the Python programming language and I've came across something I don't fully understand. 我正在学习Python编程语言,遇到了一些我不太了解的东西。 In a method ......

javail
今天
15
0
OSChina 周五乱弹 —— 你大妈还是你大妈

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @watergood:是时候分享一波我的这张纯音乐歌单了,过去的五年多时间里,我陆陆续续地把听到的好听的纯音乐添加了进去,目前一共65首,相信总...

小小编辑
今天
25
0
ftp-ftps-sftp的关系

Ftp FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”。用于Internet上的控制文件的双向传输。同时,它也是一个应用程序(Application)。基于不同的操作...

独钓渔
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部