jquery单行文字向上滚动效果的实现代码

2024-10-26 13:16:03

 <body>
<div id="title" style="width:100%;height:40px;">看看间断滚动文字</div> 

<div id="content" class="infocontent">
<div id="top" class="infolist">
<ul>
<li>央视315曝光: 华润深陷“海砂门”回应澄而未清</li>
<li>吉野家被曝餐具不消毒 波司登等羊绒衫不含羊绒</li>
<li>无锡警方公布“待产女警突发不幸”事发经过</li>
<li>中国人一天：最后的轮渡 视界：在家“搞定”</li>
</ul>
</div>
<div id="bottom" class="infolist"></div>
</div>
<div id="foot"></div>
</body>

.infolist{width:400px;matgin:0;}
.infolist ul{margin:0;padding:0;}
.infolist ul li{list-style:none;height:26px;line-height:26px;}
.infocontent{width:400px;height:26px;overflow:hidden;border:1px solid #666666;}

var interval=1000;//两次滚动之间的时间间隔
var stepsize=26;//滚动一次的长度，必须是行高的倍数,这样滚动的时候才不会断行
var objInterval=null; 

$(document).ready( function(){
//用上部的内容填充下部
$("#bottom").html($("#top").html()); 

//给显示的区域绑定鼠标事件
$("#content").bind("mouseover",function(){StopScroll();});
$("#content").bind("mouseout",function(){StartScroll();}); 

//启动定时器
StartScroll();
}); 

//启动定时器，开始滚动
function StartScroll(){
objInterval=setInterval("verticalloop()",interval);
} 

//清除定时器，停止滚动
function StopScroll(){
window.clearInterval(objInterval);
} 

//控制滚动
function verticalloop(){
//判断是否上部内容全部移出显示区域
//如果是，从新开始;否则，继续向上移动
if($("#content").scrollTop()>=$("#top").outerHeight()){
$("#content").scrollTop($("#content").scrollTop()-$("#top").outerHeight());
}
//使用jquery创建滚动时的动画效果
$("#content").animate(
{"scrollTop" : $("#content").scrollTop()+stepsize +"px"},600,function(){
//这里用于显示滚动区域的scrollTop，实际应用中请删除
// $("#foot").html("scrollTop:"+$("#content").scrollTop());
});
}

jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.1.单行滚动效果无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} function AutoScroll(obj){ $(obj).find
合并一个文件夹下多个文件内容的单行shell命令

合并一个文件夹下多个文件内容: 复制代码代码如下: find -name "*.log" -exec 'cat' {} \; > test.tmp
jQuery实现单行文字间歇向上滚动源代码

使用jQuery实现单行文字间歇向上滚动效果网址:http://www.keleyi.com/keleyi/phtml/textscroll.htm 本效果加强版:http://www.keleyi.com/a/bjac/532bedbffca1affa.htm 主要增加了光标悬停效果以下是源代码: 复制代码代码如下: <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/j
js实现单行文本向上滚动效果实例代码

复制代码代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, autoStart) { this.Delay = 10; this.LineHeight = 20; this.Amount = 1; this.Direction = "up"; this.Timeout = 1500; this.Scrol
10个惊艳的Swift单行代码

几年前,一篇表述"10个Scala函数式单行代码"的文章非常受欢迎,并且随后立马出现了其他的语言版本,例如Haskell版本,Ruby版本,Groovy版本,Clojure版本,Python版本,C#版本,F#版本,CoffeeScript版本等. 我们不知道有多少人真的对这些单行代码印象深刻,但我认为,这能激励大家去了解更多有关于函数式编程的内容. 1 数组中的每个元素乘以2 特别简单,尤其是使用map解决的话. (1...1024).map{$0 * 2} 2 数组中的元素求和虽
javascript 单行文字向上跑马灯滚动显示

代码如下: =sh/2) o.style.marginTop=0; }else{ clearInterval(t); setTimeout(start,delay); } } setTimeout(start,delay); } // --> 我们服务器常用软件百度浏览器 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
jquery 页眉单行信息滚动显示实现思路及代码

以下是控制滚动的样式,将滚动的内容查询出来,放在一个div 或者别的容器里面,我这里使用的是<dt> <style> #newCglist{width:300px;height:14px;line-height:14px;overflow:hidden} #newCglist li{height:14px;padding-left:10px;} </style> 以下是滚动内容展示的容器 <dt class="positionrel" id=&
perl中单行注释和多行注释使用介绍

Perl中的程序注释:单行注释和多行注释 (一)单行注释: 以#开头的行都被perl认为是注释.但是有一个例外,perl程序的第一行是#开头的,他指定了perl程序的解释器. 例如:#print 1: 这种方法有个缺点,就是每次# 只能够注释一行,如果要注释的代码很长,那就是一件很麻烦的事情. (二)多行注释: 最常用的方法是使用 POD(Plain Old Documentations) 来进行多行注释.方法如下: =pod codes to comment =cut 注意:=pod =cut
js单行消息滚动代码，可添加无数个

滚动最新消息代码 td {font-size: 12px;} 最新消息: var marqueeContent=new Array(); //滚动主题 marqueeContent[0]='学习编程,欢迎访问源码爱好者!'; marqueeContent[1]='精品源代码下载.'; marqueeContent[2]='专注于提供编程源码及素材下载及实例教程.'; marqueeContent[3]='旅行是需要一种心情,更重要的是,需要一种冲动.'; marqueeContent[4]='随
c#删除代码中的单行注释行示例

复制代码代码如下: using System.IO; using System.Collections; static string deleteComments(string s) //去掉以//开始的注释 { if (s == null) return s; int pos = s.IndexOf("//"); if (pos < 0) return s; return s.Substring(0, pos); }if (Directory.Exists("Tem

jquery单行文字向上滚动效果的实现代码

相关推荐

随机推荐