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 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 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在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
Javascript继承机制详解
2017/05/30 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
webpack4简单入门实例
2018/09/06 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
Python单链表简单实现代码
2016/04/27 Python
Python中安装easy_install的方法
2018/11/18 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
工程质量承诺书
2014/03/27 职场文书
班长演讲稿范文
2014/04/24 职场文书
员工生日会策划方案
2014/06/14 职场文书
教师个人年终总结
2015/02/11 职场文书