Javascript로 그림 스크롤 원활화
4414 단어 Javascript그림원활한 스크롤
왼쪽이나 오른쪽으로 스크롤 조정 가능
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
overflow: hidden;
width: 712px;
height: 108px;
margin: 100px auto;
position: relative;
background: red;
}
#div1 ul {
position: absolute;
left: 0;
top: 0;
}
#div1 ul li {
float: left;
width: 178px;
height: 108px;
list-style: none;
}
</style>
<body>
<a href="javascript:;"> </a>
<a href="javascript:;"> </a>
<div id="div1">
<ul>
<li>
<img src="img/ /1.jpg" />
</li>
<li>
<img src="img/ /2.jpg" />
</li>
<li>
<img src="img/ /3.jpg" />
</li>
<li>
<img src="img/ /4.jpg" />
</li>
</ul>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById("div1");
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var speed = 2;
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
function move() {
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = '0';
}
if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + 'px';
}
oUl.style.left = oUl.offsetLeft + speed + 'px';
}
var timer = setInterval(move, 30);
oDiv.onmouseover = function() {
clearInterval(timer);
};
oDiv.onmouseout = function() {
timer = setInterval(move, 30);
};
document.getElementsByTagName('a')[0].onclick = function() {
speed = -2;
};
document.getElementsByTagName('a')[1].onclick = function() {
speed = 2;
};
}
</script>
우선 울 안에 있는 그림은 모두 8장의 올이 있습니다.innerHTML += oUl.innerHTML;
l의 너비를 계산하는 실제 너비*8
나중에 쓸데없는 내용을 숨기기
참고: oUl.offsetLeft는 마이너스 값입니다.
그러니까 판단할 때 마이너스를 빼지 마세요.
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = '0';
}
마지막으로 변수 스피드를 사용하여 좌우 방향의 스크롤을 제어합니다.
상기 코드는 단지 가장 기본적인 기능을 실현했을 뿐, 젊은이들은 이를 바탕으로 계속 보완할 수 있다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript에서 Math.max와 Math.max.apply의 차이점과 용법 상세 설명최근에 작은 사례를 만들 때 Math를 만났어요.max.apply라는 용법은 이전에 보기 드물게 재미있게 느껴졌으니 기록해 보세요. 1Math.max 문법:Math.max(n1,n2,n3,...,nX)반환값:max(...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
