js实现的新闻列表垂直滚动实现详解

时间：2023-02-18 08:11:00

js实现的新闻列表垂直滚动实现详解:
新闻列表垂直滚动效果在大量的网站都有应用，有点自然是不言而喻的，首先由于网页的空间有限，使用滚动代码可以使用最小的空间提供更多的信息量，还有让网页有了动态的效果，更为美观一些，下面就通过代码实例详细介绍一下如何实现此效果。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
body  
{
  margin:0px;
  padding:0px;
}
#express li  
{
  height:25px;
  border-bottom:dashed 1px #999;
  line-height:20px;
  font-size:12px;
  list-style:none;
}
#demo  
{
  height:255px;
  overflow:hidden;
  margin-top:0px;
}
#book_class  
{
  width:200px;
  height:260px;
  border:3px solid #999;
  margin-left:auto;
  margin-right:auto;
  margin-top:70px;
  border-radius:5px 5px 5px 5px;
  box-shadow:0px 0px 10px 10px #CECED1;
}
#express  
{
  margin-left:-30px;
  margin-right:10px;
  margin-bottom:0px;
  margin-top:0px;
}
#book_class div div ul li a  
{
  text-decoration:none;
  color:#333333;
}
#book_class div div ul li a:hover {text-decoration:underline;}
</style>
<script type="text/javascript">  
var speed=50;
var timer=null;
window.onload=function()
{
  var demo=document.getElementById("demo");  
  var demo1=document.getElementById("demo1");  
  var demo2=document.getElementById("demo2");  
  demo2.innerHTML=demo1.innerHTML;   
  function moveTop()
  {  
    if(demo1.offsetHeight-demo.scrollTop<=0)
    {  
      demo.scrollTop=0;  
    }
    else
    {  
      demo.scrollTop++;  
    }  
  }
  timer=setInterval(moveTop,speed);   
  demo.onmouseover=function(){clearInterval(timer);}  
  demo.onmouseout=function(){timer=setInterval(moveTop,speed);}  
}
</script>
</head>
<body>
<div id="book_class">
  <div id="demo">
    <div id="demo1">
      <ul id="express">
        <li><a href="#">·蚂蚁部落欢迎您...</a></li>
        <li><a href="#">·努力奋斗才会有美好的明天...</a></li>
        <li><a href="#">·没有人一开始就是高手...</a></li>
        <li><a href="#">·分享和互助神是进步动力...</a></li>
        <li><a href="#">·每一天都是新的，把握现在...</a></li>
        <li><a href="#">·太阳出来了，好好享受生活...</a></li>
        <li><a href="#">·新的一年里在各年都有进步...</a></li>
        <li><a href="#">·网站的进步离不开大家的支持</a></li>
        <li><a href="#">·人人都有可贵之处，在于发现</a></li>
        <li><a href="#">·则是新闻的最后一条</a></li>
      </ul>
    </div>
    <div id="demo2"></div>
  </div>
</div>
</body>

</html>

以上代码实现了我们的要求，新闻列表可以不间断垂直滚动效果，下面介绍一下它的实现过程。
一.代码注释:
1.var speed=50,设置新闻列表的滚动速度，数字越大滚动越慢。
2.var timer=null，声明一个变量并赋值null，此变量为了存储定时器函数setInterva()函数的返回值。
3.window.onload=function(){}，当稳当内容完全加载完毕再去执行函数中的代码。
4.var demo=document.getElementById("demo")，获取具有指定id属性值的元素对象。
5.demo2.innerHTML=demo1.innerHTML，将demo1的内容赋值一份到demo2元素，之所以这样就是为了当新闻列表滚动的时候，能够出现首尾相接连续效果，否则后面会一片空白现象。
6.function moveTop(){}，此函数是滚动效果的核心。
7.if(demo1.offsetHeight-demo.scrollTop<=0)，判断向上滚动的尺寸是否达到新闻列表的高度，也就是第一个新闻列表是否向上完全滚动完毕。
8.demo.scrollTop=0，将demo元素的scrollTop的属性值设置为0，也就是重新开始滚动。
9.demo.scrollTop++，如果没有到达滚动指定尺寸，则继续向上滚动。
10.timer=setInterval(moveTop,speed)，使用定时器函数，每隔50毫秒执行一次函数moveTop。
11.demo.onmouseover=function(){clearInterval(timer);}，当鼠标demo元素上的时候停止滚动。
12.demo.onmouseout=function(){timer=setInterval(moveTop,speed);} ，鼠标离开的时候继续滚动。

js实现的新闻列表垂直滚动实现详解的更多相关文章

  1. 潭州课堂25班：Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载，轮播图后台实现 &lpar;课堂笔记）

    新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...

  2. &lbrack;概念&rsqb; js的函数节流和throttle和debounce详解

    js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...

  3. main&period;js index&period;html与app&period;vue三者关系详解

    main.js index.html与app.vue三者关系详解 2019年01月23日 11:12:15 Pecodo 阅读数 186   main.js与index.html是nodejs的项目启 ...

  4. 第15&period;29节 PyQt&lpar;Python&plus;Qt&rpar;入门学习：containers容器类部件QScrollArea滚动区域详解

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 Scroll Area提供了一个呈现在其他部件上的可滚动区域视图,滚动区域用于显示框架内的 ...

  5. jQuery实现滚动效果详解1

    声明:第一次写原创,本人初学,很多地方一知半解,本篇算是一个学习的笔记,欢迎批评指正,转载请注明. 今天要做的效果是在网上经常能看到多幅图片向左无缝滚动,鼠标滑过动画暂停,鼠标滑出动画继续的效果.网上 ...

  6. day13列表推导式作业详解

    1.day13题目 2,用列表推导式做下列小题 (1)过滤掉长度小于3的字符串列表,并将剩下的转换成大写字母 (2)求(x,y)其中x是0-5之间的偶数,y是0-5之间的奇数组成的元祖列表 (3)求M ...

  7. js数组中foEach和map的用法详解 jq中的&dollar;&period;each和&dollar;&period;map

    数组中foEach和map的用法详解 相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...

  8. Python 字符串、列表和元组用法详解

    1.通用函数 len() #列表的元素个数.字符串的长度 2.''' '''与'\ '用法详解 s='''this is a text ''' -->输出s ---> 'this\nis\ ...

  9. JS 实现可停顿的垂直滚动

    var ScrollMiddle = { 'Odiv':document.getElementById('comment'), // 目标DOM 'Oli': document.getElementB ...

随机推荐

  1. RSA签名验签学习笔记

    RSA私钥签名时要基于某个HASH算法,比如MD5或者SHA1等.之前我一直认为签名的过程是:先对明文做HASH计算,然后用私钥直接对HASH值加密.最近才发现不是那么简单,需要对HASH后的数据进行 ...

  2. 微信公众平台开发（68）苹果IMEI查询

    微信公众平台开发 苹果IMEI查询 苹果序列号查询 iPhone/iPad/iPod/Mac 作者:方倍工作室 地址:http://www.cnblogs.com/txw1958/p/weixin69 ...

  3. IIS 发布程序的一些心得

    1.应用程序池一般自己建立对应Framework版本的程序池,并托管管道模式为经典 2.在IIS根目录双击,右侧的“ISAPI和CGI限制” 双击打开,将自己所需要的Framework版本的限制设置为 ...

  4. Version of SQLite used in Android&quest;

    sing the emulators (adb shell sqlite3 --version): SQLite 3.7.11: 19-4.4-KitKat 18-4.3-Jelly Bean 17- ...

  5. 欧拉工程第60题：Prime pair sets

    题目链接 五个数,任意两个数的任意链接后的数还是质数 满足这个条件的最小五个数的和是多少? 结果:26033 纯暴力破解: package projecteuler51to60; import jav ...

  6. oracle操作语句

    Oracle中建立索引,会提高查询速度: create index 索引名 on 表名(列名); create index index_userid on tbl_detail(userid);如何找 ...

  7. python&comma;redis简单订阅

    python连接redis import redis r =redis.Redis(host='192.168.199.11',port = 6379 ,db = 0) r.publish('chan ...

  8. &period;net postsharp编译时生成的代码？

    使用PostSharp进行AOP框架设计:一个简单的原型   AOP已经不是一个什么新名词了,在博客园使用关键字搜索可以查出n多条关于AOP的介绍,这里就不再赘述了. 在Bruce Zhang's B ...

  9. CodeForces 614D Skills

    排序+枚举+二分 最大的那些变成A,小的那部分提高最小值 #include<cstdio> #include<cstring> #include<cmath> #i ...

  10. Azure IoT 技术研究系列1-入门篇

    物联网技术已经火了很多年了,业界各大厂商都有各自成熟的解决方案.我们公司主要搞新能源汽车充电,充电桩就是我们物联网技术的最大应用,车联网.物联网. 互联网三网合一.作为Azure重要的Partner和 ...

相关文章