焦點(diǎn)圖相信對(duì)大家來(lái)說(shuō)都不陌生,本文給大家分享的是一種圖片高斯模糊切換效果的焦點(diǎn)圖,下面話不多說(shuō)了,來(lái)看看實(shí)現(xiàn)的效果圖和實(shí)例代碼吧。
創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)平?jīng)?10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108效果圖
實(shí)例代碼
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無(wú)標(biāo)題文檔</title> <style> @-webkit-keyframes show { 0%{ opacity:1; -webkit-transform:scale(1); } 100% { opacity:.1; -webkit-transform:scale(3); } } body{ background:#e8d0ca;} #wrap{width:600px; margin:100px auto;border:2px solid #000; position:relative;} #list{ position:relative; height:310px;margin:0;padding:0; list-style:none;} #list li{ width:281px;height:310px; background:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113914zaxalfffaylelyxd.png) no-repeat; position:absolute;top:0; transition:.6s;} #list span{ width:100%;height:100%; display:block;transition:.6s;} #list li:nth-of-type(1){ left:0;z-index:1; -webkit-transform:scale(0.8);opacity:0.6;} #list li:nth-of-type(1) span{ background:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113914zfkmqfb0zzummnhy.png); opacity:1;} #list li:nth-of-type(2){ left:calc(50% - 140px);background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113913nvvkf5pf4f77x55k.png);z-index:2; opacity:1;} #list li:nth-of-type(2) span{ background:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113914cx8x8z8ldfgckpmf.png); opacity:0;} #list li:nth-of-type(3){ left:calc(100% - 281px);background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113914zhou55z6tlru25lu.png);z-index:1;-webkit-transform:scale(0.8); opacity:0.6;} #list li:nth-of-type(3) span{ background:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113914sofg7wja0c0cowjv.png); opacity:1;} .btn{width:18px;height:29px; position:absolute;top:130px;z-index:10; cursor:pointer;} .btn span{ position:absolute;left:0;top:0; background:inherit; width:100%;height:100%; transition:.5s;} .btn:hover span:nth-of-type(1){-webkit-animation:show 2s infinite; } .btn:hover span:nth-of-type(2){-webkit-animation:show 2s 1s infinite; } #prev{ left:80px; background:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113915d96e0acuyjccybcb.png) no-repeat;} #next{ right:80px; background:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113915kfhwnrawaeaibf6a.png) no-repeat;} </style> </head> <body> <div id="wrap"> <ul id="list"> <li> <span></span> </li> <li> <span></span> </li> <li> <span></span> </li> </ul> <div id="prev" class="btn"> <span></span> <span></span> </div> <div id="next" class="btn"> <span></span> <span></span> </div> </div> <script> window.onload=function() { var oList=document.getElementById("list"); var aLi=oList.children; var oPrev=document.getElementById("prev"); var oNext=document.getElementById("next"); var arr=[]; //arr.unshift(arr.pop());把最后一個(gè)刪除添加到數(shù)組第一個(gè) //arr.push(arr.shift());把第一個(gè)刪除添加到數(shù)組第一個(gè) //獲取li的信息 for(var i=0;i<aLi.length;i++) { var oSpan=aLi[i].children[0]; arr[i]={left:getStyle(aLi[i],"left"),opacity:getStyle(aLi[i],"opacity"),scale:getStyle(aLi[i],"-webkit-transform"),zIndex:getStyle(aLi[i],"z-index"),alpha:getStyle(oSpan,"opacity")}; } oPrev.onclick=function() { arr.unshift(arr.pop()); toStyle(); }; oNext.onclick=function() { arr.push(arr.shift()); toStyle(); }; function toStyle() { for(var i=0;i<aLi.length;i++) { var oSpan=aLi[i].children[0]; aLi[i].style.left=arr[i].left; aLi[i].style.opacity=arr[i].opacity; aLi[i].style.WebkitTransform=arr[i].scale; aLi[i].style.zIndex=arr[i].zIndex; oSpan.style.opacity=arr[i].alpha; } } }; function getStyle(obj,attr) { if( obj.currentStyle){ return obj.currentStyle[attr]; } return getComputedStyle(obj)[attr]; } </script> </body> </html>
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
網(wǎng)頁(yè)標(biāo)題:JS實(shí)現(xiàn)圖片高斯模糊切換效果的焦點(diǎn)圖實(shí)例-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)網(wǎng)址:http://muchs.cn/article34/pdppe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開發(fā)、品牌網(wǎng)站制作、品牌網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、自適應(yīng)網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容