이 기사에서는 마우스가 통과 할 때 이미지 스크롤 스크롤을 실현하는 JS 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = gb2312" />
<title> 마우스가지나 가면 <a href = 'sitejs-16691-1.html'target = '_ blank'> <u> 이미지 스크롤 </u> </a> 정지 효과 </title>
</head>
<스타일 유형 = "텍스트/CSS">
<!-
#www_jb51_net {
배경 : #fff;
오버플로 : 숨겨진;
국경 : 1px 점선 #ccc;
너비 : 325px;
높이 : 245px;
}
#www_jb51_net img {
국경 : 3px 고체 #f2f2f2;
}
#indemo {
플로트 : 왼쪽;
너비 : 800%;
}
#demo1 {
플로트 : 왼쪽;
}
#demo2 {
플로트 : 왼쪽;
}
->
</스타일>
<body>
왼쪽으로 스크롤하십시오
<div id = "www_jb51_net">
<div id = "Indemo">
<div id = "demo1">
<a href = "#"> <img src = "images/m01.jpg"/> </a>
<a href = "#"> <img src = "images/m02.jpg"/> </a>
<a href = "#"> <img src = "images/m03.jpg"/> </a>
<a href = "#"> <img src = "images/m04.jpg"/> </a>
<a href = "#"> <img src = "images/m05.jpg"/> </a>
<a href = "#"> <img src = "images/m06.jpg"/> </a>
</div>
<div id = "demo2"> </div>
</div>
</div>
<cript>
<!-
var 속도 = 10;
var tab = document.getElementById ( "www_jb51_net");
var tab1 = document.getElementById ( "demo1");
var tab2 = document.getElementById ( "demo2");
tab2.innerhtml = tab1.innerhtml;
함수 marquee () {
if (tab2.offsetwidth-tab.scrollleft <= 0)
Tab.scrollleft- = tab1.offsetwidth
또 다른{
Tab.scrollleft ++;
}
}
var mymar = setInterval (marquee, speed);
tab.onmouseOver = function () {clearInterVal (mymar)};
tab.onmouseout = function () {mymar = setInterval (marquee, speed)};
->
</스크립트>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.