search

Home >Web Front-end >JS Tutorial >Implement seamless scrolling and share to sidebar example code in JavaScript_javascript skills

Implement seamless scrolling and share to sidebar example code in JavaScript_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:06:281168browse

Without further ado, I will just post the code for you. The code will solve a problem!

The following code introduces you to the js seamless scrolling example code:

The code is as follows: 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0px;
padding:0px;}
#div1{width:830px; height:166px; margin:50px auto;
position:relative;
background:white;
overflow:hidden;}
#div1 ul li{float:left; width:174px; height:166px; list-style:none;
}
ul{position:absolute;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var speed=3
oUl.innerHTML=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=-3;
};
document.getElementsByTagName('a')[1].onclick=function(){
speed=3;
};
};
</script>
</head>
<body>
<a href="javascipt:;">向左走</a>
<a href="javascipt:;">向右走</a>
<div id="div1">
<ul>
<li><img src="images/b01.jpg" /></li>
<li><img src="images/b02.jpg" /></li>
<li><img src="images/b03.jpg" /></li>
<li><img src="images/b04.jpg" /></li>
<li><img src="images/b05.jpg" /></li>
</ul>
</div>
</body>
</html>

The js code for sharing to the sidebar is as follows:

The code is as follows: 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{width:100px; height:150px; background:#0F0; position:absolute; left:-100px;}
#div1 span{position:absolute; width:20px; height:60px; line-height:20px; background:#00F; right:-20px; top:50px;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(10,0);
}
oDiv.onmouseout =function(){
startMove(-10,-100);
}
}
var timer=null;
function startMove(speed,locall){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==locall){
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px'; 
}
},30);
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>

The above is the example code of implementing seamless scrolling and sharing to the sidebar in JavaScript introduced by the editor. The code is simple and easy to understand. If you have any questions, please leave me a message and the editor will reply to you in time!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery implements the merge function of HTML table cells_jqueryNext article：jQuery implements the merge function of HTML table cells_jquery

Related articles

See more