源码:

<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. Spring3系列10- Spring AOP——Pointcut,Advisor拦截指定方法

    Spring3系列10- Spring AOP——Pointcut,Advisor 上一篇的Spring AOP Advice例子中,Class(CustomerService)中的全部method都 ...

  2. mysql主从复制原理

    复制如何工作 整体上来说,复制有3个步骤: (1)    master将改变记录到二进制日志(binary log)中(这些记录叫做二进制日志事件,binary log events):       ...

  3. jquery $.proxy使用

    在某些情况下,我们调用Javascript函数时候,this指针并不一定是我们所期望的那个.例如: //正常的this使用 $('#myElement').click(function() { // ...

  4. 对android应用一些破解的方法

    因为需要破解一款应用,找了些资料 Android手机中的程序文件夹拷贝到别的Android手机上还能用么? xx.apk Android个人破解应用新思路 安卓手机下xx.apk JAVA破解之旅 s ...

  5. python 教程_【python 基础教程详解】

    Lesson 1 准备好学习Python的环境下载的地址是:www.python.org为了大家的方便,我在校内作了copy:http://10.1.204.2/tool/compiler&I ...

  6. JDK的下载、安装及环境变量的配置

    官网下载JDK: www.oracle.com 或者 www.java.sun.com   安装JDK: 双击运行下载的 jdk-8u25-windows-i586.exe即可. 假设安装目录为:D: ...

  7. cron语法

    最近在搞whenever时看到可以用cron语法设置定时任务.所以研究了下cron 语法. every '0 0 27-31 * *' do command "echo 'you can u ...

  8. Android代码优化工具——Android lint

    作为移动应用开发者,我们总希望发布的apk文件越小越好,不希望资源文件没有用到的图片资源也被打包进apk,不希望应用中使用了高于minSdk的api,也不希望AndroidManifest文件存在异常 ...

  9. android xml 常用控件介绍

    android常用控件介绍 ------文本框(TextView)     ------列表(ListView)     ------提示(Toast)     ------编辑框(EditText) ...

  10. _set_invalid_parameter_handler异常处理函数

    VS2005之后的版本,微软增加了一些新的异常机制,新机制在出现错误时默认不通知应用程序,这时程序就崩溃了.所以这种情况下,必须调用_set_invalid_parameter_handler._se ...