js不间断滚动
CSS
ul, li {
margin: 0;
padding: 0;
}
#scrollDiv {
width: 300px;
height: 25px;
line-height: 25px;
border-bottom: #4c8cd1 1px solid;
overflow: hidden;
}
#scrollDiv li {
height: 25px;
padding-left: 10px;
}
JS
<script>
function AutoScroll(obj) {
$(obj).find("ul:first").animate({
marginTop: "-25px"
}, 800, function () {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
});
} $(document).ready(function () {
setInterval('AutoScroll("#scrollDiv")', 3000)
setInterval('AutoScroll("#scrollDiv")', 3000)
});
</script>
HTML
<div id="scrollDiv">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
</ul> </div>
js不间断滚动的更多相关文章
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- 横向不间断滚动DIV
横向不间断滚动DIV,5个一组,js控制,自动生成任意组显示 <!DOCTYPE html> <html> <head> <meta http-equiv=& ...
- DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理
推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
- js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...
- js文字向上滚动代码
js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px; background:#edfafd; padding-top:2px; ...
- div+css不间断滚动字幕
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js手机号批量滚动抽奖代码实现
我们平时在看一些选秀节目或一些歌唱类比赛节目时经常会看到在现场的大屏幕上会有观众的手机号在滚动来选出谁是幸运观众或谁中了什么奖项,这些手机号都是现场观众或场外观众在给选手投票时产生的,当主持人一声开始 ...
随机推荐
- WPF 定时写入文本
public static void Start() { ThreadStart start = new ThreadStart(ThreadAction); Thread th = new Thre ...
- WPF快速精通版
命名空间: xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:local="clr-namespace:U ...
- TP收集一些可以用的资源
http://www.thinkphp.cn/code/2184.html UI http://www.thinkphp.cn/code/2158.html 报名 http://www.th ...
- 水晶报表设置FiledObject支持HTML格式的数据
经常遇见把数据拼接成html格式后,然后在水晶报表中按照这种格式进行展现. 这就需要我们对次FiledObject设置成html文本: 设置方式: 格式编辑器->段落->文本解释,然后选择 ...
- android 抓包 使用 tcpdmp + Wireshark
下载地址tcpdump: http://www.androidtcpdump.com/ 使用su用户, 给/system/可写的权限 mount -o remount,rw -t ...
- node.js中log4js的使用
以前用过forever进程守护的日志记录到指定文件,但是只能保存到一个文件中不能分片,这样到只日志文件越来越大, forever start -s -l ./forever.log app.js -l ...
- Flash Media Server 4.5 序列号 (fms4.5 激活码)
激活码一枚 ,网上找不到的..我今天放出来了哦... 1462-5864-7783-6034-8316-3718 (亲测 可用) 安装前找到系统盘下windows/system32/driv ...
- 转:CWnd的函数,以后可以在这儿找了!
CWnd CObject └CCmdTarget └CWnd CWnd类提供了微软基础类库中所有窗口类的基本功能.CWnd对象与Windows的窗口不同,但是两者有紧密联系.CWnd对象是由 ...
- Android之TextView文字绘制流程
一:TextView的onDraw()方法: 1.第一句restartMarqueeIfNeeded()绘制字幕滚动. protected void onDraw(Canvas canvas) { r ...
- undercore & Backbone对AMD的支持(Require.js中如何使用undercore & Backbone)
RequireJS填补了前端模块化开发的空缺,RequireJS遵循AMD(异步模块定义,Asynchronous Module Definition)规范,越来越多的框架支持AMD,像最近的jQue ...