文档章节

单行文字滚动

0000001
 0000001
发布于 2014/06/17 15:06
字数 125
阅读 233
收藏 1

function AutoScroll(obj){

$(obj).find("li:first").animate({

marginTop:"-36px"

},500,function(){

$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);

});

}

$(function(){

setInterval('AutoScroll("#scroll")',2000)

});


css: scroll-box li{ height:36px; line-height:36px; }

<div class="scroll">

<ul class="scroll-box" id="scroll">

<li>scroll</li>

<li>scroll</li>

<li>scroll</li>

<li>scroll</li>

</ul>

</div>


//多行滚动

$(function(){

var _wrap=$('ul.notice-hd');//定义滚动区域

var _interval=3000;//定义滚动间隙时间

var _moving;//需要清除的动画

_wrap.hover(function(){

clearInterval(_moving);

},function(){

_moving=setInterval(function(){

var _field=_wrap.find('li:first');

var _h=_field.height();

_field.animate({marginTop:-_h+'px'},600,function(){

_field.css('marginTop',0).appendTo(_wrap);

})

},_interval)

}).trigger('mouseleave');

});


© 著作权归作者所有

共有 人打赏支持
上一篇: 焦点图(轮播)
下一篇: scroll
0000001
粉丝 35
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
私信 提问
Android 自定义跑马灯

前言 最近公司接到需求--「可以滚动的提示」,其实就是跑马灯。这让我想到了大学时专业物联网,当时学的单片机入门教程就是跑马灯,很是亲切。其实就是灯(或文字)按照某个方向循环滚动。 An...

下位子
2017/12/26
0
0
使用css3和js在手机上实现简单的跑马灯效果

情况描述 客户想在手机顶部的nav显示单行文字时,在字数较多,一屏显示不下的情况下,文字可以滚动起来.一开始,我是用的php做了一下字数的判断,如果字数比10个多就添加一个

小王JOJO
2016/07/02
17
0
微信小程序特殊效果合集—左滑、气泡各种酷炫动画

微信小程序的开发并不难,但是有时我们想做出比较炫的效果,可能会一时没有思路或找不到方法。下面就整理了微信小程序的一些特殊效果的案例,均来自网络,供你参考。 1、文字跑马灯效果:htt...

anda0109
2017/08/08
0
0
[翻译]Windows Phone 7 Application Controls

前言-关于这段译文 Windows Phone开发的中文资料缺乏,这段译文翻译自《UI Design and Interaction Guide for Windows Phone 7 Series》,翻译活动由http://www.wpmind.com/ 的站长小指发起,...

长平狐
2012/08/21
241
0
Emacs 26.1 发布了,文字终端支持 24 位颜色

Emacs 26.1 发布了,此次更新内容包括: 内置的 Lisp 线程机制,它提供了一些并发性 支持在缓冲区中可选显示行号 在 X Window 系统下运行时双缓冲 重新设计的 Flymake 模式 TRAMP 为 Google...

雨田桑
05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 哥们之间报恩的想法被上帝实现了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 小小编辑:推荐歌曲《消愁》 《消愁》- 毛不易 手机党少年们想听歌,请使劲儿戳(这里) @过遥 :周一的早上就应该用来补觉,太困了 周末不想...

小小编辑
17分钟前
13
3
MariaDB 服务器在 MySQL Workbench 备份数据的时候出错如何解决

服务器是运行在 MariaDB 10.2 上面的,在使用 MySQL Workbench 出现错误: mysqldump: Couldn't execute 'SELECT COLUMN_NAME, JSON_EXTRACT(HISTOGRAM, '$."number-of-buckets-specified"'......

honeymose
今天
3
0
apache顶级项目(二) - B~C

apache顶级项目(二) - B~C https://www.apache.org/ Bahir Apache Bahir provides extensions to multiple distributed analytic platforms, extending their reach with a diversity of s......

晨猫
今天
7
0
day152-2018-11-19-英语流利阅读

“超级食物”竟然是营销噱头? Daniel 2018-11-19 1.今日导读 近几年来,超级食物 superfoods 开始逐渐走红。不难发现,越来越多的轻食餐厅也在不断推出以超级食物为主打食材的健康料理,像是...

飞鱼说编程
今天
18
1
SpringBoot源码:启动过程分析(二)

接着上篇继续分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 一样的,我们先把时序图贴上来,方便理解: 二.源码分析 回顾一下,前面我们分析到了下...

Jacktanger
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部