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 实现各种跨域的方法
May 08 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
Javascript实现计算个人所得税
May 10 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
JSONP原理及简单实现
Jun 08 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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 获取远程网页内容的函数
2009/09/08 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
详解Django配置JWT认证方式
2020/05/09 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
python 实现控制鼠标键盘
2020/11/27 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
电子商务专业自我鉴定
2013/12/18 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
校园广播稿500字
2014/02/04 职场文书
股东出资证明书范例
2014/10/04 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
小爸爸观后感
2015/06/15 职场文书
小学班主任心得体会
2016/01/07 职场文书