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不间断滚动的更多相关文章

  1. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  2. 横向不间断滚动DIV

    横向不间断滚动DIV,5个一组,js控制,自动生成任意组显示 <!DOCTYPE html> <html> <head> <meta http-equiv=& ...

  3. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  4. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  5. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  6. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  7. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  8. div+css不间断滚动字幕

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. js手机号批量滚动抽奖代码实现

    我们平时在看一些选秀节目或一些歌唱类比赛节目时经常会看到在现场的大屏幕上会有观众的手机号在滚动来选出谁是幸运观众或谁中了什么奖项,这些手机号都是现场观众或场外观众在给选手投票时产生的,当主持人一声开始 ...

随机推荐

  1. MPEG2/TS 包结构简述

    TS 包由以下3部分组成: 包头: 4字节, 同步,识别,检错和加密用 自适配域:可选 包数据:最大184字节(不存在自适配域) 4字节 184字节 包头 自适配域 包数据 4字节包头结构: 1字节 ...

  2. iOS10 CoreData新特性

    原文地址:What's New in Core Data in macOS 10.12, iOS 10.0, tvOS 10.0, and watchOS 3.0 翻译者:肖品,原创文章转载请著名出处 ...

  3. U3D包大小优化之microlib

    当迩想把最小类库发上来,迩需要把Stripping Level设置为Use micro mscorlib 这里是MICROLIB所能使用的包的类库列表:http://docs.unity3d.com/ ...

  4. 何为.Net Remoting【转】

    借助基维百科给它的定义如下: NET Remoting 是微软 .NET Framework 中的一种网络通讯技术,与 XML Web Service 不同的是,它可以使用 SOAP 以外的协定来通讯 ...

  5. 为什么要提倡“Design Pattern呢

    为什么要提倡“Design Pattern呢?根本原因是为了代码复用,增加可维护性. 那么怎么才能实现代码复用呢?面向对象有几个原则:开闭原则(Open Closed Principle,OCP).里 ...

  6. DNS反射攻击阻止

    刚搭的dns server就有贱人跑dns反射放大攻击,据说bind高版本没洞,但是日志刷刷的跑,感觉也不放心,而且毕竟dns是返回了请求的,所以找了点资料备忘 先设定不受限制的网段 iptables ...

  7. php XML 读写 创建

    一 .XML 读 1.1. 首先同目录定义好一个XML文件 : book.xml <?xml version="1.0" encoding="utf-8" ...

  8. C#通过RFC调用SAP

    using System;using System.Collections.Generic;using SAP.Middleware.Connector;using System.Data;using ...

  9. java 动态创建数据库和动态连接数据库

    项目中有一个需求要动态创建数据库并且要动态连接数据库,本来以为还很难实现呢,在网上找了好久,都不是很理想,最后看到有人说创建数据库时,先连接到任意一个数据库,获得连接后用createStatement ...

  10. 简单搭建React-Native环境

    1. 背景 差不多半年前安装这个RN环境,由于各种原因,一直安装不成功.时至今日,现在安装这个环境现在方便很多了. 2. 安装软件 安装nodejs,npm  https://nodejs.org/e ...