1.原始 marquee

2.自定义 marquee

.tops {
color: #fff;
height: 23px;
margin: 0 0 0 20px;
min-height: 23px;
overflow: hidden;
}
.tops a {
float: left;
}
.tops li {
height: 23px;
padding-left: 25px;
}
<div class="tops">
<ul>
<li>
<a href="#">top1</a>
</li>
<li>
<a href="#">top2</a>
</li>
</ul>
</div>
$(document).ready(function () {
$(".tops").Scroll();
});
 
(function ($) {
$.fn.extend({
Scroll: function (opt) {
if (!opt) var opt = {line: 1, speed: 1000, timer: 3000};
var oo;
var _this = this.eq(0).find("ul:first");
var lineH = _this.find("li:first").height(),
line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10),
speed = opt.speed ? parseInt(opt.speed, 10) : 3000,
timer = opt.timer ? parseInt(opt.timer, 10) : 3000;
if (line == 0) line = 1;
var upHeight = 0 - line * lineH;
scrollUp = function () {
_this.animate({
marginTop: upHeight
}, speed, function () {
for (i = 1; i <= line; i++) {
_this.find("li:first").appendTo(_this);
}
_this.css({ marginTop: 0 });
}
);
};
var timerID = function () {
oo = setInterval("scrollUp()", timer);
};
timerID();
_this.hover(function () {
clearInterval(oo);
}, function () {
timerID();
});
}
});
})(jQuery);

marquee 跑马灯公告的更多相关文章

  1. TextView: android:ellipsize="marquee" 跑马灯效果无效的问题

    今天练习的时候想实现一个文字的跑马灯效果,本来想自己手动实现的,不过突然想起来android里的TextView属性似乎自带了这个效果,叫: android:ellipsize ,平时都是把它的属性值 ...

  2. 浅谈TextView Ellipsize效果与Marquee跑马灯无效果问题

    说到TextView 效果,相信大家一定熟悉跑马灯. 先来看看 Ellipsize是什么,Ellipsize 从开发技术上翻译为省略效果.故名思议,就是当文本无法显示全部时,用什么效果来显示未显示的部 ...

  3. HTML Marquee跑马灯

    Marquee是html的标签,所有的主流浏览器都能兼容,用于创建文字滚动. 来介绍下标签的属性 滚动方向 direction <!--滚动方向 direction 4个值 up down le ...

  4. marquee跑马灯效果的相关属性

    介绍HTML设置滚动文字marquee的相关属性 ㈠文字滚动标签 设置文字滚动使用<marquee></marquee>标签,可以再标签里面设置字体的颜色,字号,字体大小等. ...

  5. Android:TextView 自动滚动(跑马灯) (转)

    Android:TextView 自动滚动(跑马灯)       TextView实现文字滚动需要以下几个要点: 1.文字长度长于可显示范围:android:singleLine="true ...

  6. Android开发之TextView实现跑马灯效果

    TextView及其子类,当字符内容太长显示不下时可以省略号代替未显示的字符:省略号可以在显示区域的起始,中间,结束位置,或者以跑马灯的方式显示文字(textview的状态为被选中). 其实现只需在x ...

  7. TextView实现跑马灯效果

    网上有很多跑马灯的介绍,有很多跑马灯的代码.或许我的不是最好的,但是应该很容易明白的. 我们先来介绍一个跑马灯的代码 <LinearLayout xmlns:android="http ...

  8. Android学习总结——TextView跑马灯效果

    Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须 ...

  9. TextView的跑马灯效果(AS开发实战第二章学习笔记)

    TextView的跑马灯效果跑马灯用到的属性与方法说明singleLine 指定文本是否单行显示ellipsize 指定文本超出范围后的省略方式focusable 指定是否获得焦点,跑马灯效果要求设置 ...

随机推荐

  1. 文件操作(CRT、C++、WIN API、MFC)

    一.使用CRT函数文件操作 二.使用标准C++库 std::fstream std::string 1)std::string对象内部存储了一个C的字符串,以'\0'结尾的. 2)std::strin ...

  2. # 20155327 2016-2017-3 《Java程序设计》第5周学习总结

    20155327 2016-2017-3 <Java程序设计>第5周学习总结 教材学习内容总结 理解异常架构 粉红色的是受检查的异常(checked exceptions),其必须被 tr ...

  3. Azkaban 简介

    本文简单介绍一下Azkaban及其特点.azkaban是一个开源的任务调度系统,用于负责任务的调度运行(如数据仓库调度),用以替代linux中的crontab. 一.Azkaban是什么? 1.1 A ...

  4. 阿里云云主机swap功能设置实战案例

    阿里云云主机swap功能设置实战案例 阿里云提供的云服务器(Elastic Compute Service,简称 ECS),是云主机的一种,当前采用的虚拟化驱动是Xen(这一点可以通过bios ven ...

  5. java多线程----拒绝策略

    本章介绍线程池的拒绝策略.内容包括:拒绝策略介绍拒绝策略对比和示例 转载请注明出处:http://www.cnblogs.com/skywang12345/p/3512947.html 拒绝策略介绍 ...

  6. VMware前路难测,多个厂家群雄逐鹿

    以VMware为例,虚拟机巨头公布了第二财季报告所示,它第二财季收入同比增长13%,达到了21.7亿美元,而且该公司收入和每股收益均超出预期. 在人们高谈Salesforce.亚马逊等新兴云计算厂商取 ...

  7. 负载均衡之-LVS

    负载均衡用的很多,这里对负载均衡做一个总结吧,总共包含下面几片博文. LVS负载均衡 keepalived负载均衡+高可用 haproxy负载均衡 nginx负载均衡 LVS负载均衡 LVS是章文嵩博 ...

  8. adb shell 命令详解,android, adb logcat

    http://www.miui.com/article-275-1.html http://noobjava.iteye.com/blog/1914348 adb shell 命令详解,android ...

  9. rabbitmq架构简介(包括集群)

    总的来说,rabbitmq使用erlang语言编写,其架构类似于servlet容器运行servlet应用,底层是erlang VM.然后是erlang节点,上面是应用.如下所示: 每个MQ中运行的应用 ...

  10. SCP报错:WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!

    经过google,出现这个问题的原因是,这是ssh的问题, GkFool大神说(第一次使用SSH连接时,会生成一个认证,储存在客户端的known_hosts中) 我的解决办法是: ssh-keygen ...