原生js實(shí)現(xiàn)旋轉(zhuǎn)木馬效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)旋轉(zhuǎn)木馬效果的具體代碼,供大家參考,具體內(nèi)容如下
html部分
<div class="wrap" id="wrap"> ? ? <div class="slide" id="slide"> ? ? ? ? <ul> ? ? ? ? ? ? <li><a href=""><img src="images/slidepic1.jpg" alt=""></a></li> ? ? ? ? ? ? <li><a href=""><img src="images/slidepic2.jpg" alt=""></a></li> ? ? ? ? ? ? <li><a href=""><img src="images/slidepic3.jpg" alt=""></a></li> ? ? ? ? ? ? <li><a href=""><img src="images/slidepic4.jpg" alt=""></a></li> ? ? ? ? ? ? <li><a href=""><img src="images/slidepic5.jpg" alt=""></a></li> ? ? ? ? </ul> ? ? ? ? <div class="arrow" id="arrow"> ? ? ? ? ? ? <a href="javascript:" id="next"></a> ? ? ? ? ? ? <a href="javascript:" id="prev"></a> ? ? ? ? </div> ? ? </div> </div>
css部分
@charset "UTF-8"; /*初始化 ?reset*/ blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0} body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微軟雅黑", SimSun, "宋體", sans-serif;color: #666;} ol,ul{list-style:none} a{text-decoration:none} fieldset,img{border:0;vertical-align:top;} a,input,button,select,textarea{outline:none;} a,button{cursor:pointer;} ? .wrap { ? ? margin: 100px auto; ? ? width: 1200px; } .slide { ? ? height: 500px; ? ? position: relative; } ? .slide li { ? ? position: absolute; ? ? left: 200px; ? ? top: 0; } .slide li img { ? ? width: 100%; } .arrow { ? ? opacity: 0; } #next,#prev { ? ? width: 76px; ? ? height: 112px; ? ? position: absolute; ? ? top: 50%; ? ? margin-top: -56px; ? ? background: url("../images/prev.png") no-repeat; ? ? z-index: 99; } #next { ? ? background-image: url("../images/next.png"); ? ? right: 0; }
js部分
<script src="common.js"></script> ? ? <script> ? ? ? ? var config = [ ? ? ? ? ? ? { ? ? ? ? ? ? ? ? width: 400, ? ? ? ? ? ? ? ? opacity: 0.2, ? ? ? ? ? ? ? ? height: 250, ? ? ? ? ? ? ? ? left: 50, ? ? ? ? ? ? ? ? top: 20, ? ? ? ? ? ? ? ? zIndex: 2 ? ? ? ? ? ? },//0 ? ? ? ? ? ? { ? ? ? ? ? ? ? ? width: 600, ? ? ? ? ? ? ? ? opacity: 0.7, ? ? ? ? ? ? ? ? height: 350, ? ? ? ? ? ? ? ? left: 0, ? ? ? ? ? ? ? ? top: 70, ? ? ? ? ? ? ? ? zIndex: 3 ? ? ? ? ? ? },//1 ? ? ? ? ? ? { ? ? ? ? ? ? ? ? width: 800, ? ? ? ? ? ? ? ? opacity: 1, ? ? ? ? ? ? ? ? height: 500, ? ? ? ? ? ? ? ? left: 200, ? ? ? ? ? ? ? ? top: 100, ? ? ? ? ? ? ? ? zIndex: 4 ? ? ? ? ? ? },//2 ? ? ? ? ? ? { ? ? ? ? ? ? ? ? width: 600, ? ? ? ? ? ? ? ? opacity: 0.7, ? ? ? ? ? ? ? ? height: 350, ? ? ? ? ? ? ? ? left: 600, ? ? ? ? ? ? ? ? top: 70, ? ? ? ? ? ? ? ? zIndex: 3 ? ? ? ? ? ? },//3 ? ? ? ? ? ? { ? ? ? ? ? ? ? ? width: 400, ? ? ? ? ? ? ? ? opacity: 0.2, ? ? ? ? ? ? ? ? height: 250, ? ? ? ? ? ? ? ? left: 750, ? ? ? ? ? ? ? ? top: 20, ? ? ? ? ? ? ? ? zIndex: 2 ? ? ? ? ? ? }//4 ? ? ? ? ]; ? ? ? ? //頁面加載事件 ? ? ? ? window.onload = function () { ? ? ? ? ? ? var flag=true;//默認(rèn)所有的動畫都結(jié)束了 ? ? ? ? ? ? //獲取li標(biāo)簽 ? ? ? ? ? ? var list = my$("slide").getElementsByTagName("li"); ? ? ? ? ? ? //散開圖片 ? ? ? ? ? ? function assign() { ? ? ? ? ? ? ? ? for (var i = 0; i < list.length; i++) { ? ? ? ? ? ? ? ? ? ? animate(list[i], config[i],function () { ? ? ? ? ? ? ? ? ? ? ? ? flag=true;//回調(diào)函數(shù),當(dāng)動畫加載完后,flag變?yōu)閠rue ? ? ? ? ? ? ? ? ? ? }); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? ? assign(); ? ? ? ? ? ? //點(diǎn)擊右邊焦點(diǎn) ? ? ? ? ? ? my$("next").onclick = function () { ? ? ? ? ? ? ? ? if (flag){ ? ? ? ? ? ? ? ? ? ? flag=false; ? ? ? ? ? ? ? ? ? ? config.push(config.shift());//把數(shù)組中的第一個元素作為返回值并追加加到這個數(shù)組的最后面 ? ? ? ? ? ? ? ? ? ? assign(); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? }; ? ? ? ? ? ? //點(diǎn)擊左邊焦點(diǎn) ? ? ? ? ? ? my$("prev").onclick = function () { ? ? ? ? ? ? ? ? if (flag){ ? ? ? ? ? ? ? ? ? ? flag=false; ? ? ? ? ? ? ? ? ? ? config.unshift(config.pop());//把數(shù)組的最后一個元素作為返回值并追加到這個數(shù)組的最前面 ? ? ? ? ? ? ? ? ? ? assign(); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? }; ? ? ? ? ? ? //鼠標(biāo)進(jìn)入逐漸的顯示左右焦點(diǎn) ? ? ? ? ? ? my$("slide").onmouseover=function () { ? ? ? ? ? ? ? ?animate(my$("arrow"),{"opacity":1}); ? ? ? ? ? ? }; ? ? ? ? ? ? //鼠標(biāo)離開隱藏 ? ? ? ? ? ? my$("slide").onmouseout = function () { ? ? ? ? ? ? ? ? animate(my$("arrow"),{"opacity":0}); ? ? ? ? ? ? }; ? ? ? ? }; </script>
common.js部分
//根據(jù)id獲取元素對象 function my$(id) { ? ? return document.getElementById(id); } /* * element---任意的元素 * attr---屬性 * */ function getAttrValue(element,attr) { ? ? return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0; } //動畫函數(shù) function animate(element,json,fn) { ? ? clearInterval(element.timeId); ? ? element.timeId=setInterval(function () { ? ? ? ? var flag=true;//假設(shè)都達(dá)到了目標(biāo) ? ? ? ? for(var attr in json){ ? ? ? ? ? ? if(attr=="opacity"){//判斷屬性是不是opacity ? ? ? ? ? ? ? ? var current= getAttrValue(element,attr)*100; ? ? ? ? ? ? ? ? //每次移動多少步 ? ? ? ? ? ? ? ? var target=json[attr]*100;//直接賦值給一個變量,后面的代碼都不用改 ? ? ? ? ? ? ? ? var step=(target-current)/10;//(目標(biāo)-當(dāng)前)/10 ? ? ? ? ? ? ? ? step=step>0?Math.ceil(step):Math.floor(step); ? ? ? ? ? ? ? ? current=current+step; ? ? ? ? ? ? ? ? element.style[attr]=current/100; ? ? ? ? ? ? }else if(attr=="zIndex"){//判斷屬性是不是zIndex ? ? ? ? ? ? ? ? element.style[attr]=json[attr]; ? ? ? ? ? ? }else{//普通的屬性 ? ? ? ? ? ? ? ? ? //獲取當(dāng)前的位置----getAttrValue(element,attr)獲取的是字符串類型 ? ? ? ? ? ? ? ? var current= parseInt(getAttrValue(element,attr))||0; ? ? ? ? ? ? ? ? //每次移動多少步 ? ? ? ? ? ? ? ? var target=json[attr];//直接賦值給一個變量,后面的代碼都不用改 ? ? ? ? ? ? ? ? var step=(target-current)/10;//(目標(biāo)-當(dāng)前)/10 ? ? ? ? ? ? ? ? step=step>0?Math.ceil(step):Math.floor(step); ? ? ? ? ? ? ? ? current=current+step; ? ? ? ? ? ? ? ? element.style[attr]=current+"px"; ? ? ? ? ? ? } ? ? ? ? ? ? if(current!=target){ ? ? ? ? ? ? ? ? flag=false;//如果沒到目標(biāo)結(jié)果就為false ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? if(flag){//結(jié)果為true ? ? ? ? ? ? clearInterval(element.timeId); ? ? ? ? ? ? if(fn){//如果用戶傳入了回調(diào)的函數(shù) ? ? ? ? ? ? ? ? fn(); //就直接的調(diào)用, ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? console.log("target:"+target+"current:"+current+"step:"+step); ? ? },10); }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript 2048 游戲?qū)嵗a(簡單易懂)
使用javascript制作的2048小游戲非常好玩,有意思,下面給大家分享使用javascript代碼制作的2048游戲,需要的朋友參考下吧2016-03-03詳解JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換
在JavaScript中,數(shù)據(jù)類型的轉(zhuǎn)換是一項(xiàng)常見的任務(wù),不同的數(shù)據(jù)類型之間需要相互轉(zhuǎn)換以滿足程序的需求,本篇博客將深入探討JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換,包括隱式轉(zhuǎn)換和顯式轉(zhuǎn)換的概念、轉(zhuǎn)換規(guī)則和常見的數(shù)據(jù)類型轉(zhuǎn)換示例2023-06-06javascript實(shí)現(xiàn)別踩白塊兒小游戲程序
我們先看到的未開始的頁面黑色和白色方塊是隨機(jī)生成的,完了這么多把沒有發(fā)現(xiàn)時固定不變的。點(diǎn)擊一次方塊,程序需要判斷是黑色還是白色的。如果是黑色的,當(dāng)然程序也是實(shí)現(xiàn)了一次自減,在動畫中是實(shí)現(xiàn)一次下移的,下移的時候點(diǎn)擊的方塊到黃顏色的區(qū)域會變成灰色2015-11-11詳解使用mocha對webpack打包的項(xiàng)目進(jìn)行"冒煙測試"的大致流程
這篇文章主要介紹了詳解使用mocha對webpack打包的項(xiàng)目進(jìn)行"冒煙測試"的大致流程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04小程序scroll-view組件實(shí)現(xiàn)滾動的示例代碼
這篇文章主要介紹了小程序scroll-view組件實(shí)現(xiàn)滾動的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09JS運(yùn)動框架之分享側(cè)邊欄動畫實(shí)例
這篇文章主要介紹了JS運(yùn)動框架之分享側(cè)邊欄動畫,實(shí)例分析了javascript操作div及css的技巧,需要的朋友可以參考下2015-03-03