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. java selenium webdriver处理JS操作窗口滚动条

    未经作者允许,禁止转载!!! java selenium webdriver处理JS操作窗口滚动条 java selenium webdriver处理JS操作窗口滚动条 import org.open ...

  2. SV中的线程

    SV中线程之间的通信可以让验证组件之间更好的传递transaction. SV对verilog建模方式的扩展:1) fork.....join 必须等到块内的所有线程都执行结束后,才能继续执行块后的语 ...

  3. 3/5/2014 cfb 小心

    During each move the player can choose all lines of the matrix where dwarf is not on the cell with c ...

  4. Oracle 启动的时候需要的服务

  5. Linux基础命令---ckconfig

    chkconfig 启动或者关闭系统服务,设置服务的运行级别,该指令并不会立刻启动或者停止服务,而是在开机的时候发生效果. chkconfig提供了一个简单的命令行工具,用于维护/etc/rc[0-6 ...

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

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

  7. tmocat ssl 证书 生成 过程

    . "%JAVA_HOME%\bin\keytool" -genkey -alias tomcat -keyalg RSA -keystore D:\Youxun\keystore ...

  8. aspose 小记

    /// <summary> /// 定位书签替换值 /// </summary> /// <param name="documentBuilder"& ...

  9. 教你如何构建异步服务器和客户端的 Kotlin 框架 Ktor

    Ktor 是一个使用 Kotlin 以最小的成本快速创建 Web 应用程序的框架. Ktor 是一个用于在连接系统(connected systems)中构建异步服务器和客户端的 Kotlin 框架. ...

  10. Web安全学习笔记之DES算法实例详解

    转自http://www.hankcs.com/security/des-algorithm-illustrated.html 译自J. Orlin Grabbe的名作<DES Algorith ...