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