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 相关文章推荐
js中if语句的几种优化代码写法
Mar 12 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
js清理Word格式示例代码
Feb 13 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
Vue单文件组件开发实现过程详解
Jul 30 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
由php if 想到的些问题
2008/03/22 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
js微信分享API
2020/10/11 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
python 图片验证码代码
2008/12/07 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
django之session与分页(实例讲解)
2017/11/13 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
解决Python使用列表副本的问题
2019/12/19 Python
python3实现飞机大战
2020/11/29 Python
python如何构建mock接口服务
2021/01/28 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
如何进行Linux分区优化
2016/09/13 面试题
有关打架的检讨书
2014/01/25 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
python内置进制转换函数的操作
2021/06/02 Python
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android