Web-Frontend
js-Tutorial
JS-Methode zum Öffnen, Schließen und Verschieben einer Ebene mit puffernden effect_javascript-Fähigkeiten
JS-Methode zum Öffnen, Schließen und Verschieben einer Ebene mit puffernden effect_javascript-Fähigkeiten
本文实例讲述了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程序设计有所帮助。
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Wie schalte ich die vom 360 Browser empfohlenen Anzeigen aus? Wie deaktiviere ich die vom 360-Browser empfohlenen Anzeigen auf dem PC?
Mar 14, 2024 am 09:16 AM
Wie schalte ich die vom 360 Browser empfohlenen Anzeigen aus? Ich glaube, dass viele Benutzer den 360-Browser verwenden, aber dieser Browser zeigt manchmal Werbung an, was viele Benutzer sehr verunsichert. Lassen Sie diese Website den Benutzern sorgfältig erklären, wie Sie die vom 360-Browser empfohlenen Anzeigen auf Ihrem Computer deaktivieren können. Wie schalte ich die vom 360-Browser empfohlenen Anzeigen auf Ihrem Computer aus? Methode 1: 1. Öffnen Sie den 360 Safe Browser. 2. Suchen Sie das Logo „drei horizontale Balken“ in der oberen rechten Ecke und klicken Sie auf [Einstellungen]. 3. Suchen Sie in der Taskleiste auf der linken Seite der Popup-Oberfläche nach [Lab] und aktivieren Sie die Funktion „360-Hotspot-Informationen aktivieren“. Methode 2: 1. Erster Doppelklick
Wo kann ich das Douyin-Minispiel öffnen? Zwei Möglichkeiten, Douyin-Minispiele zu öffnen
Mar 15, 2024 am 09:30 AM
Douyin ist eine beliebte soziale Kurzvideoanwendung. Benutzer können nicht nur verschiedene Arten von Kurzvideoinhalten ansehen und teilen, sondern auch eine Reihe von Minispielen zum Spielen bereitstellen. Wo kann ich also an Douyin-Minispielen teilnehmen? Wo ist der Eingang zum Douyin-Minispiel? Werfen wir einen Blick auf das ausführliche Tutorial unten. Methode 1: Öffnen Sie das Miniprogramm. 1. Klicken Sie auf die Option „Mein“. Nachdem Sie die Homepage von Douyin aufgerufen haben, klicken Sie auf die Option „Mein“. 2. Klicken Sie auf die drei horizontalen Linien. Klicken Sie nach dem Öffnen der Benutzeroberfläche oben auf die Schaltfläche mit den drei horizontalen Linien. 3. Klicken Sie auf das Miniprogramm. Nachdem Sie die Option mit den drei horizontalen Linien geöffnet haben, klicken Sie auf das Miniprogramm darin. 4. Klicken Sie auf das Douyin-Minispiel. Nachdem Sie die Mini-Programmoberfläche aufgerufen haben, klicken Sie auf die Option „Douyin-Minispiel“, um es zu öffnen. Methode 2: Suchen und öffnen 1. Klicken Sie zum Betreten auf die Lupe
So deaktivieren Sie das Sicherheitscenter in Windows 11
Mar 28, 2024 am 10:21 AM
Windows 11 ist die neueste von Microsoft eingeführte Betriebssystemversion. Im Vergleich zu früheren Versionen verfügt Windows 11 über eine strengere Verwaltung und Überwachung der Systemsicherheit. Eine der wichtigen Funktionen ist das Sicherheitscenter. Security Center kann Benutzern dabei helfen, den Sicherheitsstatus des Systems zu verwalten und zu überwachen, um sicherzustellen, dass das System vor Malware und anderen Sicherheitsbedrohungen geschützt ist. Obwohl Security Center für den Schutz der Systemsicherheit wichtig ist, möchten Benutzer das Security Center manchmal aus persönlichen Gründen oder aus anderen Gründen deaktivieren. In diesem Artikel wird die Verwendung von W vorgestellt
Ausführliche Erklärung zum Deaktivieren des Windows 11-Sicherheitscenters
Mar 27, 2024 pm 03:27 PM
Im Betriebssystem Windows 11 ist das Sicherheitscenter eine wichtige Funktion, die Benutzern hilft, den Sicherheitsstatus des Systems zu überwachen, sich gegen Malware zu verteidigen und die Privatsphäre zu schützen. Manchmal müssen Benutzer das Sicherheitscenter jedoch möglicherweise vorübergehend deaktivieren, beispielsweise wenn sie bestimmte Software installieren oder eine Systemoptimierung durchführen. In diesem Artikel erfahren Sie im Detail, wie Sie das Windows 11-Sicherheitscenter deaktivieren, damit Sie das System korrekt und sicher bedienen können. 1. So schalten Sie das Sicherheitscenter von Windows 11 aus Unter Windows 11 funktioniert das Ausschalten des Sicherheitscenters nicht
So schließen Sie die passwortfreie Zahlung in Kuaishou. Kuaishou-Tutorial zum Schließen der passwortfreien Zahlung
Mar 23, 2024 pm 09:21 PM
Kuaishou ist ein ausgezeichneter Videoplayer, der uns im täglichen Leben sehr helfen kann, insbesondere beim Kauf der benötigten Waren auf der Plattform . Jetzt müssen wir es abbrechen. Wie können wir die passwortfreie Zahlung effektiv abbrechen? Werfen wir einen Blick auf den gesamten Leitfaden auf dieser Website. Ich hoffe, er kann allen helfen. Anleitung zum Schließen der passwortfreien Zahlung in Kuaishou 1. Öffnen Sie die Kuaishou-App und klicken Sie auf die drei horizontalen Linien in der oberen linken Ecke. 2. Klicken Sie auf Kuaishou Store. 3. Suchen Sie in der Optionsleiste oben nach „Passwortfreie Zahlung“ und klicken Sie darauf. 4. Klicken Sie, um zu unterstützen
Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung
Apr 03, 2024 am 11:55 AM
Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert
Ausführliche Erklärung zum Deaktivieren des Echtzeitschutzes im Windows-Sicherheitscenter
Mar 27, 2024 pm 02:30 PM
Als eines der Betriebssysteme mit der größten Benutzerzahl weltweit wurde das Windows-Betriebssystem schon immer von den Benutzern bevorzugt. Bei der Verwendung von Windows-Systemen können Benutzer jedoch mit zahlreichen Sicherheitsrisiken konfrontiert werden, wie z. B. Virenangriffen, Malware und anderen Bedrohungen. Um die Systemsicherheit zu stärken, verfügen Windows-Systeme über zahlreiche integrierte Sicherheitsschutzmechanismen, darunter die Echtzeitschutzfunktion des Windows Security Center. Heute stellen wir Ihnen im Detail vor, wie Sie den Echtzeitschutz im Windows-Sicherheitscenter deaktivieren. Lassen Sie uns zunächst einmal
Wie kann ich den privaten Nachrichtenmodus aktivieren, wenn die andere Partei in der privaten TikTok-Nachricht den privaten Nachrichtenmodus deaktiviert hat? Kann ich sehen, ob die Person, der ich eine private Nachricht sende, den privaten Nachrichtenmodus deaktiviert hat?
Mar 28, 2024 am 08:01 AM
Douyin ist eine beliebte soziale Kurzvideoplattform, die es Benutzern ermöglicht, einfach ihr Leben aufzuzeichnen und ihr Glück zu teilen. Die private Nachrichtenfunktion spielt in Douyin eine wichtige Rolle und ist eine der wichtigsten Möglichkeiten für Benutzer, miteinander zu interagieren. Manchmal kann es vorkommen, dass die andere Partei den privaten Nachrichtenmodus deaktiviert hat, was dazu führt, dass keine Nachrichten gesendet werden können. 1. Wie kann ich den privaten Nachrichtenmodus aktivieren, wenn die andere Partei in der privaten Douyin-Nachricht den privaten Nachrichtenmodus deaktiviert hat? 1. Bestätigen Sie, ob die andere Partei Datenschutzeinstellungen aktiviert hat. Zunächst sollten wir überprüfen, ob die andere Partei Datenschutzeinstellungen aktiviert hat, die möglicherweise den Empfang privater Nachrichten eingeschränkt haben. Wenn sie Einstellungen haben, die nur private Nachrichten von Bekannten zulassen, können wir versuchen, sie auf andere Weise zu kontaktieren, beispielsweise über gemeinsame Freunde oder Interaktionen auf Social-Media-Plattformen. 2. Senden Sie eine Freundschaftsanfrage, wenn die andere Partei die Datenschutzeinstellungen nicht aktiviert hat
