효과:
아이디어:
이동에는 setInterval 타이머를 사용하고, 너비를 변경하려면 offsetWidth를 사용하고, 이동을 버퍼링하기 전에 onmouseover를 사용하여 끝점과 선택한 DIV를 매개변수에 넣습니다.
암호:
다음과 같이 코드 코드를 복사합니다.
<head runat="서버">
<제목></제목>
<스타일 유형="텍스트/css">
div
{
너비: 100px;
높이: 50px;
배경: #0000FF;
여백: 10px;
}
</style>
<스크립트 유형="텍스트/자바스크립트">
window.onload = 함수() {
var oDiv = document.getElementsByTagName('div');
for (var i = 0; i < oDiv.length; i++) {
oDiv[i].timer = null; //해당 DIV의 타이머를 닫는 DIV를 표시합니다.
oDiv[i].onmouseover = 함수 () {
move(this, 400); //타이머 출력 매개변수 제공
}
oDiv[i].onmouseout = 함수 () {
move(this, 100);
}
}
};
함수 이동(div, 끝) {
ClearInterval(div.timer);
div.timer = setInterval(함수 () {
var speed = (end - div.offsetWidth) / 5; // (end - 이동할 너비) / 배율 = DIV 이동 속도
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 소수점 반올림, 즉 캐리를 사용한 반올림
if (div.offsetWidth == end) { //끝에 도달하면 타이머를 닫습니다.
ClearInterval(div.timer);
}
또 다른 {
div.style.width = div.offsetWidth + speed + 'px' //DIV 너비 이동;
}
}, 30)
}
</script>
</head>
<본문>
<div>
</div>
<div>
</div>
<div>
</div>
</body>