Cet article décrit la méthode de mise en œuvre de partage de l'animation de la barre latérale de JS Motion Framework. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> </Title>
<style type = "text / css">
* {
marge: 0px;
rembourrage: 0px;
}
# div1 {
Largeur: 319px;
hauteur: 340px;
Border: 1px solide #fff;
Position: absolue;
En haut: 100px;
Gauche: -320px;
Image d'arrière-plan: URL (images / 1.png);
République de fond: sans répétition;
}
# div1 span {
Largeur: 30px;
hauteur: 130px;
Border: 1px bleu massif;
Position: absolue;
à droite: -23px;
En haut: 95px;
Contexte: rouge;
Font-Family: "Microsoft Yahei";
Couleur: #ffffff;
Texte-aligne: Centre;
hauteur de ligne: 40px;
Border-Radius: 0px 200px 200px 0px;
}
</ style>
<script type = "text / javascript">
window.onload = function () {
var odiv = document.getElementById ("div1");
var ospan = odiv.getElementsByTAGName ('span') [0];
var time = null;
Var Speed = 8;
odiv.onmouseOver = function () {// Ajouter à l'ensemble de la souris avec la souris en événement
ClearInterval (temps);
time = setInterval (function () {
if (odiv.offsetleft> = 0) {ClearInterval (time);}
autre{
odiv.style.left = odiv.offsetleft + speed + 'px';
}
}, 1);
}
odiv.onmouseout = function () {// ajouter à l'intégralité de la div pour supprimer l'événement
ClearInterval (temps);
time = setInterval (function () {
if (odiv.offsetleft <= - 320) {ClearInterval (Time);}
autre{
odiv.style.left = odiv.offsetleft-speed + 'px';
}
}, 1);
}
}
</cript>
</ head>
<body>
<div id = "div1">
<span> Partagez à </span>
</div>
</docy>
</html>
Code optimisé:
Copiez le code comme suit: <! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> </Title>
<style type = "text / css">
* {
marge: 0px;
rembourrage: 0px;
}
# div1 {
Largeur: 319px;
hauteur: 340px;
Border: 1px solide #fff;
Position: absolue;
En haut: 100px;
Gauche: -320px;
Image d'arrière-plan: URL (images / 1.png);
République de fond: sans répétition;
}
# div1 span {
Largeur: 30px;
hauteur: 130px;
Border: 1px bleu massif;
Position: absolue;
à droite: -23px;
En haut: 95px;
Contexte: rouge;
Font-Family: "Microsoft Yahei";
Couleur: #ffffff;
Texte-aligne: Centre;
hauteur de ligne: 40px;
Border-Radius: 0px 200px 200px 0px;
}
</ style>
<script type = "text / javascript">
window.onload = function () {
var odiv = document.getElementById ("div1");
var ospan = odiv.getElementsByTAGName ('span') [0];
var time = null;
var spe = 8;
Var Speed = NULL;
Fonction Move (Bord) {
ClearInterval (temps);
time = setInterval (function () {
if (odiv.offsetleft> bord) {Speed = -Spe;}
else {speed = spe;}
if (odiv.offsetleft == bord) {clearInterval (time);}
autre{
odiv.style.left = odiv.offsetleft + speed + 'px';
}
}, 1);
}
odiv.onmouseOver = function () {// Ajouter à l'ensemble de la souris avec la souris en événement
déplacer (0);
}
odiv.onmouseout = function () {// ajouter à l'intégralité de la div pour supprimer l'événement
déplacer (-320);
}
}
</cript>
</ head>
<body>
<div id = "div1">
<span> Partagez à </span>
</div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.