文档章节

单行文字滚动

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
粉丝 34
博文 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
314
0
Emacs 26.1 发布了,文字终端支持 24 位颜色

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

h4cd
2018/05/29
2.7K
13

没有更多内容

加载失败,请刷新页面

加载更多

centos7重置密码、单用户模式、救援模式、ls命令、chmod命令

在工作当中如果我们错误的配置了文件使服务器不能正常启动或者忘记密码不能登录系统,如何解决这些问题呢?重装系统是可以实现的,但是往往不能轻易重装系统的,下面用忘记密码作为例子讲解如...

李超小牛子
今天
3
0
Python如何开发桌面应用程序?Python基础教程,第十三讲,图形界面

当使用桌面应用程序的时候,有没有那么一瞬间,想学习一下桌面应用程序开发?行业内专业的桌面应用程序开发一般是C++,C#来做,Java开发的也有,但是比较少。本节课会介绍Python的GUI(图形用...

程序员补给栈
今天
6
0
kafka在的使用

一、基本概念 介绍 Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统...

狼王黄师傅
今天
3
0
Android JNI总结

0x01 JNI介绍 JNI是Java Native Interface的缩写,JNI不是Android专有的东西,它是从Java继承而来,但是在Android中,JNI的作用和重要性大大增强。 JNI在Android中起着连接Java和C/C++层的作...

天王盖地虎626
昨天
3
0
大数据教程(11.8)Hive1.2.2简介&初体验

上一篇文章分析了Hive1.2.2的安装,本节博主将分享Hive的体验&Hive服务端和客户端的使用方法。 一、Hive与hadoop直接的关系 Hive利用HDFS存储数据,利用MapReduce查询数据。 二、Hive与传统数...

em_aaron
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部