奉獻一個實用的JS動畫彈出層效果
<!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>動畫彈出層</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">內容顯示111<br/>
</div>
<div class="list" id="list2">2
<div class="comment" id="comment2">內容顯示222</div>
</div>
<div class="list" id="list3">3
<div class="comment" id="comment3">內容顯示333</div>
</div>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></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();//開始執行的時間
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=""; //去掉顯示內容
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); //根據執行時間得到基礎變化量
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; //回覆顯示內容
}
},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(){
//建立各個選單物件
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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>動畫彈出層</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">內容顯示111<br/>
</div>
<div class="list" id="list2">2
<div class="comment" id="comment2">內容顯示222</div>
</div>
<div class="list" id="list3">3
<div class="comment" id="comment3">內容顯示333</div>
</div>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></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();//開始執行的時間
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=""; //去掉顯示內容
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); //根據執行時間得到基礎變化量
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; //回覆顯示內容
}
},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(){
//建立各個選單物件
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>
相關文章
- js實現彈出層滑鼠跟隨效果JS
- jQuery拖拽的彈出層效果jQuery
- js點選彈出和隱藏一個div層效果程式碼例項JS
- jQuery實現的自定義可以拖動的彈出層效果jQuery
- 用js實現動畫效果核心方式JS動畫
- JavaScript點選按鈕彈出層效果JavaScript
- 純CSS彈出層,城市切換效果CSS
- jQuery跟隨滑鼠移動的彈出層效果jQuery
- 奉獻一個能進行rsa計算的小工具
- 彈出一個全屏灰黑色透明遮罩效果遮罩
- SVG 動畫實現彈性的頁面元素效果SVG動畫
- css滑鼠懸浮彈出說明層效果CSS
- 用css動畫寫一個下紅包雨的效果CSS動畫
- AngularJS教程十七—— 彈出層元件AngularJS元件
- 實現一個帶下拉彈簧動畫的 ScrollView動畫View
- 如何用 Swift 實現一個好玩的彈性動畫Swift動畫
- 自定義view 之多個引導層動畫效果View動畫
- 寫了一個簡單好用的彈出層外掛
- Java在Swing中如何實現彈出一個對話方塊的效果?Java
- 用Unity實現彈反效果Unity
- 如何不使用js實現滑鼠hover彈出選單效果JS
- 用JavaScript實現動畫效果 (轉)JavaScript動畫
- jquery實現的彈出居中視窗效果jQuery
- bootstrap – 彈出層boot
- Android中ScrollView實現拖拽反彈效果動畫AndroidView動畫
- JS動畫效果——多物體動畫JS動畫
- 兩種方法使用js讀寫cookie實現一個底部廣告浮層效果JSCookie
- Flutter動畫:用Flutter來實現一個拍手動畫Flutter動畫
- css3和js實現的大白動畫效果CSSS3JS動畫
- 原生js實現的點選彈出螢幕居中對話方塊效果JS
- JS Tween動畫效果研究 :JS動畫
- 新聞稿釋出效果的三個層次
- jQuery地圖熱點效果-滑鼠經過彈出提示層資訊jQuery地圖
- 讓View具有彈性效果的動畫——SpringAnimationView動畫Spring
- js利用H5的requestAnimationFrame()API實現動畫效果JSH5requestAnimationFrameAPI動畫
- layui使用彈出層 關閉後彈層的內容又顯示出來UI
- javascript實現掉落彈出層------Day29JavaScript
- 開源:具有永遠奉獻精神的禮物