jQuery中JS实现左右和上下的无缝滚动

最新推荐文章于 2022-04-14 15:52:40 发布

chuge70752

最新推荐文章于 2022-04-14 15:52:40 发布

阅读量959

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/1997109/blog/304393

版权

jQuery初学笔记1：实现无缝滚动

实现上下无缝滚动
要点：
1. 实现的时候要存在3个div块 2个层
2. scrollTop的是最外面的一个层，并且要有超出范围隐藏
3. 里面的2个块第一个有数据而第二个不定义当做备用
4. 必须给里面存在数据的第一个快定义高度和宽度

下面是代码：

<!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>

转载于:https://my.oschina.net/u/1997109/blog/304393

chuge70752

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery中JS实现左右和上下的无缝滚动

jQuery初学笔记1：实现无缝滚动实现上下无缝滚动要点：实现的时候要存在3个div块 2个层 scrollTop的是最外面的一个层，并且要有超出范围隐藏里面的2个块第一个有数据而第二个不定义当做备用必须给里面存在数据的第一个快定义高度...
复制链接

扫一扫