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 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
谈谈为什么你的 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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
php密码生成类实例
2014/09/24 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
python实现复制大量文件功能
2019/08/31 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
盛大笔试题
2016/11/05 面试题
银行会计业务的个人自我评价
2013/11/02 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
Java实现注册登录跳转
2022/06/16 Java/Android