JS动画效果打开、关闭层的实现方法


Posted in Javascript onMay 09, 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 type="text/css">
#main{
width:500px; margin:100px;
height:500px;border:1px solid red
}
#test{
border:1px solid red;
display:none;width:10px;
height:10px; background:yellow
}
</style>
</head>
<body>
<input type="button" value="打开" id="bt" />
<input type="button" value="关闭" id="bt1" />
<div id="main"><div id="test"></div>
</div>
</body>
</html>
<script type="text/javascript">
function $ (o) {
return document.getElementById(o);
}
function XslideDown(obj,type,mX,num) {
if(!type){return;}
try{
var type1=type=="height"?"marginTop":"marginLeft";
var type2=type=="height"?"top":"left";
XSetCss(obj,[type1,XgetOffset(obj)[type2]+"px"]);
XSetCss(obj,[type,XgetOffset(obj)[type]+num+"px"]);
if(XgetOffset(obj)[type]<mX){
setTimeout(function(){XslideDown(obj,type,mX,num);},10); 
}
else{
XSetCss(obj,[type,mX])
}
}
catch(e){}
}
function XslideUp(obj,type,mX,num) {
if(!type){return;}
try{
var type1=type=="height"?"marginTop":"marginLeft";
var type2=type=="height"?"top":"left";
XSetCss(obj,[type1,XgetOffset(obj)[type2]+"px"]);
XSetCss(obj,[type,XgetOffset(obj)[type]-num+"px"]);
if(XgetOffset(obj)[type]>mX){ 
setTimeout(function(){XslideUp(obj,type,mX,num);},1); 
}
else{
XSetCss(obj,[type,mX])
obj.style.display="none";
}
}
catch(e){}
}
function XSetCss(obj,cssArgs){
if(arguments.length==2)
{ 
if(cssArgs.constructor==Object){
for(var o in cssArgs)
{
if(obj.style[o]!="undefiend")
{
obj.style[o]=cssArgs[o]; 
} 
} 
}
if(cssArgs.constructor==Array&&cssArgs.length==2){
obj.style[cssArgs[0]]=cssArgs[1]; 
}
}
}
function XgetOffset (obj) {
return {
height:obj.offsetHeight,
width:obj.offsetWidth,
top:parseInt((obj.parentNode.offsetHeight-obj.offsetHeight)/2),
left:parseInt((obj.parentNode.offsetWidth-obj.offsetWidth)/2)
}
}
function XopenDiv(o){
o.style.display="block";
XslideDown(o,"width",400,10);
XslideDown(o,"height",400,10);
}
function XcloseDiv(o){
XslideUp(o,"width",10,10);
XslideUp(o,"height",10,10);
}
$("bt").onclick=function(){
XopenDiv($("test"))
}
$("bt1").onclick=function(){
XcloseDiv($("test"))
}
</script>

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

Javascript 相关文章推荐
javascript整除实现代码
Nov 23 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 #Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 #Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 #Javascript
javasript实现密码的隐藏与显示
May 08 #Javascript
jquery实现动态改变div宽度和高度
May 08 #Javascript
jquery右下角自动弹出可关闭的广告层
May 08 #Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 #Javascript
You might like
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
javascript将非数值转换为数值
2018/09/13 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python 操作hive pyhs2方式
2019/12/21 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
求职简历中个人的自我评价
2013/12/01 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
毕业生工作求职信
2014/06/30 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python