源码:

<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. wordpress使用技巧

    1.iis6下wordpress去掉index.php 1)安装ISAPIRewritev3.1.0.73 http://bbs.z.admin5.com/forum.php?mod=viewthre ...

  2. Android M Permission 学习笔记

    Android应用权限简要介绍 一个Android应用默认情况下是不拥有任何权限的, 这即是说, 在默认情况下, 一个应用是没有权利去进行一些可能会造成不好影响的操作的. 这些不好的影响可能是对其它应 ...

  3. [转]ASP.NET页面之间传递值的几种方式

    页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值.存储对象传值.ajax.类.model.表单等.但是一般来说,常用的较简单有QueryString,Session,Cookie ...

  4. Devexpress HtmlEditor 上传本地图片

    官方Demo地址:https://demos.devexpress.com/MVCxHTMLEditorDemos/Features/Features 控件的一定要包裹在form中 @using(Ht ...

  5. Copy15G的初始容量,注册就再送5G,邀请注册的人也送5G

    Copy15G的初始容量,注册就再送5G,邀请注册的人也送5G,可谓是史上最隆重最给力的容量赠送活动~~~https://copy.com?r=kFpfsZ

  6. 在使用sqlite时淌过的坑

    以前一直用sqlite.net 1.0.66.0版本,在.net4下面程序写好了部署到目的地机器时winform程序总是出现缺少运行时的问题.有时装了运行时也还是出问题,后来发现是混合模式的问题,当时 ...

  7. nodejs初窥

    1. node.js不是js应用,而是js运行平台.Node.js采用C++编写,是一个js的运行环境. 2. node.js采用事件驱动.异步编程,为网络服务而设计.Node.js的网络应用模块包括 ...

  8. java中静态代码块的用法 static用法详解(转)

    (一)java 静态代码块 静态方法区别一般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情况下,其他程序 ...

  9. nginx url自动加斜杠的问题

    nginx url自动加斜杠问题及301重定向 时间:2016-02-04 15:14:28来源:网络 导读:nginx url自动加斜杠问题及301重定向,URL指向一个目录并且在最后没有包含斜杠, ...

  10. 关于win7和xp的屏设置类

    DisplayInfo.h #pragma once enum WinVerDef { WIN_VER_UNKNOWN = -, WIN_VER_95 = , WIN_VER_98, WIN_VER_ ...