JS实现带缓冲效果打开、关闭、移动一个层的方法_javascript技巧
本文实例讲述了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程序设计有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
360浏览器推荐的广告如何关闭？如何关闭电脑360浏览器推荐的广告？
Mar 14, 2024 am 09:16 AM
360浏览器推荐的广告如何关闭？相信很多的用户们都在使用360浏览器，不过这款浏览器有时候会弹出广告，这就使得很多的用户们都十分的苦恼，下面就让本站来为用户们来仔细的介绍一下如何关闭电脑360浏览器推荐的广告吧。 如何关闭电脑360浏览器推荐的广告？ 方法一： 1、打开360安全浏览器。 2、找到右上角“三横杠”标志，点击【设置】。 3、在弹出的界面左侧任务栏中找到【实验室】，勾选【启用“360热点资讯”功能】即可。 方法二： 1、首先双击
抖音小游戏在哪里打开？打开抖音小游戏的两种方法
Mar 15, 2024 am 09:30 AM
抖音是一款流行的短视频社交应用程序，用户不仅能观看、分享各种类型的短视频内容，还提供一系列小游戏供你玩。那么抖音小游戏从哪进呢？抖音小游戏入口在哪？下面就来看看详细教程。 方法一：小程序打开 1、点击我选项 进到抖音的主页之后，点击我选项进入。 2、点击三横线 进入到我界面之后，点击上面的三横线按钮。 3、点击小程序 打开三横线选项之后，点击里面的小程序。 4、点击抖音小游戏 进入到小程序界面之后，点击抖音小游戏那个选项即可打开。 方法二：搜索打开 1、点击放大镜 进
Windows 11安全中心关闭方法详解
Mar 27, 2024 pm 03:27 PM
在Windows11操作系统中，安全中心是一个重要的功能，它帮助用户监控系统安全状态、防御恶意软件和保护个人隐私。然而，有时候用户可能需要临时关闭安全中心，例如在安装某些软件或进行系统调优时。本文将详细介绍Windows11安全中心的关闭方法，帮助您正确和安全地操作系统。1.如何关闭Windows11安全中心在Windows11中，关闭安全中心并不
如何在Windows 11中关闭安全中心
Mar 28, 2024 am 10:21 AM
Windows11是微软公司最新推出的操作系统版本，相比之前的版本，Windows11对系统安全性进行了更为严格的管理和监控，其中一个重要的功能就是安全中心。安全中心可以帮助用户管理和监控系统的安全状态，确保系统不受恶意软件和其他安全威胁的侵害。虽然安全中心对于保护系统安全很重要，但有时候用户可能因为个人需求或其他原因希望关闭安全中心。本文将介绍如何在W
快手怎么关闭免密支付 快手关闭免密支付方法教程
Mar 23, 2024 pm 09:21 PM
快手是一款很卓越的视频播放器，快手中的免密支付功能小伙伴们都非常熟悉，在日常生活中可以给我们很大的帮助，尤其是在平台中购买自己需要的商品时可以更好的去支付，我们现在要去取消掉该如何操作呢?怎么样才能真正有效取消掉免密支付功能?免密支付取消的方法非常简单，具体的操作方法已经整理好了，让我们一起到本站本站中来看整篇攻略吧，希望能够帮助到大家。快手关闭免密支付方法教程 1、打开快手app，点击左上角的三根横线。 2、点击快手小店。 3、在上面的选项栏中，找到免密支付并点击进去。 4、点击支
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
Windows安全中心实时保护关闭方法详解
Mar 27, 2024 pm 02:30 PM
Windows操作系统作为全球用户数量最庞大的操作系统之一，一直以来备受用户青睐。然而，在使用Windows系统时，用户们可能会遇到诸多安全隐患，如病毒攻击、恶意软件等威胁。为了强化系统安全，Windows系统内置了许多安全保护机制，其中之一便是Windows安全中心的实时保护功能。今天，我们将会详细介绍Windows安全中心实时保护的关闭方法。首先，让我们
opporeno5去哪关闭杜比全景声_禁用opporeno5杜比全景声方法
Mar 25, 2024 pm 04:41 PM
1、在手机设置中点击声音与振动。2、点击杜比全景音。3、将杜比全景声后面的开关关闭即可。
