用js實現的圖片的放大縮小切換效果

本文轉載自查看原文 2018-03-12 10:50 2788 Javascript實現

用原生js實現的圖片放大縮小切換

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>圖片輪播放大縮小</title>
  6     <style>
  7         *{margin:0px; padding:0px;}
  8         /*用來放圖片的盒子要稍微大一些*/
  9         #box{
 10             position:relative;
 11             margin:50px auto;
 12             height:420px;
 13             width:760px;
 14             overflow:hidden;
 15             text-align:center;
 16         }
 17         ul{
 18             position:relative;
 19             list-style-type:none;
 20             width:560px;
 21             height:420px;
 22         }
 23         /*將所有的圖片隱藏起來，並且橫向排放*/
 24         ul li{
 25             position:absolute;
 26             top:120px;
 27             left:700px;
 28             height:0px;
 29             width:0px;
 30             float:left;
 31             background: #000;   /*黑色背景加透明，效果更好*/
 32         }
 33         /*這里要記得給img增加百分百的寬高的效果*/
 34         ul li img{
 35             width:100%;
 36             height:100%;
 37             opacity:0.5;
 38         }
 39         #btn div{
 40             width:30px;
 41             height:60px;
 42             line-height: 60px;
 43             position:absolute;
 44             top:180px;
 45             background:deepskyblue;
 46             opacity:0.4;
 47             z-index:11;
 48         }
 49         #btn2{
 50             left:730px;
 51         }
 52 
 53         /*位於正中間的圖片為p1，兩側的圖為p6和p2，進行移動時把移入正中的圖的屬性改為p1的屬性*/
 54         #p1{
 55             top:0px;
 56             width:560px;
 57             height:420px;
 58             left:100px;
 59             z-index:10;
 60         }
 61         #p1 img{
 62             opacity:1;
 63         }
 64         #p2{
 65             width:420px;
 66             height:315px;
 67             top:52px;
 68             left:340px;
 69             z-index:9;
 70         }
 71         #p3{
 72             width:560px;
 73             height:100px;
 74             top:120px;
 75             left:560px;
 76 
 77         }
 78         #p5{
 79             width:560px;
 80             height:100px;
 81             top:120px;
 82             left:-120px;
 83             z-index:8;
 84         }
 85         #p6{
 86             width:420px;
 87             height:315px;
 88             top:52px;
 89             left:0px;
 90             z-index:9;
 91         }
 92 
 93     </style>
 94 </head>
 95 <body>
 96 <div id="box">
 97     <ul>
 98         <li id="p1"><img src="img/1.jpg" alt=""></li>
 99         <li id="p2"><img src="img/2.jpg" alt=""></li>
100         <li id="p3"><img src="img/3.jpg" alt=""></li>
101         <li id="p4"><img src="img/4.jpg" alt=""></li>
102         <li id="p5"><img src="img/5.jpg" alt=""></li>
103         <li id="p6"><img src="img/6.jpg" alt=""></li>
104     </ul>
105     <div id="btn">
106         <div id="btn1"><</div>
107         <div id="btn2">></div>
108     </div>
109 
110     <script src="js/animate.js"></script>
111     <script src="js/myJs.js"></script>
112 </div>
113 
114 </body>
115 </html>

以下分別為兩個引入的js代碼

 1 //回調函數，重新調用自身，但是此時注意，第四個參數不可以直接調用animate，因為animate函數中調用fn時，並沒有帶上任何參數
 2 
 3 function animate(dom,target,attr,fn){
 4     clearInterval(dom.timer);
 5     dom.timer = setInterval(function(){
 6         var domAttr = parseFloat(getAttr(dom,attr));
 7         var speed = (target - domAttr)/10;
 8         console.log(speed);
 9         if(attr == "opacity"){
10             domAttr *= 100;
11         }
12 
13         if(target>domAttr){
14             speed = Math.ceil(speed);
15         }else{
16             speed = Math.floor(speed);
17         }
18         if(target == domAttr){
19             clearInterval(dom.timer);
20             //進行判斷，當沒有第四個參數，即不需要回調函數時，則不執行
21             if(fn){
22                 //當重復調用時，this的指向會改變，因此要在dom的作用域下調用fn函數才不會出錯
23                 fn.call(dom);
24             }
25         }else{
26             if(attr=="opacity"){
27                 dom.style[attr] = (domAttr + speed)/100;
28                 dom.style.filter = "alpha(opacity:"+(domAttr + speed)+");"
29             }else{
30                 dom.style[attr] = domAttr + speed +"px";
31             }
32         }
33     },30);
34 }
35 
36 function getAttr(dom,attr){
37     if(dom.currentStyle){
38         return dom.currentStyle[attr];
39     }else{
40         return getComputedStyle(dom,null)[attr];
41     }
42 }

 1 var btn2 = document.getElementById("btn2"),
 2     btn = document.getElementById("btn"),
 3     p1 = document.getElementById("p1"),
 4     p2 = document.getElementById("p2"),
 5     p3 = document.getElementById("p3"),
 6     p6 = document.getElementById("p6"),
 7     lis = document.getElementsByTagName("li"),
 8     oDiv = btn.getElementsByTagName("div");
 9 
10 var date = new Date();
11 
12 
13 /*
14 btn2.onclick = function(){
15     p2.style.zIndex = 10;
16     animate(p2,{
17         "left":100,
18         "top":0,
19         "width":560,
20         "height":420,
21         "zIndex":10
22 
23     })
24     animate(p1,{
25         "left":0,
26         "top":52,
27         "width":420,
28         "height":315,
29         "zIndex":9
30     })
31 }
32 */
33 
34 for(var i=0; i<oDiv.length; i++){
35     oDiv[i].index = i;
36     oDiv[i].onclick = function(){
37         //每隔一秒以上才可以觸發一次，每次觸發都要重置一下date的時間
38         if(new Date()-date >1000){
39             fn(this.index);
40             date = new Date();
41         }
42     }
43 }
44 
45 function fn(idx){
46     //把各項數據放入數組
47     var arrW=[],arrH=[],arrL=[],arrT=[],arrZ=[],arrO=[];
48     for(var i=0; i<lis.length; i++){
49         arrW[i] = parseInt(getAttr(lis[i],"width"));
50         arrH[i] = parseInt(getAttr(lis[i],"height"));
51         arrL[i] = parseInt(getAttr(lis[i],"left"));
52         arrT[i] = parseInt(getAttr(lis[i],"top"));
53         arrZ[i] = parseInt(getAttr(lis[i],"zIndex"));
54         arrO[i] = parseFloat(getAttr(lis[i].firstElementChild,"opacity"));
55     }
56 
57     for(var i=0; i<lis.length; i++){
58         //每次按下按鈕，則根據按的按鈕依次給每個圖片新的屬性
59         if(idx == 1){
60             //right button
61             var index = i-1;
62             if(index<0){
63                 index = 5;
64             }
65 
66         }else{
67             //left button
68             var index = i+1;
69             if(index>5){
70                 index = 0;
71             }
72         }
73 
74         lis[i].style.zIndex = arrZ[index];
75         animate(lis[i].firstElementChild,{
76             "opacity":arrO[index]*100
77         })
78 
79         animate(lis[i],{
80             "width":arrW[index],
81             "height":arrH[index],
82             "left":arrL[index],
83             "top":arrT[index]
84         })
85     }
86 
87 
88 }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js實現圖片切換效果 js 實現圖片的放大和縮小 Vue.js —— 圖片放大縮小的實現用JS實現，圖片放大和縮小原創JS圖片放大效果(二) — 多圖點擊切換，鼠標移上放大 JS圖片切換效果 PhotoView實現圖片隨手勢的放大縮小的效果 js實現多張圖片同時放大縮小相對位置不變 CSS增加圖片放大縮小效果 js實現圖片點擊彈出放大效果