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>
<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>

效果如下图所示:

JS实用的动画弹出层效果实例

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
详解Angular Reactive Form 表单验证
Jul 06 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 #Javascript
javascript实现捕捉键盘上按下的键
May 05 #Javascript
js中this用法实例详解
May 05 #Javascript
javascript中返回顶部按钮的实现
May 05 #Javascript
JS简单实现动画弹出层效果
May 05 #Javascript
教你使用javascript简单写一个页面模板引擎
May 05 #Javascript
关于延迟加载JavaScript
May 05 #Javascript
You might like
十大“创意”战术!
2020/03/04 星际争霸
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
stripos函数知识点实例分享
2019/02/11 PHP
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
vue实现简单图片上传
2020/06/30 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
python基础练习之几个简单的游戏
2017/11/10 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
车间操作工岗位职责
2013/12/19 职场文书
工作求职自荐信
2014/06/13 职场文书
考研英语辞职信
2015/05/13 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL