JS实用的动画弹出层效果实例
2015-05-05 00:00
761 查看
本文实例讲述了JS实用的动画弹出层效果的方法。分享给大家供大家参考。具体实现方法如下:
效果如下图所示:
希望本文所述对大家的javascript程序设计有所帮助。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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> </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>
效果如下图所示:
希望本文所述对大家的javascript程序设计有所帮助。
相关文章推荐
- JS实用的动画弹出层效果实例
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- 一个实用的JS动画弹出层效果
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- 奉献一个实用的JS动画弹出层效果
- JS实用的带停顿的逐行文本循环滚动效果实例
- Mac os x实用技巧-关闭渐隐和弹出动画效果
- 实用带多种CSS动画特效的jQuery弹出层插件hDialog.js
- Js点击弹出下拉菜单效果实例
- JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
- 简单JS动画实例 广告移动效果
- JS简单实现动画弹出层效果
- 原生js实现jquery函数animate()动画效果的简单实例
- JS实现响应鼠标点击动画渐变弹出层效果代码
- JS实现回到页面顶部动画效果的简单实例
- 不使用JS,使用CSS3 target 以及 动画效果实现,点击一下弹出,并且保持弹出状态,然后再点击一下弹回的导航栏(或者可以叫做按钮)
- JS实现点击登录弹出窗口同时背景色渐变动画效果
- JS实现单击输入框弹出选择框效果完整实例
- JS实现点击登录弹出窗口同时背景色渐变动画效果
- Silverlight实用窍门系列:20.后台CS代码中创建四种常用的动画效果【附带源码实例】