js实现图片局部放大效果
程序员文章站
2022-05-13 21:32:59
图片局部放大效果结合的知识点主要是DOM的操作，以及事件的应用，所以首先要对DOM的操作有一定了解，其次能对事件的应用有一定的累积。 如上图，可以看到，这是放大镜的基本效果，主要分成左右两个部分。左边分成一张大图，和一个导航栏，在右边则是一个放大镜放大后的图片。因此，我在画页面的时候，大体的HTMl ......
图片局部放大效果结合的知识点主要是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 }
在这里，计算较多，尤其要注意遮罩层阴影，主图以及放大图之间的倍数关系。
到这里，基本功能就实现了，这里面涉及的计算可以适当配图理解，尤其注意点击位置的获取。
上一篇： 学习php设计模式 php实现合成模式(composite)
下一篇： PHP实现搜索相似图片