JS實(shí)現(xiàn)動畫中的布局轉(zhuǎn)換
在用JS編寫動畫的時(shí)候,經(jīng)常用會到布局轉(zhuǎn)換,即在運(yùn)動前將相對定位轉(zhuǎn)為絕對定位,然后執(zhí)行動畫函數(shù)。下面給大家分享一個(gè)運(yùn)用原生JS實(shí)現(xiàn)的布局轉(zhuǎn)換的Demo,效果如下:
以下是代碼實(shí)現(xiàn),歡迎大家復(fù)制粘貼及吐槽。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS實(shí)現(xiàn)動畫中的布局轉(zhuǎn)換</title> <style> * { margin: 0; padding: 0; } #ul1 { width: 366px; margin: 0 auto; position: relative; } #ul1 li { list-style: none; width: 100px; height: 100px; background: #CCC; border: 1px solid black; float: left; margin: 10px; z-index: 1; } </style> <!-- 運(yùn)動框架 --> <script> // 獲取指定樣式的值 function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }; // 運(yùn)動函數(shù) function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var bStop = true; for (var attr in json) { var iCur = 0; if (attr == 'opacity') { iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100); } else { iCur = parseInt(getStyle(obj, attr)); } var iSpeed = (json[attr] - iCur) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (iCur != json[attr]) { bStop = false; } if (attr == 'opacity') { obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')'; obj.style.opacity = (iCur + iSpeed) / 100; } else { obj.style[attr] = iCur + iSpeed + 'px'; } } if (bStop) { clearInterval(obj.timer); if (fn) { fn(); } } }, 30) } </script> <!-- 添加事件 --> <script> window.onload = function () { var oUl = document.getElementById('ul1'); var aLi = oUl.getElementsByTagName('li'); var iMinZindex = 2; var i = 0; // 1.布局轉(zhuǎn)換 for (i = 0; i < aLi.length; i++) { //aLi[i].innerHTML='left:'+aLi[i].offsetLeft+', top:'+aLi[i].offsetTop; aLi[i].style.left = aLi[i].offsetLeft + 'px'; aLi[i].style.top = aLi[i].offsetTop + 'px'; } // 必需要用兩個(gè)循環(huán) for (i = 0; i < aLi.length; i++) { aLi[i].style.position = 'absolute'; //第一次循環(huán)中offset值已經(jīng)計(jì)算了原有的margin值,所以此處要清除 aLi[i].style.margin = '0'; } // 2.加事件 for (i = 0; i < aLi.length; i++) { aLi[i].onmouseover = function () { //讓當(dāng)前zIndex不斷的增加,防止堆疊 this.style.zIndex = iMinZindex++; startMove(this, { width: 200, height: 200, marginLeft: -50, marginTop: -50 }); }; aLi[i].onmouseout = function () { startMove(this, { width: 100, height: 100, marginLeft: 0, marginTop: 0 }); }; } }; </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap基本組件學(xué)習(xí)筆記之下拉菜單(7)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之下拉菜單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12JavaScript 浮動定位提示效果實(shí)現(xiàn)代碼
本來想做一個(gè)集合浮動定位和鼠標(biāo)跟隨的tooltips效果,但發(fā)現(xiàn)定位和鼠標(biāo)跟隨在一些關(guān)鍵的地方還是不同的,還是分開來吧。2009-09-09JavaScript實(shí)現(xiàn)原型封裝輪播圖
這篇文章主要為大家詳細(xì)介紹了JavaScript原型封裝輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12JS中的算法與數(shù)據(jù)結(jié)構(gòu)之隊(duì)列(Queue)實(shí)例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之隊(duì)列(Queue),結(jié)合實(shí)例形式詳細(xì)分析了javascript中隊(duì)列的概念、原理、定義及常見操作技巧,需要的朋友可以參考下2019-08-08收藏Javascript中常用的55個(gè)經(jīng)典技巧
收藏Javascript中常用的55個(gè)經(jīng)典技巧...2007-08-08JavaScript自定義瀏覽器滾動條兼容IE、 火狐和chrome
本文主要分享了使用原生JavaScript實(shí)現(xiàn)自定義瀏覽器滾動條兼容IE、 火狐和chrome的思路與方法,具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01使用閉包對setTimeout進(jìn)行簡單封裝避免出錯
寫js腳本時(shí)經(jīng)常會用到一些拼寫函數(shù)的情況,例如調(diào)用setTimeout...查了很長時(shí)間,為什么就是彈不出對話框呢,使用閉包就可完全避免了2013-07-07