JS로 구현한 스크롤바 효과(예제코드)
- 怪我咯원래의
- 2017-07-04 15:26:231514검색
이 글에서는 스크롤 막대 효과를 구현하는 JavaScript메소드를 주로 소개하며, 스크롤을 구현하기 위해 HTML 요소를 조작하는 자바스크립트와 관련된 기술은 매우 실용적인 가치가 있습니다.
이 글에서는 다음의 예를 설명합니다. 스크롤 막대 효과를 구현하는 JavaScript입니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#p1 ul{
position: absolute;
left: 0px;
top: 0px;
}
#p1 ul li img {
width: 187px;
height: 125px;
}
#p1 ul li{
float: left;
width: 187px;
height: 125px;
list-style: none;
}
#p1{
width: 748px;
height: 125px;
position: relative;
background-color: chartreuse;
overflow: hidden;
float: left;
}
#body{
width: 948px;
height: 125px;
margin: 100px auto;
}
#body #leftp{
float: left;
width: 100px;
height: 100px;
}
#body #rightp{
float: left;
width: 100px;
height: 100px;
}
#body #leftp button{
background-image: url("image/left.PNG");
width: 100px;
height: 100px;
}
#body #leftp button img{
width: 100px;
height: 100px;
}
#body #rightp button img{
width: 100px;
height: 100px;
}
</style>
<script>
window.onload=function(){
var op=document.getElementById('p1');
var oUl=op.getElementsByTagName('ul')[0];
var oLi=oUl.getElementsByTagName('li');
var oLeft=document.getElementById('leftp');
var oright=document.getElementById('rightp');
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';
var speed=-2;
function move(){
if (oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0';
}else if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
};
var timer=setInterval(move,30);
oLeft.onclick=function(){
speed=-2;
};
oright.onclick= function () {
speed=2;
};
oUl.onmouseover=function(){
clearInterval(timer);
};
oUl.onmouseout=function(){
timer=setInterval(move,30);
};
}
</script>
</head>
<body>
<p id="body">
<p id="leftp"><button><img src="image/left.PNG"/></button></p>
<p id="p1">
<ul>
<li><img src="image/1.JPG"/></li>
<li><img src="image/2.JPG"/></li>
<li><img src="image/3.JPG"/></li>
<li><img src="image/4.JPG"/></li>
</ul>
</p>
<p id="rightp"><button><img src="image/right.PNG"/></button></p>
</p>
</body>
</html>위 내용은 JS로 구현한 스크롤바 효과(예제코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.