jQuery初学笔记1:实现无缝滚动
实现上下无缝滚动
要点:
实现的时候 要存在3个div块 2个层
scrollTop的是最外面的一个层,并且要有超出范围隐藏
里面的2个块 第一个有数据 而第二个 不定义 当做备用
必须给里面存在数据的第一个快定义高度和宽度
下面是代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实现文字的上下滚动</title>
<script>
//等页面加载完之后,实行下面方法
window.onload=function(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var div3=document.getElementById("div3");
div3.innerHTML=div2.innerHTML;
}
//上下运行的方法
function moveTop(){
//offsetHeight实际高度(包含了隐藏的) scrollTop 滚动了多少高度
//因为div3的高度和div2的高度一致,但是只能获取到div2的高度,所有当div3的实际高度滚完
//判断是否div1滚的高度和div3的实际高度一致 如果一致的话 说明div3已经滚完了
//那么让div1.scrollTop 重新为0 即 重新滚动
if(div2.offsetHeight-div1.scrollTop==0){
div1.scrollTop=0;
}
div1.scrollTop++;
}
//定义一个定时器;
window.setInterval("moveTop()",50);
</script>
<style>
*{
padding:0px;
margin:0px auto;
}
body{
padding:0px;
margin:0px auto;
}
#div1{
width:200px;
height:200px;
border:1px solid #0F3;
overflow:hidden;
}
#div2{
width:200px;
border:1px solid #F00;
}
#div1 li{
list-style:none;
text-align:center;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<ul>
<li>开头</li>
<li>实现文字的上下滚动</li>
<li>实现文字的上下滚动</li>
<li>实现文字的上下滚动</li>
<li>实现文字的上下滚动</li>
<li>实现文字的上下滚动</li>
<li>实现文字的上下滚动</li>
<li>实现文字的上下滚动</li>
<li>实现文字的上下滚动</li>
<li>实现文字的上下滚动</li>
<li>实现文字的上下滚动</li>
<li>结尾</li>
</ul>
</div>
<div id="div3"></div>
</div>
</body>
</html>
2.实现图片的左右无缝滚动
a.左右无缝滚动与上下有些不同,左右无缝滚动 采用2个层2个块
b.将内容快中的内容复制一份放在后面,所以必须找个内容快的长度要很长
c.同样滚动的是外面的一个大层
下面是代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实现图片的上下滚动</title>
<script>
//页面加载完之后运行
window.onload=function(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var imghtml=div2.innerHTML; //div2中的内容
div2.innerHTML=imghtml+imghtml; //复制div2中的内容放在后面
}
function moveLeft(){
if((div1.scrollLeft)>=(div2.offsetWidth/2)){
div1.scrollLeft=0;
}
div1.scrollLeft++;
}
window.setInterval("moveLeft()",10);
</script>
<style>
*{
padding:0px;
margin:0px auto;
}
body{
padding:0px;
margin:0px auto;
}
#div1{
width:500px;
height:100px;
border:1px solid #0F0;
overflow:hidden;
}
#div2{
width:1200px;
height:100px;
}
#div2 li{
list-style:none;
float:left;
}
#div2 img{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<ul>
<li><img src="../js5/images/a.jpg"</li>
<li><img src="../js5/images/b.jpg"</li>
<li><img src="../js5/images/c.jpg"</li>
<li><img src="../js5/images/d.jpg"</li>
<li><img src="../js5/images/e.jpg"</li>
<li><img src="../js5/images/f.jpg"</li>
</ul>
</div>
</div>
</body>
</html>