이 기사에서는 JS 모션 프레임 워크의 사이드 바 애니메이션을 공유하는 구현 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<제목> </title>
<스타일 유형 = "텍스트/CSS">
*{
여백 : 0px;
패딩 : 0px;
}
#div1 {
너비 : 319px;
높이 : 340px;
테두리 : 1px 고체 #fff;
위치 : 절대;
상단 : 100px;
왼쪽 : -320px;
배경 이미지 : URL (images/1.png);
배경 반복 : 비 반복;
}
#div1 span {
너비 : 30px;
높이 : 130px;
테두리 : 1px 솔리드 블루;
위치 : 절대;
오른쪽 : -23px;
상단 : 95px;
배경 : 빨간색;
Font-Family : "Microsoft Yahei";
색상 : #ffffff;
텍스트 정렬 : 센터;
라인 높이 : 40px;
Border-Radius : 0px 200px 200px 0px;
}
</스타일>
<script type = "text/javaScript">
Window.onload = function () {
var odiv = document.getElementById ( "div1");
var ospan = odiv.getElementsByTagName ( 'span') [0];
var time = null;
var 속도 = 8;
odiv.onmouseover = function () {// 이벤트에서 마우스가있는 전체 div에 추가하십시오
ClearInterval (시간);
time = setInterval (function () {
if (odiv.offsetleft> = 0) {clearinterval (시간);}
또 다른{
odiv.style.left = odiv.offsetleft+속도+'px';
}
}, 1);
}
odiv.onmouseout = function () {// 전체 div에 추가하여 이벤트를 제거합니다
ClearInterval (시간);
time = setInterval (function () {
if (odiv.offsetleft <= -320) {clearinterval (시간);}
또 다른{
odiv.style.left = odiv.offsetleft-speed+'px';
}
}, 1);
}
}
</스크립트>
</head>
<body>
<div id = "div1">
<span> 공유 </span>
</div>
</body>
</html>
최적화 된 코드 :
다음과 같이 코드를 복사하십시오. <! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<제목> </title>
<스타일 유형 = "텍스트/CSS">
*{
여백 : 0px;
패딩 : 0px;
}
#div1 {
너비 : 319px;
높이 : 340px;
테두리 : 1px 고체 #fff;
위치 : 절대;
상단 : 100px;
왼쪽 : -320px;
배경 이미지 : URL (images/1.png);
배경 반복 : 비 반복;
}
#div1 span {
너비 : 30px;
높이 : 130px;
테두리 : 1px 솔리드 블루;
위치 : 절대;
오른쪽 : -23px;
상단 : 95px;
배경 : 빨간색;
Font-Family : "Microsoft Yahei";
색상 : #ffffff;
텍스트 정렬 : 센터;
라인 높이 : 40px;
Border-Radius : 0px 200px 200px 0px;
}
</스타일>
<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 속도 = 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+속도+'px';
}
}, 1);
}
odiv.onmouseover = function () {// 이벤트에서 마우스가있는 전체 div에 추가하십시오
이동 (0);
}
odiv.onmouseout = function () {// 전체 div에 추가하여 이벤트를 제거합니다
이동 (-320);
}
}
</스크립트>
</head>
<body>
<div id = "div1">
<span> 공유 </span>
</div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.