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 相关文章推荐
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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
本地计算机无法启动Apache故障处理
2014/08/08 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
临床护士自荐信
2014/01/31 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python