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 相关文章推荐
javascript 树控件 比较好用
Jun 11 Javascript
JavaScript 函数式编程的原理
Oct 16 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
vue中 v-for循环的用法详解
Feb 19 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生成文件
2007/01/15 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
基于python3生成标签云代码解析
2020/02/18 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
大专毕业自我鉴定
2014/02/04 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
大学副班长竞选稿
2015/11/21 职场文书
如何用python清洗文件中的数据
2021/06/18 Python
python保存图片的四个常用方法
2022/02/28 Python
微信小程序调用python模型
2022/04/21 Python