interface Web
js tutoriel
Méthode JS pour ouvrir, fermer et déplacer une couche avec des compétences de mise en mémoire tampon effect_javascript
Méthode JS pour ouvrir, fermer et déplacer une couche avec des compétences de mise en mémoire tampon effect_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程序设计有所帮助。
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment désactiver les publicités recommandées par 360 Browser ? Comment désactiver les publicités recommandées par 360 Browser sur PC ?
Mar 14, 2024 am 09:16 AM
Comment désactiver les publicités recommandées par 360 Browser ? Je pense que de nombreux utilisateurs utilisent 360 Browser, mais ce navigateur affiche parfois des publicités, ce qui rend de nombreux utilisateurs très angoissés. Laissez ce site présenter soigneusement aux utilisateurs comment désactiver les publicités recommandées par 360 Browser sur votre ordinateur. Comment désactiver les publicités recommandées par 360 Browser sur votre ordinateur ? Méthode 1 : 1. Ouvrez le navigateur 360 Safe. 2. Recherchez le logo « trois barres horizontales » dans le coin supérieur droit et cliquez sur [Paramètres]. 3. Recherchez [Lab] dans la barre des tâches sur le côté gauche de l'interface contextuelle et cochez [Activer la fonction « 360 Hotspot Information »]. Méthode 2 : 1. Double-cliquez d’abord
Où puis-je ouvrir le mini-jeu Douyin ? Deux façons d'ouvrir les mini-jeux Douyin
Mar 15, 2024 am 09:30 AM
Douyin est une application sociale de courtes vidéos populaire. Les utilisateurs peuvent non seulement regarder et partager divers types de contenus vidéo courts, mais également proposer une série de mini-jeux auxquels vous pouvez jouer. Alors, où puis-je accéder aux mini-jeux Douyin ? Où est l’entrée du mini-jeu Douyin ? Jetons un coup d'œil au didacticiel détaillé ci-dessous. Méthode 1 : Ouvrez le mini programme 1. Cliquez sur l'option Mon. Après être entré sur la page d'accueil de Douyin, cliquez sur l'option Mon pour entrer. 2. Cliquez sur les trois lignes horizontales. Après être entré dans l'interface Mon, cliquez sur le bouton des trois lignes horizontales ci-dessus. 3. Cliquez sur le mini programme. Après avoir ouvert l'option des trois lignes horizontales, cliquez sur le mini programme à l'intérieur. 4. Cliquez sur le mini-jeu Douyin. Après être entré dans l'interface du mini-programme, cliquez sur l'option Mini-jeu Douyin pour l'ouvrir. Méthode 2 : Rechercher et ouvrir 1. Cliquez sur la loupe pour entrer
Comment désactiver le Centre de sécurité dans Windows 11
Mar 28, 2024 am 10:21 AM
Windows 11 est la dernière version du système d'exploitation lancée par Microsoft. Par rapport aux versions précédentes, Windows 11 dispose d'une gestion et d'une surveillance plus strictes de la sécurité du système. L'une des fonctions importantes est le centre de sécurité. Security Center peut aider les utilisateurs à gérer et à surveiller l'état de sécurité du système pour garantir que le système est protégé contre les logiciels malveillants et autres menaces de sécurité. Bien que Security Center soit important pour protéger la sécurité du système, les utilisateurs peuvent parfois souhaiter désactiver Security Center pour des besoins personnels ou pour d'autres raisons. Cet article expliquera comment utiliser W
Explication détaillée sur la façon de désactiver le Centre de sécurité Windows 11
Mar 27, 2024 pm 03:27 PM
Dans le système d'exploitation Windows 11, le Centre de sécurité est une fonction importante qui aide les utilisateurs à surveiller l'état de sécurité du système, à se défendre contre les logiciels malveillants et à protéger la vie privée. Cependant, les utilisateurs peuvent parfois avoir besoin de désactiver temporairement Security Center, par exemple lors de l'installation de certains logiciels ou lors du réglage du système. Cet article présentera en détail comment désactiver le Centre de sécurité Windows 11 pour vous aider à utiliser le système correctement et en toute sécurité. 1. Comment désactiver le Centre de sécurité Windows 11 Sous Windows 11, la désactivation du Centre de sécurité ne
Comment fermer le paiement sans mot de passe dans Kuaishou Tutoriel Kuaishou sur la façon de fermer le paiement sans mot de passe
Mar 23, 2024 pm 09:21 PM
Kuaishou est un excellent lecteur vidéo. La fonction de paiement sans mot de passe de Kuaishou est très familière à tout le monde. Elle peut nous être d'une grande aide dans la vie quotidienne, en particulier lors de l'achat des produits dont nous avons besoin sur la plateforme. . Maintenant, nous devons l'annuler. Comment pouvons-nous l'annuler efficacement ? La méthode d'annulation du paiement sans mot de passe est très simple. Les méthodes d'opération spécifiques ont été triées. ensemble. Jetons un coup d’œil à l’intégralité du guide sur ce site, j’espère qu’il pourra aider tout le monde. Tutoriel sur la façon de fermer le paiement sans mot de passe dans Kuaishou 1. Ouvrez l'application Kuaishou et cliquez sur les trois lignes horizontales dans le coin supérieur gauche. 2. Cliquez sur Boutique Kuaishou. 3. Dans la barre d'options ci-dessus, recherchez le paiement sans mot de passe et cliquez dessus. 4. Cliquez pour soutenir
Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS
Apr 03, 2024 am 11:55 AM
La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web
Explication détaillée sur la façon de désactiver la protection en temps réel dans le Centre de sécurité Windows
Mar 27, 2024 pm 02:30 PM
En tant que l'un des systèmes d'exploitation comptant le plus grand nombre d'utilisateurs au monde, le système d'exploitation Windows a toujours été privilégié par les utilisateurs. Cependant, lorsqu'ils utilisent des systèmes Windows, les utilisateurs peuvent être confrontés à de nombreux risques de sécurité, tels que des attaques de virus, des logiciels malveillants et d'autres menaces. Afin de renforcer la sécurité du système, les systèmes Windows disposent de nombreux mécanismes de protection de sécurité intégrés, dont la fonction de protection en temps réel du Centre de sécurité Windows. Aujourd'hui, nous présenterons en détail comment désactiver la protection en temps réel dans le Centre de sécurité Windows. Tout d'abord, commençons
Comment puis-je activer le mode message privé lorsque l'autre partie dans le message privé TikTok a désactivé le mode message privé ? Puis-je voir si la personne à qui j'envoie un message privé a désactivé le mode message privé ?
Mar 28, 2024 am 08:01 AM
Douyin est une plate-forme sociale de courtes vidéos populaire qui permet aux utilisateurs d'enregistrer simplement leur vie et de partager leur bonheur. La fonction de messagerie privée joue un rôle important dans Douyin et constitue l'un des principaux moyens permettant aux utilisateurs d'interagir les uns avec les autres. Parfois, les utilisateurs peuvent rencontrer une situation dans laquelle l'autre partie a désactivé le mode de message privé, ce qui entraîne l'impossibilité d'envoyer des messages. 1. Comment puis-je activer le mode message privé si l'autre partie dans le message privé Douyin a désactivé le mode message privé ? 1. Confirmez si l'autre partie a activé les paramètres de confidentialité. Tout d'abord, nous devons confirmer si l'autre partie a activé les paramètres de confidentialité, ce qui peut avoir restreint la réception de messages privés. S'ils disposent de paramètres qui autorisent uniquement les messages privés de connaissances, nous pouvons essayer de les contacter par d'autres moyens, comme par le biais d'amis communs ou d'interactions sur les plateformes de réseaux sociaux. 2. Envoyez une demande d'ami. Si l'autre partie n'a pas activé les paramètres de confidentialité, nous
