用js实现的图片的放大缩小切换效果

用原生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 }