首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Javascript实现信息滚动效果

Posted in Javascript onMay 18, 2017

本文实例为大家分享了js信息滚动效果的具体代码，供大家参考，具体内容如下

Javascript实现信息滚动效果

向上无缝滚动：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>向上无缝滚动</title>
<style>
body {
 font-size: 12px;
 line-height: 24px;
 text-algin: center;  /* 页面内容居中 */
}
* {
 margin: 0px;
 padding: 0px;   /* 去掉所有标签的marign和padding的值 */
}
ul {
 list-style: none;   /* 去掉ul标签默认的点样式 */
}
a img {
 border: none;  /* 超链接下，图片的边框 */
}
a {
 color: #333;
 text-decoration: none;  /* 超链接样式 */
}
a:hover {
 color: #ff0000;
}
#mooc {
 width: 399px;
 border: 5px solid #ababab;
 -moz-border-radius: 15px;  /* Gecko browsers */
 -webkit-border-radius: 15px; /* Webkit browsers */
 border-radius: 15px;
 box-shadow: 2px 2px 10px #ababab;
 margin: 50px auto 0;
 text-align: left;    /* 让新闻内容靠左 */
}
/* 头部样式 */ 
#moocTitle {
 height: 62px;
 overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
 font-size: 26px;
 line-height: 62px;
 padding-left: 30px;
 background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/
 border: 1px solid ##f05e6f;
 -moz-border-radius: 8px 8px 0 0;  /* Gecko browsers */
 -webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */
 border-radius: 8px 8px 0 0;
 color: #fff;
 position: relative;
}
#moocTitle a {
 position: absolute;
 right: 10px;
 bottom: 10px;
 display: inline;
 color: #fff;
 font-size: 12px;
 line-height: 24px;
}
/* 底部样式 */
#moocBot {
 width: 399px;
 height: 10px;
 overflow: hidden;  /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
}
/* 中间样式 */
#moocBox {
 height: 144px;
 width: 335px;
 margin-left: 25px;
 margin-top: 10px;
 overflow: hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
}
#mooc ul li {
 height: 24px;
}
#mooc ul li a {
 width: 180px;
 float: left;
 display: block;
 overflow: hidden;
 text-indent: 15px;
 height: 24px;
}
#mooc ul li span {
 float: right;
 color: #999;
}
</style>
</head>

<body>
<!-- 慕课网课程公告开始 -->
<div id="mooc"> 
<!-- 头部 -->
<h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3>
<!-- 头部结束 --> 
<!-- 中间 -->
<div id="moocBox">
 <ul id="con1">
  <li><a href="#">1.学会html5 绝对的?潘磕嫦?ò咐??lt;/a><span>2013-09-18</span></li>
  <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
  <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
  <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
  <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
  <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
  <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
  <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
  <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
 </ul>
 <ul id="con2">
 </ul>
</div>
<!-- 中间结束 --> 
</div>
<!-- 慕课网课程公告结束 --> 

<script type="text/javascript">
 var area = document.getElementById('moocBox');
 var con1 = document.getElementById('con1');
 var con2 = document.getElementById('con2');
 var speed = 50;
 area.scrollTop = 0;
 con2.innerHTML = con1.innerHTML;
 function scrollUp(){
  if(area.scrollTop >= con1.scrollHeight) {
   area.scrollTop = 0;
   }else{
   area.scrollTop ++; 
   } 
}
var myScroll = setInterval("scrollUp()",speed);
area.onmouseover = function(){
  clearInterval(myScroll);
 }
area.onmouseout = function(){
  myScroll = setInterval("scrollUp()",speed);
 }
 </script>
</body>
</html>

间歇性滚动：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻无缝向上无缝滚动</title>
<style>
body {
 font-size: 12px;
 line-height: 24px;
 text-algin: center;  /* 页面内容居中 */
}
* {
 margin: 0px;
 padding: 0px;   /* 去掉所有标签的marign和padding的值 */
}
ul {
 list-style: none;   /* 去掉ul标签默认的点样式 */
}
a img {
 border: none;  /* 超链接下，图片的边框 */
}
a {
 color: #333;
 text-decoration: none;  /* 超链接样式 */
}
a:hover {
 color: #ff0000;
}
#mooc {
 width: 399px;
 border: 5px solid #ababab;
 -moz-border-radius: 15px;  /* Gecko browsers */
 -webkit-border-radius: 15px; /* Webkit browsers */
 border-radius: 15px;
 box-shadow: 2px 2px 10px #ababab;
 margin: 50px auto 0;
 text-align: left;    /* 让新闻内容靠左 */
}
/* 头部样式 */ 
#moocTitle {
 height: 62px;
 overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
 font-size: 26px;
 line-height: 62px;
 padding-left: 30px;
 background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/
 border: 1px solid ##f05e6f;
 -moz-border-radius: 8px 8px 0 0;  /* Gecko browsers */
 -webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */
 border-radius: 8px 8px 0 0;
 color: #fff;
 position: relative;
}
#moocTitle a {
 position: absolute;
 right: 10px;
 bottom: 10px;
 display: inline;
 color: #fff;
 font-size: 12px;
 line-height: 24px;
}
/* 底部样式 */
#moocBot {
 width: 399px;
 height: 10px;
 overflow: hidden;  /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
}
/* 中间样式 */
#moocBox {
 height: 144px;
 width: 335px;
 margin-left: 25px;
 margin-top: 10px;
 overflow: hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
}
#mooc ul li {
 height: 24px;
}
#mooc ul li a {
 width: 180px;
 float: left;
 display: block;
 overflow: hidden;
 text-indent: 15px;
 height: 24px;
}
#mooc ul li span {
 float: right;
 color: #999;
}
</style>
</head>

<body>
<!-- 慕课网课程公告开始 -->
<div id="mooc"> 
<!-- 头部 -->
<div id="moocTitle">慕课网最新课程<a href="#" target="_self">更多>></a> </div>
<!-- 头部结束 --> 
<!-- 中间 -->
<div id="moocBox">
 <ul>
  <li><a href="#">1.学会html5 绝对的?潘磕嫦?ò咐??lt;/a><span>2013-09-18</span></li>
  <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
  <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
  <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
  <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
  <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
  <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
  <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
  <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
 </ul>
</div>
<!-- 中间结束 --> 
<!-- 底部 -->
<div id ="moocBot"> </div>
<!-- 底部结束 --> 
</div>
<!-- 慕课网课程公告结束 --> 

<script type="text/javascript">
 var area = document.getElementById('moocBox');
 var iliHeight = 24;//单行滚动的高度
 var speed = 50;//滚动的速度
 var time;
 var delay= 2000;
 area.scrollTop=0;
 area.innerHTML+=area.innerHTML;//克隆一份一样的内容
 function startScroll(){
  time=setInterval("scrollUp()",speed);
  area.scrollTop++;
  }
 function scrollUp(){
  if(area.scrollTop % iliHeight==0){
   clearInterval(time);
   setTimeout(startScroll,delay);
   }else{
    area.scrollTop++;
    if(area.scrollTop >= area.scrollHeight/2){
     area.scrollTop =0;
     }
    }
  }
  setTimeout(startScroll,delay)
 </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Javascript实现信息滚动效果

- Author -

青蛙魔法师

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
javascript 学习笔记（六）浏览器类型及版本信息检测代码
Apr 08 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
jQuery.each使用详解
Jul 07 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
微信小程序实现多图上传
Jun 19 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 #Javascript
Bootstrap table学习笔记（2） 前后端分页模糊查询
May 18 #Javascript
BootStrap 导航条实例代码
May 18 #Javascript
AngularJS全局警告框实现方法示例
May 18 #Javascript
第一次记录Bootstrap table学习笔记（1）
May 18 #Javascript
原生js轮播特效
May 18 #Javascript
js实现放大镜特效
May 18 #Javascript
Mint UI(1) 慢日志(1) openpyxl(1) exists(2) cmd(1) REST(1) 面向对象(3) mt-swipe(1) 相对路径(1) 相对路径 (1)
You might like
php adodb操作mysql数据库
2009/03/19 PHP
php四种基础算法代码实例
2013/10/29 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
一看就会的vuex实现登录验证（附案例）
2020/01/09 Javascript
JS实现放烟花效果
2020/03/10 Javascript
python实现的文件夹清理程序分享
2014/11/22 Python
使用Python对MySQL数据操作
2017/04/06 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
python多维数组分位数的求取方式
2020/03/03 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
详解利用python识别图片中的条码（pyzbar）及条码图片矫正和增强
2020/11/17 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
ALEX AND ANI：手镯，项链，耳环和更多
2017/04/20 全球购物
波兰在线运动商店：YesSport
2020/07/23 全球购物
值类型与引用类型有什么不同？请举例说明？并分别列举几种相应的数据类型
2015/10/24 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
个人简历自我评价
2014/01/06 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers
frg-100简单操作(设置）说明
2022/04/05 无线电