JS简单实现动画弹出层效果


Posted in Javascript onMay 05, 2015

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>
</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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
JQuery 常用操作代码
Mar 14 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
解决pycharm双击但是无法打开的情况
Oct 31 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 #Javascript
关于延迟加载JavaScript
May 05 #Javascript
Javascript闭包(Closure)详解
May 05 #Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 #Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 #Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 #Javascript
jquery实现图片随机排列的方法
May 04 #Javascript
You might like
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
PDO::exec讲解
2019/01/28 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
Python简易版图书管理系统
2019/08/12 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
python获取栅格点和面值的实现
2020/03/10 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
国贸专业的职业规划范文
2014/01/23 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL