Web Front-end
JS Tutorial
JS method to open, close and move a layer with buffering effect_javascript skills
JS method to open, close and move a layer with buffering effect_javascript skills
本文实例讲述了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程序设计有所帮助。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Where can I open the Douyin mini game? Two ways to open Douyin mini games
Mar 15, 2024 am 09:30 AM
Douyin is a popular short video social application. Users can not only watch and share various types of short video content, but also provide a series of mini games for you to play. So where can I get into Douyin mini-games? Where is the entrance to Douyin mini game? Let’s take a look at the detailed tutorial below. Method 1: Open the mini program 1. Click the My option. After entering the homepage of Douyin, click the My option to enter. 2. Click the three horizontal lines. After entering the My interface, click the three horizontal lines button above. 3. Click on the mini program. After opening the three horizontal lines option, click on the mini program inside. 4. Click on the Douyin Mini Game. After entering the mini program interface, click on the Douyin Mini Game option to open it. Method 2: Search and open 1. Click the magnifying glass to enter
How to turn off the ads recommended by 360 Browser? How to turn off ads recommended by 360 Browser on PC?
Mar 14, 2024 am 09:16 AM
How to turn off the ads recommended by 360 Browser? I believe that many users are using 360 Browser, but this browser sometimes pops up advertisements, which makes many users very distressed. Let this site carefully introduce to users how to Turn off the ads recommended by 360 Browser on your computer. How to turn off the ads recommended by 360 Browser on your computer? Method 1: 1. Open 360 Safe Browser. 2. Find the "three horizontal bars" logo in the upper right corner and click [Settings]. 3. Find [Lab] in the taskbar on the left side of the pop-up interface, and check [Enable "360 Hotspot Information" function]. Method 2: 1. First double-click
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
Detailed explanation of how to turn off Windows 11 Security Center
Mar 27, 2024 pm 03:27 PM
In the Windows 11 operating system, the Security Center is an important function that helps users monitor the system security status, defend against malware, and protect personal privacy. However, sometimes users may need to temporarily turn off Security Center, such as when installing certain software or performing system tuning. This article will introduce in detail how to turn off the Windows 11 Security Center to help you operate the system correctly and safely. 1. How to turn off Windows 11 Security Center In Windows 11, turning off the Security Center does not
How can I turn on the private message mode when the other party in the TikTok private message has turned off the private message mode? Can I see if the person I send a private message to has turned off the private message mode?
Mar 28, 2024 am 08:01 AM
Douyin is a popular short video social platform that allows users to simply record their lives and share their happiness. The private messaging function plays an important role in Douyin and is one of the main ways for users to interact with each other. Sometimes, users may encounter a situation where the other party has turned off the private message mode, resulting in the inability to send messages. 1. How can I turn on the private message mode if the other party in the Douyin private message has turned off the private message mode? 1. Confirm whether the other party has enabled privacy settings. First, we should confirm whether the other party has enabled privacy settings, which may have restricted the reception of private messages. If they have settings that only allow private messages from acquaintances, we can try to contact them through other means, such as through mutual friends or interactions on social media platforms. 2. Send a friend request. If the other party has not turned on privacy settings, then we
How to close password-free payment in Kuaishou Kuaishou tutorial on how to close password-free payment
Mar 23, 2024 pm 09:21 PM
Kuaishou is an excellent video player. The password-free payment function in Kuaishou is very familiar to everyone. It can be of great help to us in daily life, especially when purchasing the goods we need on the platform. Okay, let’s go and pay. Now we have to cancel it. How can we cancel it? How can we effectively cancel the password-free payment function? The method of canceling password-free payment is very simple. The specific operation methods have been sorted out. Let’s go through it together. Let’s take a look at the entire guide on this site, I hope it can help everyone. Tutorial on how to close password-free payment in Kuaishou 1. Open the Kuaishou app and click on the three horizontal lines in the upper left corner. 2. Click Kuaishou Store. 3. In the options bar above, find password-free payment and click on it. 4. Click to support
Detailed explanation of how to turn off real-time protection in Windows Security Center
Mar 27, 2024 pm 02:30 PM
As one of the operating systems with the largest number of users in the world, Windows operating system has always been favored by users. However, when using Windows systems, users may encounter many security risks, such as virus attacks, malware and other threats. In order to strengthen system security, Windows systems have many built-in security protection mechanisms, one of which is the real-time protection function of Windows Security Center. Today, we will introduce in detail how to turn off real-time protection in Windows Security Center. First, let's
Where to turn off Dolby Atmos in opporeno5_How to disable Dolby Atmos in opporeno5
Mar 25, 2024 pm 04:41 PM
1. Click Sound and Vibration in the phone settings. 2. Click Dolby Atmos. 3. Turn off the switch behind Dolby Atmos.
