JS实现的新闻列表自动滚动效果示例


Posted in Javascript onJanuary 30, 2019

本文实例讲述了JS实现的新闻列表自动滚动效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    #box{width:260px;height:100px;margin:0 auto;border:2px solid red;overflow: hidden}
    ul{padding:0;margin:0;list-style: none;overflow: hidden}
    ul li{height:24px;line-height: 24px;padding-left:10px;}
    a{text-decoration: none;color:#000;}
    a:hover{color:#f00}
  </style>
</head>
<body>
<div id="box">
  <ul id="con1" onMouseOut="Up()" onMouseOver="Stop()">
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1,课程html</a> </li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2,课程css</a> </li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3,课程js</a> </li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4,课程jquery</a> </li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5,课程html5</a> </li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6,课程css3</a> </li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >7,课程hp</a> </li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >8,课程bpootstrap</a> </li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >9,课程apicloud</a> </li>
  </ul>
  <ul id="con2"></ul>
</div>
</body>
<script type="text/javascript">
  var box=document.getElementById("box");
  var con1=document.getElementById("con1");
  var con2=document.getElementById("con2");
  var s=document.getElementsByTagName("a");
  var speed=50;
  con2.innerHTML=con1.innerHTML;
  function ScrollUp(){
    if( box.scrollTop>=con1.scrollHeight){
      box.scrollTop=0;
    }else
      box.scrollTop++;
  }
  var i=setInterval("ScrollUp()",speed);
  function Stop(){
    clearInterval(i);
  }
  function Up(){
    i=setInterval("ScrollUp()",speed);
  }
</script>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行效果:

JS实现的新闻列表自动滚动效果示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 #Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 #Javascript
AJAX在JQuery中的应用详解
Jan 30 #jQuery
JS实现换肤功能的方法实例详解
Jan 30 #Javascript
js实现ATM机存取款功能
Oct 27 #Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 #Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 #Javascript
You might like
PHP中mysql_field_type()函数用法
2014/11/24 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
JS 遮照层实现代码
2010/03/31 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
python书籍信息爬虫实例
2018/03/19 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
Python  Django 母版和继承解析
2019/08/09 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
测试工程师岗位职责
2013/11/28 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
超市周年庆活动方案
2014/08/16 职场文书
村班子对照检查材料
2014/08/18 职场文书
护理专业自我评价
2015/03/11 职场文书