JS簡(jiǎn)單實(shí)現(xiàn)動(dòng)畫(huà)彈出層效果
JS簡(jiǎn)單實(shí)現(xiàn)動(dòng)畫(huà)彈出層效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>動(dòng)畫(huà)彈出層</title> <style> .list{ position:relative;; background:#eee; border:1px #ccc solid; margin:10px; height:30px; width:100px; cursor :pointer ; } .listShow{ position:relative; background:#eff; border:1px #ddd solid; margin:10px; height:30px; width:100px; cursor :pointer ; } .comment{ position:absolute; left:0; display:none; position:absolute; border:1px #ccc solid; background:#fee; width:200px; height:200px; overflow:hidden; z-index:100; } </style> </head> <body> <div class="" id="show"> 0 </div> <div class="list" id="list1">1 <div class="comment" id="comment1">內(nèi)容顯示111<br/> </div> <div class="list" id="list2">2 <div class="comment" id="comment2">內(nèi)容顯示222</div> </div> <div class="list" id="list3">3 <div class="comment" id="comment3">內(nèi)容顯示333</div> </div> </body> </html> <script> var zindex=0; function $id(id){ return document.getElementById(id); } var Bind = function(object,fun){ var args = Array.prototype.slice.call(arguments).slice(2); return function(){ return fun.apply(object,args); } } function addEventHandler(oTarget, sEventType, fnHandler){ if(oTarget.addEventListener){oTarget.addEventListener(sEventType, fnHandler, false);} else if(oTarget.attachEvent){oTarget.attachEvent('on' + sEventType, fnHandler);} else{oTarget['on' + sEventType] = fnHandler;} } var Shower=function(){ this.list=null; this.comment=null; this.moveLeft=80; this.moveTop=20; this.height=150; this.width=250; this.time=800; this.init=function(lisObj,comObj){ this.list=lisObj; this.comment=comObj; var _this=this; this._fnMove=Bind(this,this.move); (function(){ var obj=_this; addEventHandler(obj.list,"click",obj._fnMove); })(); }; this.move=function(){ var _this=this; var w=0; var h=0; var height=0; //彈出div的高 var width=0; //彈出div的寬 var t=0; var startTime = new Date().getTime();//開(kāi)始執(zhí)行的時(shí)間 if(!_this.comment.style.display||_this.comment.style.display=="none"){ _this.comment.style.display="block"; _this.comment.style.height=0+"px"; _this.comment.style.width=0+"px"; _this.list.style.zIndex=++zindex; _this.list.className="listShow"; var comment=_this.comment.innerHTML; _this.comment.innerHTML=""; //去掉顯示內(nèi)容 var timer=setInterval(function(){ var newTime = new Date().getTime(); var timestamp = newTime - startTime; _this.comment.style.left=Math.ceil(w)+"px"; _this.comment.style.top=Math.ceil(h)+"px"; _this.comment.style.height=height+"px"; _this.comment.style.width=width+"px"; t++; var change=(Math.pow((timestamp/_this.time-1), 3) +1); //根據(jù)運(yùn)行時(shí)間得到基礎(chǔ)變化量 w=_this.moveLeft*change; h=_this.moveTop*change; height=_this.height*change; width=_this.width*change; $id("show").innerHTML=w; if(w>_this.moveLeft){ clearInterval(timer); _this.comment.style.left=_this.moveLeft+"px"; _this.comment.style.top=_this.moveTop+"px"; _this.comment.style.height=_this.height+"px"; _this.comment.style.width=_this.width+"px"; _this.comment.innerHTML=comment; //回復(fù)顯示內(nèi)容 } },1,_this.comment); }else{ _this.hidden(); } } this.hidden=function(){ var _this=this; var flag=1; var hiddenTimer=setInterval(function(){ if(flag==1){ _this.comment.style.height=parseInt(_this.comment.style.height)-10+"px"; }else{ _this.comment.style.width=parseInt(_this.comment.style.width)-15+"px"; _this.comment.style.left=parseInt(_this.comment.style.left)+5+"px"; } if(flag==1 && parseInt(_this.comment.style.height)<10){ flag=-flag; } if(parseInt(_this.comment.style.width)<20){ clearInterval(hiddenTimer); _this.comment.style.left="0px"; _this.comment.style.top="0px"; _this.comment.style.height="0px"; _this.comment.style.width="0px"; _this.comment.style.display="none"; if(_this.list.style.zIndex==zindex){ zindex--; }; _this.list.style.zIndex=0; _this.list.className="list"; } },1) } } window.onload=function(){ //建立各個(gè)菜單對(duì)象 var shower1=new Shower(); shower1.init($id("list1"),$id("comment1")); var shower2=new Shower(); shower2.init($id("list2"),$id("comment2")); var shower3=new Shower(); shower3.init($id("list3"),$id("comment3")); } </script>
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- javascript 流暢動(dòng)畫(huà)實(shí)現(xiàn)原理
- Javascript動(dòng)畫(huà)的實(shí)現(xiàn)原理淺析
- 淺析JavaScript動(dòng)畫(huà)模擬拖拽原理
- JS前端可視化canvas動(dòng)畫(huà)原理及其推導(dǎo)實(shí)現(xiàn)
- 九種原生js動(dòng)畫(huà)效果
- JS動(dòng)畫(huà)效果代碼3
- JS實(shí)現(xiàn)圖片旋轉(zhuǎn)動(dòng)畫(huà)效果封裝與使用示例
- JavaScript動(dòng)畫(huà)原理之如何使用js進(jìn)行動(dòng)畫(huà)效果的實(shí)現(xiàn)
相關(guān)文章
js實(shí)現(xiàn)String.Fomat的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)String.Fomat的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09微信小程序自定義組件傳值 頁(yè)面和組件相互傳數(shù)據(jù)操作示例
這篇文章主要介紹了微信小程序自定義組件傳值 頁(yè)面和組件相互傳數(shù)據(jù)操作,結(jié)合實(shí)例形式分析了微信小程序常見(jiàn)傳值操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05js實(shí)現(xiàn)圖片數(shù)組中圖片切換效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片數(shù)組中圖片切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07js實(shí)現(xiàn)簡(jiǎn)單div拖拽功能實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單div拖拽功能的方法,實(shí)例分析了javascript針對(duì)div層拖拽的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-05-05如何使用Javascript正則表達(dá)式來(lái)格式化XML內(nèi)容
本篇文章是對(duì)使用Javascript正則表達(dá)式來(lái)格式化XML內(nèi)容的方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以參考下2013-07-07js字符串轉(zhuǎn)換成數(shù)字與數(shù)字轉(zhuǎn)換成字符串的實(shí)現(xiàn)方法
本篇文章主要是對(duì)js字符串轉(zhuǎn)換成數(shù)字與數(shù)字轉(zhuǎn)換成字符串的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01javascript檢查某個(gè)元素在數(shù)組中的索引值
在js中提供數(shù)據(jù)查找了函數(shù)有很多,但我查找了很久都沒(méi)有能實(shí)現(xiàn)我要的方法,后來(lái)發(fā)現(xiàn)可以使用indexOf函數(shù)來(lái)實(shí)現(xiàn)查找與定位數(shù)組元素索引值的具體方法,各位朋友可參考2016-03-03JS 頁(yè)面自動(dòng)加載函數(shù)(兼容多瀏覽器)
兼容多個(gè)瀏覽器的自動(dòng)加載函數(shù)。2009-05-05