js实现向上滚动效果
源码:
<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实现向上滚动效果的更多相关文章
- 原生js实现文字无缝向上滚动效果
在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...
- js文字向上滚动代码
js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px; background:#edfafd; padding-top:2px; ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- 二、JavaScript语言--JS实践--信息滚动效果制作
运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...
- js 实现 间隙滚动效果
代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- 用 Stellar.js 制作视差滚动效果
参考 http://doc.bropaul.com/Stellar.js/docs/ https://github.com/markdalgleish/stellar.js#download http ...
- js实现消息滚动效果
<div class="inform" style=""> <div style="height:35px; overflow:hi ...
- js 循环向上滚动
aaaaaaaaaaaaaaaaa最开头 aaaaaaaaaaa 1 aaaaaaaaaaa 2 aaaaaaaaaaa 3 aaaaaaaaaaa 4 aaaaaaaaaaa 5 aaaaaaaaa ...
- JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
随机推荐
- CentOS安装keepalived
Haproxy.Keepalived双主高可用负载均衡 1.安装keepalived yum install keepalived -y
- MacBook 蓝牙无法搜索设备
背景 经常把MacBook合上盖子就塞进包里,用时打开盖子就继续操作,偶尔会出现刚刚还在用的罗技蓝牙鼠标,重新打开笔记本后就连接不上了,而且也无法搜索到周边的蓝牙设备. 解决方案 快捷键:Option ...
- Text3d
有小bug,先弄这么多吧,晚了,碎觉了 ---------------------------------
- [转]Python格式化输出
今天写程序又记不清格式化输出细节了……= =索性整理一下. python print格式化输出. 1. 打印字符串 print ("His name is %s"%("A ...
- win7任务栏还原为xp样式
win7的确是非常强大的操作系统,值得一提的是超级任务栏,非常新颖,不过,不是很适应win7的超级任务栏,今天,我们恢复win7超级任务栏还原xp任务栏. 方法/步骤: 1.在win7超级任务栏空白处 ...
- POJ 2234 Matches Game
Matches Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7567 Accepted: 4327 Desc ...
- C#基础课程之五集合(HashTable,Dictionary)
HashTable例子: #region HashTable #region Add Hashtable hashTable = new Hashtable(); Hashtable hashTabl ...
- 记一个dynamic的坑
创建一个控制台程序和一个类库, 在控制台创建一个匿名对象,然后再在类库中访问它,代码如下: namespace ConsoleApplication1 { class Program { static ...
- 斐波那契堆(二)之 C++的实现
概要 上一章介绍了斐波那契堆的基本概念,并通过C语言实现了斐波那契堆.本章是斐波那契堆的C++实现. 目录1. 斐波那契堆的介绍2. 斐波那契堆的基本操作3. 斐波那契堆的C++实现(完整源码)4. ...
- Watch out for these 10 common pitfalls of experienced Java developers & architects--转
原文地址:http://zeroturnaround.com/rebellabs/watch-out-for-these-10-common-pitfalls-of-experienced-java- ...