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 相关文章推荐
JS 对象介绍
Jan 20 Javascript
Javascript 面向对象 继承
May 13 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
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的日期与时间函数技巧
2008/04/24 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
canvas时钟效果
2017/02/16 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
Python实现的统计文章单词次数功能示例
2019/07/08 Python
StubHub德国:购买和出售门票
2017/09/06 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
秋季运动会稿件
2014/01/30 职场文书
七匹狼男装广告词
2014/03/21 职场文书
电气自动化求职信
2014/06/24 职场文书
给客户的检讨书
2014/12/21 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
大学团日活动总结书
2015/05/11 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
Redis唯一ID生成器的实现
2022/07/07 Redis