Este artigo descreve o método de implementação de compartilhar a animação da barra lateral da estrutura de movimento JS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<Title> </title>
<style type = "text/css">
*{
margem: 0px;
preenchimento: 0px;
}
#div1 {
Largura: 319px;
Altura: 340px;
borda: 1px sólido #fff;
Posição: Absoluto;
topo: 100px;
Esquerda: -320px;
Imagem de fundo: URL (imagens/1.png);
Repetição de fundo: sem repetição;
}
#div1 span {
Largura: 30px;
Altura: 130px;
borda: 1px azul sólido;
Posição: Absoluto;
Direita: -23px;
Top: 95px;
Antecedentes: vermelho;
Fonte-família: "Microsoft Yahei";
Cor: #ffffff;
Alinhamento de texto: centro;
altura da linha: 40px;
Radio de fronteira: 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 velocidade = 8;
odiv.onMouseOver = function () {// Adicione a toda a div com mouse no evento
ClearInterval (tempo);
time = setInterval (function () {
if (odiv.OffSetLeft> = 0) {ClearInterval (tempo);}
outro{
odiv.style.left = odiv.offsetleft+velocidade+'px';
}
}, 1);
}
odiv.onMouseOut = function () {// Adicione a toda a div para remover o evento
ClearInterval (tempo);
time = setInterval (function () {
if (odiv.offsetleft <=-320) {clearInterval (tempo);}
outro{
odiv.style.left = odiv.offsetleft-speed+'px';
}
}, 1);
}
}
</script>
</head>
<Body>
<div id = "div1">
<span> compartilhe com </span>
</div>
</body>
</html>
Código otimizado:
Copie o código da seguinte forma: <! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<Title> </title>
<style type = "text/css">
*{
margem: 0px;
preenchimento: 0px;
}
#div1 {
Largura: 319px;
Altura: 340px;
borda: 1px sólido #fff;
Posição: Absoluto;
topo: 100px;
Esquerda: -320px;
Imagem de fundo: URL (imagens/1.png);
Repetição de fundo: sem repetição;
}
#div1 span {
Largura: 30px;
Altura: 130px;
borda: 1px azul sólido;
Posição: Absoluto;
Direita: -23px;
Top: 95px;
Antecedentes: vermelho;
Fonte-família: "Microsoft Yahei";
Cor: #ffffff;
Alinhamento de texto: centro;
altura da linha: 40px;
Radio de fronteira: 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 velocidade = nulo;
função move (bord) {
ClearInterval (tempo);
time = setInterval (function () {
if (odiv.offsetleft> bord) {speed = -spe;}
else {speed = spe;}
if (odiv.OffSetLeft == Bord) {ClearInterval (tempo);}
outro{
odiv.style.left = odiv.offsetleft+velocidade+'px';
}
}, 1);
}
odiv.onMouseOver = function () {// Adicione a toda a div com mouse no evento
mover (0);
}
odiv.onMouseOut = function () {// Adicione a toda a div para remover o evento
mover (-320);
}
}
</script>
</head>
<Body>
<div id = "div1">
<span> compartilhe com </span>
</div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.