<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> new document </title>
<style type="text/css">
#scroll {margin:0;padding:2px 0;list-style:none;border:1px solid red;width:600px;height:18px;overflow:hidden}
#scroll li {margin:0;padding:0 4px;font-size:12px;height:18px;line-height:18px;width:600px;}
</style>
<script type="text/javascript">
window.onload = function() {
dMarquee('scroll');
}
function dMarquee(id){
var speed=20; //速度
var stop=1000; //停止时间
var ul = document.getElementById(id);//获取ul元素
var rows=ul.getElementsByTagName('li').length;//获取li个数
var height = ul.getElementsByTagName('li')[0].offsetHeight;//取得第一个li的高度
ul.innerHTML += ul.innerHTML;//获取所有li
var timeID = false;//settime的时间标示
//移动方法
var play = function() {
ul.scrollTop++;//移动滚动条
//移动到底的时候恢复为零
if(ul.scrollTop==rows*height){
ul.scrollTop=0;
}
//每次滚动
if(ul.scrollTop%height==0) {
timeID = setTimeout(play,stop);
}else{
timeID = setTimeout(play,speed);
}
}
timeID = setTimeout(play,stop);
ul.onmouseover = function() {clearTimeout(timeID);}
ul.onmouseout = play;
}
</script>
</head>
<body>
<embed src="http://player.youku.com/player.php/sid/XMTY3MDMyMzg4/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"></embed>
<ul id="scroll">
<li>.莫比初级教学班开课了 .秋季班现在要开课了快来参加吧 .就这样的开始了</li>
<li><a href="">.莫比初级教学班开课了</a> .秋季班现在要开课了快来参加吧 .就这样的开始了</li>
<li>.莫比初级教学班开课了 <a href="">.秋季班现在要开课了快来参加吧</a> .就这样的开始了</li>
<li>.莫比初级教学班开课了 .秋季班现在要开课了快来参加吧 .就这样的开始了</li>
</ul>
</body>
</html>
分享到：
相关推荐
jQuery 实现文字上下滚动
一款简单的js+css3文字上下滚动切换动画特效，可设置多种不同颜色的文字。
首页通知栏上下滚动效果
用js实现的上下文字滚动效果代码，需要的朋友可以参考下。
jQuery单行文字上下不间断循环滚动效果，适合做新闻滚动推荐
网上找到很多文字滚动，但都良莠不齐，基本都是左右滚动的，没有上下滚动。所以来分享一波 利用scortop实现文字移动，判断如果第一个元素的高度，如果小于等于了scrolltop（翻滚了多少高度）就把它删除并且添加到...
文字无缝滚动jQuery上下滚动js效果代码
主要介绍了vue实现公告栏文字上下滚动效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
NULL 博文链接：https://liushengit.iteye.com/blog/2338216
本文实例为大家分享了js公告栏上下滚动效果的具体实现代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>公告栏上下滚动</title> ...
实现效果： jQuery带分页单排文字上下轮播滚动代码，这样的效果我们可以应用到企业网站，或者商城网站，文字写成产品的信息，这样的一个效果，让网站也变的更加美观！
jQuery文字由下向上滚动代码是一款文字由下向上鼠标放置停止特效
基于DIV的JS滚动条控制文字滚动特效，拖动滚动条，文字区域可上下滚动，滚动条也是自定义的，不是默认风格的滚动条，本滚动条不但兼容IE浏览器，还可正常运行于火狐和Chrome等浏览器中。
js列表或者table文字滚动效果[百度博客搬家]-附件资源
超简单跑马灯文字滚屏效果，兼容IE、火狐
支持以下滚动,至于向左,还是向右,滚动,停留时间长短均可自行设置,样式等都可以自己修改,JS,css代码写的很灵活,需要哪种效果只用复制代码便可. 一次横向滚动一个 一次滚动一屏 默认不动，可做图片导航 间隙上下文字...
满屏焦点，图片上下滚动，带有暂停功能，大气。
仿qq频道上下单行多条滚动js效果代码，可用于新闻，友情链接上下间隙滚动 #nav { MARGIN: 7px auto 0px; HEIGHT: 117px } #nav #hotnews { BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 89px } #Scroll { CLEAR: both; ...
jquery实现鼠标悬浮上去显示文字上下左右翻动效果！