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" lang="gb2312">
<head>
<title>JavaScript缓冲打开层</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<style type="text/css">
* {
margin:0; padding:0;
}
body {
margin:5px auto; text-align:center; background:#f0f0f0;
}
#d1 {
position:absolute; top:20px;
left:20px; width:100px; height:60px;
border:1px solid #808;
}
#d2 {
position:absolute; top:100px;
left:20px; width:100px; height:60px;
border:1px solid #808;
}
#open1, #close1, #open2, #close2 {
cursor:pointer; background:#ccf; margin:5px;
}
#open1, #open2 {
display:block;
}
#close1, #close2 {
display:none;
}
</style>
</head>
<body>
<div id="d1">
移动位置
<span id="open1" onclick="fo1()">Open</span>
<span id="close1" onclick="fc1()">Close</span>
</div>
<div id="d2">
改变大小
<span id="open2" onclick="fo2()">Open</span>
<span id="close2" onclick="fc2()">Close</span>
</div>
<div id="debug">AAA</div>
<script type="text/javascript">
//<[CDATA[
var sl = 20; //初始left值
var el = 500; //结束left值
var sw = 100;//初始width值
var ew = 580;//结束width值
var p = 10; //缓冲变量
var t = 20; //时间变量
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');
var debug = document.getElementById('debug');
var open1 = document.getElementById('open1');
var close1 = document.getElementById('close1');
var open2 = document.getElementById('open2');
var close2 = document.getElementById('close2');
function fo1() {
var cl = parseInt(getStyle(d1,'left'));
//当前left值
if (cl<el) {
d1.style.left = cl + Math.ceil((el-cl)/p) + 'px';
//当前值+缓冲增量
debug.innerHTML = getStyle(d1,'left');
//cl + 'px';
setTimeout('fo1()', t);
} else {
d1.style.left = el + 'px';
open1.style.display = 'none';
close1.style.display = 'block';
}
}
function fc1() {
var cl = parseInt(getStyle(d1,'left'));
//当前left值
if (cl>sl) {
d1.style.left = cl - Math.ceil((cl-sl)/p) + 'px';
//当前值-缓冲增量
debug.innerHTML = getStyle(d1,'left');
//cl + 'px';
setTimeout('fc1()', t);
} else {
d1.style.left = sl + 'px';
open1.style.display = 'block';
close1.style.display = 'none';
}
}
function fo2() {
var cw = parseInt(getStyle(d2,'width'));
//当前width值
if (cw<ew) {
d2.style.width = cw + Math.ceil((ew-cw)/p) + 'px';
//当前值+缓冲增量
debug.innerHTML = getStyle(d2,'width');
//cw + 'px';
setTimeout('fo2()', t);
} else {
d2.style.width = ew + 'px';
open2.style.display = 'none';
close2.style.display = 'block';
}
}
function fc2() {
var cw = parseInt(getStyle(d2,'width'));
//当前width值
if (cw>sw) {
d2.style.width = cw - Math.ceil((cw-sw)/p) + 'px';
//当前值-缓冲增量
debug.innerHTML = getStyle(d2,'width');
//cw + 'px';
setTimeout('fc2()', t);
} else {
d2.style.width = sw + 'px';
open2.style.display = 'block';
close2.style.display = 'none';
}
}
function getStyle( elem, name ) { 
if (elem.style[name]) { return elem.style[name]; } 
else if (elem.currentStyle) { return elem.currentStyle[name]; } 
else if (document.defaultView && document.defaultView.getComputedStyle){
name = name.replace(/([A-Z])/g,"-$1"); 
name = name.toLowerCase(); 
var s = document.defaultView.getComputedStyle(elem,""); 
return s && s.getPropertyValue(name); 
} 
else { return null; } 
}
//]]>
</script>
</body>
</html>

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

Javascript 相关文章推荐
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 #Javascript
javasript实现密码的隐藏与显示
May 08 #Javascript
jquery实现动态改变div宽度和高度
May 08 #Javascript
jquery右下角自动弹出可关闭的广告层
May 08 #Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 #Javascript
JavaScript实现自动变换表格边框颜色
May 08 #Javascript
JavaScript基于setTimeout实现计数的方法
May 08 #Javascript
You might like
我的论坛源代码(九)
2006/10/09 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
python 中if else 语句的作用及示例代码
2018/03/05 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
C语言笔试题回忆
2015/04/02 面试题
公司年会主持词
2014/03/22 职场文书
长城导游词
2015/01/30 职场文书
员工辞退通知书
2015/04/17 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
旅游投诉信范文
2015/07/02 职场文书
2016年公司新年寄语
2015/08/17 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python