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 相关文章推荐
extjs 如何给column 加上提示
Jul 29 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
代码整洁之道(重构)
Oct 25 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 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
PHP 高手之路(一)
2006/10/09 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
javascript的几种写法总结
2016/09/30 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
Pycharm安装python库的方法
2020/11/24 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
聚美优品陈欧广告词
2014/03/14 职场文书
法人委托书的范本格式
2014/09/11 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
会计稽核岗位职责
2015/04/13 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis