В этой статье описывается метод реализации обмена анимацией боковой панели JS Motion Framework. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<title> </title>
<стиль типа = "text/css">
*{
поля: 0px;
Заполнение: 0px;
}
#div1 {
Ширина: 319px;
Высота: 340px;
Граница: 1px solid #fff;
позиция: абсолютно;
Верх: 100px;
Слева: -320px;
Фоно-изображение: URL (Images/1.png);
Восновная переписка: без повторения;
}
#div1 span {
Ширина: 30px;
Высота: 130px;
Граница: 1px твердый синий;
позиция: абсолютно;
Справа: -23px;
Верх: 95px;
Фон: красный;
Фондовая семья: «Microsoft Yahei»;
Цвет: #ffffff;
Текст-альбом: Центр;
высота линии: 40px;
граница-радий: 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 (время);}
еще{
ODIV.STYLE.LEFT = ODIV.OFFSETLEFT+SPEED+'PX';
}
}, 1);
}
ODIV.Onmouseout = function () {// Добавить во весь Div, чтобы удалить событие
ClearInterval (время);
time = setInterval (function () {
if (Odiv.OffSetleft <=-320) {clearInterval (время);}
еще{
ODIV.STYLE.LEFT = ODIV.OFFSETLEFT-SPEED+'PX';
}
}, 1);
}
}
</script>
</head>
<тело>
<div id = "div1">
<pran> поделиться </span>
</div>
</body>
</html>
Оптимизированный код:
Скопируйте код следующим образом: <! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<title> </title>
<стиль типа = "text/css">
*{
поля: 0px;
Заполнение: 0px;
}
#div1 {
Ширина: 319px;
Высота: 340px;
Граница: 1px solid #fff;
позиция: абсолютно;
Верх: 100px;
Слева: -320px;
Фоно-изображение: URL (Images/1.png);
Восновная переписка: без повторения;
}
#div1 span {
Ширина: 30px;
Высота: 130px;
Граница: 1px твердый синий;
позиция: абсолютно;
Справа: -23px;
Верх: 95px;
Фон: красный;
Фондовая семья: «Microsoft Yahei»;
Цвет: #ffffff;
Текст-альбом: Центр;
высота линии: 40px;
граница-радий: 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;}
else {speed = spe;}
if (Odiv.Offsetleft == Bord) {clearInterval (время);}
еще{
ODIV.STYLE.LEFT = ODIV.OFFSETLEFT+SPEED+'PX';
}
}, 1);
}
Odiv.onmouseover = function () {// Добавить во весь Div с мышью в событии
Движение (0);
}
ODIV.Onmouseout = function () {// Добавить во весь Div, чтобы удалить событие
ход (-320);
}
}
</script>
</head>
<тело>
<div id = "div1">
<pran> поделиться </span>
</div>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.