تصف هذه المقالة طريقة التنفيذ لمشاركة الرسوم المتحركة للشريط الجانبي لإطار عمل JS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز كما يلي: <! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> </title>
<type type = "text/css">
*{
الهامش: 0px ؛
الحشو: 0px ؛
}
#div1 {
العرض: 319px ؛
الارتفاع: 340 بكسل ؛
الحدود: 1px الصلبة #FFF ؛
الموقف: مطلق ؛
أعلى: 100px ؛
اليسار: -320px ؛
صورة الخلفية: url (الصور/1.png) ؛
تكرار الخلفية: عدم التكرار ؛
}
#Div1 Span {
العرض: 30 بكسل ؛
الارتفاع: 130 بكسل ؛
الحدود: 1 بكسل الأزرق الصلب.
الموقف: مطلق ؛
اليمين: -23px ؛
أعلى: 95 بكسل ؛
الخلفية: أحمر.
Font-Family: "Microsoft Yahei" ؛
اللون: #ffffff ؛
محاذاة النص: المركز ؛
رفع الخط: 40 بكسل ؛
الحدود الراديوس: 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 () {// أضف إلى Div بأكمله مع الماوس في الحدث
ClearInterval (الوقت) ؛
time = setInterval (function () {
if (odiv.offsetleft> = 0) {clearinterval (time) ؛}
آخر{
Odiv.Style.Left = Odiv.offSetLeft+Speed+'Px' ؛
}
} ، 1) ؛
}
odiv.onmouseout = function () {// أضف إلى Div بأكمله لإزالة الحدث
ClearInterval (الوقت) ؛
time = setInterval (function () {
if (odiv.offsetleft <=-320) {clearinterval (time) ؛}
آخر{
Odiv.Style.Left = Odiv.offSetLeft-aped+'px' ؛
}
} ، 1) ؛
}
}
</script>
</head>
<body>
<div id = "div1">
<span> مشاركة إلى </span>
</div>
</body>
</html>
الرمز الأمثل:
انسخ الرمز كما يلي: <! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> </title>
<type type = "text/css">
*{
الهامش: 0px ؛
الحشو: 0px ؛
}
#div1 {
العرض: 319px ؛
الارتفاع: 340 بكسل ؛
الحدود: 1px الصلبة #FFF ؛
الموقف: مطلق ؛
أعلى: 100px ؛
اليسار: -320px ؛
صورة الخلفية: url (الصور/1.png) ؛
تكرار الخلفية: عدم التكرار ؛
}
#Div1 Span {
العرض: 30 بكسل ؛
الارتفاع: 130 بكسل ؛
الحدود: 1 بكسل الأزرق الصلب.
الموقف: مطلق ؛
اليمين: -23px ؛
أعلى: 95 بكسل ؛
الخلفية: أحمر.
Font-Family: "Microsoft Yahei" ؛
اللون: #ffffff ؛
محاذاة النص: المركز ؛
رفع الخط: 40 بكسل ؛
الحدود الراديوس: 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 ؛
حركة الوظيفة (bord) {
ClearInterval (الوقت) ؛
time = setInterval (function () {
if (odiv.offsetleft> bord) {speed = -spe ؛}
آخر {speed = spe ؛}
if (odiv.offsetleft == bord) {clearinterval (time) ؛}
آخر{
Odiv.Style.Left = Odiv.offSetLeft+Speed+'Px' ؛
}
} ، 1) ؛
}
odiv.onmouseover = function () {// أضف إلى Div بأكمله مع الماوس في الحدث
تحرك (0) ؛
}
odiv.onmouseout = function () {// أضف إلى Div بأكمله لإزالة الحدث
تحرك (-320) ؛
}
}
</script>
</head>
<body>
<div id = "div1">
<span> مشاركة إلى </span>
</div>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.