源码:

<style type="text/css">
#up_zzjs{border:1px solid #ccc;width:170px;height:182px;line-height:20px;overflow:hidden;}
#up_zzjs #up_li{list-style-type:none;margin:0;padding:0;margin-left:6px;}
/*系统支持ie8就选line-height:16px;,但不支持opera 否则选line-height:20px;*/
#up_zzjs #up_li a{font-size:12px; line-height:16px;}
</style>
<div id="up_zzjs">
<ul id="marqueebox" style="border:1px red solid;">
<li id="up_li">
<a href="http://www.zzjs.net/" target="_blank">
<span style="color:#FF0000">滚动文字一号</span></a>
</li>
<li id="up_li">
<a href="http://www.zzjs.net/" target="_blank">
<span style="color:#3333FF">滚动文字三号</span></a>
</li>
<li id="up_li">
<a href="http://www.zzjs.net/" target="_blank">
<span style="color:#3333FF">滚动文字五号</span></a>
</li>
<li id="up_li">
<a href="http://www.zzjs.net/" target="_blank">
<span style="color:#3333FF">滚动文字七号</span></a>
</li>
</ul>
</div>
<script language="javascript">
function startmarquee(lh,speed,delay) {
var p=false;
var t;
var o=document.getElementById("marqueebox");
o.innerHTML+=o.innerHTML;
o.style.marginTop=0;
o.onmouseover=function(){p=true;}
o.onmouseout=function(){p=false;}
function start(){
t=setInterval(scrolling,speed);
if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
}
function scrolling(){
if(parseInt(o.style.marginTop)%lh!=0){
o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
}else{
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
startmarquee(20,20,1500); // 第一个参数为上升的高度,第二个为速度
</script>


说明,在ul <ul id="marqueebox" 设置一个固定大小高度的div <div id="up_zzjs">,ul会一直向上跑。

js实现向上滚动效果的更多相关文章

  1. 原生js实现文字无缝向上滚动效果

    在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...

  2. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  3. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  4. 二、JavaScript语言--JS实践--信息滚动效果制作

    运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...

  5. js 实现 间隙滚动效果

    代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  6. 用 Stellar.js 制作视差滚动效果

    参考 http://doc.bropaul.com/Stellar.js/docs/ https://github.com/markdalgleish/stellar.js#download http ...

  7. js实现消息滚动效果

    <div class="inform" style=""> <div style="height:35px; overflow:hi ...

  8. js 循环向上滚动

    aaaaaaaaaaaaaaaaa最开头 aaaaaaaaaaa 1 aaaaaaaaaaa 2 aaaaaaaaaaa 3 aaaaaaaaaaa 4 aaaaaaaaaaa 5 aaaaaaaaa ...

  9. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

随机推荐

  1. CLR VIA

     标题  状态  内容 什么是CLR? 什么是托管模块? 托管模块由什么组成? .net代码的执行过程   http://www.cnblogs.com/aaa6818162/p/4726581.ht ...

  2. asp.net首页设置

    在web.config中设置首页 <configuration> <system.web> <compilation debug="true" tar ...

  3. PSAM卡与CPU(用户卡)的操作过程

    最近我一直在研究关于通过国密PSAM卡作为安全模块来读写cpu(用户卡)的问题 其实,两者都是卡片,或者说都是从设备.它们之间是无法相互访问的. 实际上,PSAM 卡是作为秘密密钥的载体,专门执行加密 ...

  4. 超时时间已到。在操作完成之前超时时间已过或服务器未响应。 (.Net SqlClient Data Provider)

    超时时间已到.在操作完成之前超时时间已过或服务器未响应. (.Net SqlClient Data Provider) 在做一个小东西的时候出现了这个问题,就是使用VS调试几次项目后,使用SQL Se ...

  5. webkit内核分析之 Frame

    参考地址:http://blog.csdn.net/dlmu2001/article/details/6164873 1.    描述 Frame类是WebCore内核同应用之间联系的一个重要的类.它 ...

  6. Win7下安装git

    1.下载并安装git for windows版本:msysgit http://msysgit.github.com/   成功安装后,即可使用了,右键一个目录后可以看到菜单选项: 选择Git Gui ...

  7. 无插件纯web 3D机房 (第四季:大型园区、地球仪效果和其他扩展应用)

    前言 初次见面的朋友们大家好,这篇文章是"无插件纯web 3D机房"系列的第四季,感兴趣的朋友可从头开始观看,以下是正确的阅读顺序: 无插件纯web 3D机房(第一季:从零开始搭建 ...

  8. java攻城狮之路(Android篇)--与服务器交互

    一.图片查看器和网页源码查看器 在输入地址的是不能输入127.0.0.1 或者是 localhost.ScrollView :可以看成一个滚轴 可以去包裹很多的控件在里面 练习1(图片查看器): pa ...

  9. JSON数据行转列的应用

    背景 先说说为什么要弄什么行转列. 时间 类别 费用 2014-07-08 电费 120 2014-07-08      水费 23 2014-07-09 电费 44 2014-07-09 水费 77 ...

  10. AC_Dream 1216 G - Beautiful People

    题意:有n个人每人有一个力气值Si,美丽值Bi,满足Bi>Bj&&Si>Sj 或者 Bi<Bj&&Si<Sj 的人可以一起参见晚会,问最多有多少 ...