Artikel ini menjelaskan metode implementasi berbagi animasi sidebar dari kerangka gerak JS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> </title>
<type style = "text/css">
*{
margin: 0px;
padding: 0px;
}
#Div1 {
Lebar: 319px;
Tinggi: 340px;
Perbatasan: 1px solid #fff;
Posisi: Absolute;
Atas: 100px;
Kiri: -320px;
latar belakang-gambar: url (gambar/1.png);
Latar belakang-repeat: No-Repeat;
}
#Div1 span {
Lebar: 30px;
Tinggi: 130px;
Perbatasan: 1px Solid Blue;
Posisi: Absolute;
kanan: -23px;
Atas: 95px;
Latar Belakang: Merah;
Font-Family: "Microsoft Yahei";
Warna: #FFFFFF;
Teks-Align: tengah;
Line-Height: 40px;
Border-Radius: 0px 200px 200px 0px;
}
</tyle>
<type skrip = "Teks/JavaScript">
window.onload = function () {
var odiv = document.geteLementById ("div1");
var ospan = odiv.getElementsbyTagname ('span') [0];
var time = null;
var speed = 8;
odiv.onmouseover = function () {// Tambahkan ke seluruh div dengan mouse di acara
ClearInterval (waktu);
waktu = setInterval (function () {
if (odiv.offsetleft> = 0) {clearInterval (waktu);}
kalau tidak{
odiv.style.left = odiv.offsetleft+kecepatan+'px';
}
}, 1);
}
odiv.onmouseout = function () {// Tambahkan ke seluruh div untuk menghapus acara
ClearInterval (waktu);
waktu = setInterval (function () {
if (odiv.offsetleft <=-320) {clearInterval (time);}
kalau tidak{
odiv.style.left = odiv.offsetleft-speed+'px';
}
}, 1);
}
}
</script>
</head>
<body>
<Div id = "Div1">
<span> Bagikan ke </span>
</div>
</body>
</html>
Kode yang dioptimalkan:
Salin kode sebagai berikut: <! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> </title>
<type style = "text/css">
*{
margin: 0px;
padding: 0px;
}
#Div1 {
Lebar: 319px;
Tinggi: 340px;
Perbatasan: 1px solid #fff;
Posisi: Absolute;
Atas: 100px;
Kiri: -320px;
latar belakang-gambar: url (gambar/1.png);
Latar belakang-repeat: No-Repeat;
}
#Div1 span {
Lebar: 30px;
Tinggi: 130px;
Perbatasan: 1px Solid Blue;
Posisi: Absolute;
kanan: -23px;
Atas: 95px;
Latar Belakang: Merah;
Font-Family: "Microsoft Yahei";
Warna: #FFFFFF;
Teks-Align: tengah;
Line-Height: 40px;
Border-Radius: 0px 200px 200px 0px;
}
</tyle>
<type skrip = "Teks/JavaScript">
window.onload = function () {
var odiv = document.geteLementById ("div1");
var ospan = odiv.getElementsbyTagname ('span') [0];
var time = null;
var spe = 8;
var speed = null;
function move (bord) {
ClearInterval (waktu);
waktu = setInterval (function () {
if (odiv.offsetleft> bord) {speed = -spe;}
else {speed = spe;}
if (odiv.offsetleft == bord) {clearInterval (waktu);}
kalau tidak{
odiv.style.left = odiv.offsetleft+kecepatan+'px';
}
}, 1);
}
odiv.onmouseover = function () {// Tambahkan ke seluruh div dengan mouse di acara
pindahkan (0);
}
odiv.onmouseout = function () {// Tambahkan ke seluruh div untuk menghapus acara
pindahkan (-320);
}
}
</script>
</head>
<body>
<Div id = "Div1">
<span> Bagikan ke </span>
</div>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.