前端全棧大佬是如何使用javaScript實現一個焦點圖
阿新 • • 發佈：2020-12-22
效果圖：
程式碼如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>焦點圖</title> <style> ul,li{ list-style: none; } #outer{ width: 400px; height: 300px; position: relative; margin: 50px auto; overflow: hidden; } #inner{ width: 2000px; height: 300px; position: absolute; left:0; overflow: auto; } #inner div{ width: 400px; height: 300px; float: left; } #ulHead{ position: absolute; top: 250px; right: 20px; } #ulHead li{ float: left; width: 20px; height: 20px; line-height: 20px; text-align: center; background: orange; border: 1px solid darkgreen; margin-right: 10px; cursor: pointer; } </style> </head> <body> <div id="outer"> <div id="inner"> <div style="background:olive;"> 歡迎</div> <div style="background:blueviolet;"> 大家</div> <div style="background:aquamarine;"> 來到</div> <div style="background:chocolate;"> 孫叫獸</div> <div style="background:darkgoldenrod;"> 的部落格</div> </div> <ul id="ulHead"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <script> var innerDiv=document.getElementById("inner"); var ulHeadLi=document.getElementById("ulHead").getElementsByTagName("li"); for(var i= 0,len=ulHeadLi.length;i<len;i++){ ulHeadLi[i].index=i; ulHeadLi[i].onclick=function(){ startMove(innerDiv,{"left":-this.index*400}) } } function startMove(ele, json, fnEnd) {//json是一個包含樣式的JSON格式字串； // var MAX=58;//如果是勻速運動，可以通過這個數控制勻速； clearInterval(ele.timer); ele.timer=setInterval(function (){ var booleanTarget=true; for(var name in json) {//列舉JSON裡面的屬性和目標值； var iTarget=json[name];//目標值； if(name=='opacity') {//透明度因為要寫相容性處理,2種寫法，所以opacity需要X100； var cur=Math.round(parseFloat(setCss(ele, name))*100); } else if(name=='background'){ var cur=json[name]; } else { var cur=parseInt(setCss(ele, name));//物件的初始值； } var speed=(iTarget-cur)/2;//速度=(目標值-初始值)/一個數，屬於減速運動；取速度； speed=speed>0?Math.ceil(speed):Math.floor(speed);//速度的取整； // if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;//如果是勻速，可以通過這個來控制速度； if(name=='opacity') {//如果輸入透明度，需要為80這種的，不能是0.8 ele.style.filter='alpha(opacity:'+(cur+speed)+')'; ele.style.opacity=(cur+speed)/100; }else if(name=='background'){ ele.style[name]=cur; } else { ele.style[name]=cur+speed+'px'; } if(cur!=iTarget) { booleanTarget=false; } } if(booleanTarget) { clearInterval(ele.timer); if(typeof fnEnd==="function") { fnEnd(); } } }, 20); } function setCss(curEle,attr,value) {//設定CSS屬性值和獲取CSS；如果三個引數就是設定，2個引數就是獲取；att是attribute的縮寫； if(typeof value==="undefined"){//如果有第三個引數，就是設定Css；如果沒有就是獲取Css； var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/; var flag="getElementsByClassName" in document; var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr]; return !reg.test(attr) ? parseFloat(value) : value; } else{ switch (attr) { case "opacity": curEle["style"][attr] = value; curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")"; break; case "zIndex": curEle["style"][attr] = value; break; default: curEle["style"][attr] = !isNaN(value) ? value += "px" : value; } } }; </script> </body> </html>