文档章节

单行文字滚动

0000001
 0000001
发布于 2014/06/17 15:06
字数 125
阅读 231
收藏 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');

});


© 著作权归作者所有

共有 人打赏支持
0000001
粉丝 35
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
Android 自定义跑马灯

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

下位子
2017/12/26
0
0
css杂类收集

单行不换行显示 需要设置宽度/或者最大宽度 width:xxxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; 如果想要设计input 输入框的边框格式 需要手动添加边框 border:1px s...

bosscheng
2015/10/21
83
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

没有更多内容

加载失败,请刷新页面

加载更多

67:shell脚本介绍 | shell脚本结构 | 执行data命令用法 | shell脚本中变量

1、shell脚本介绍: shell是一种脚本语言和传统的开发语言相比,会比较简单: shell有自己语法,可以支持逻辑判断、循环等语法: 可以自定义函数,目的是减少重复的代码: shell是系统命令的集合...

芬野de博客
34分钟前
1
0
json schema

json schema是用来验证和描述json对象结构的。 在线验证:https://www.jsonschemavalidator.net/ json schema 编辑器,推荐VSCode,写上"$schema": "https://raw.githubusercontent.com/jso......

谷永权
38分钟前
1
0
部署生产级的 Kubernetes 集群,使用kubespray

部署生产级的 Kubernetes 集群,使用kubespray 项目源码,https://github.com/openthings/kubespray 国内部署,https://github.com/zhangguanzhang/Kubernetes-ansible 欢迎加入 kubernetes......

openthings
46分钟前
0
0
73.分发系统介绍 expect脚本远程登录 执行命令 传递参数

20.27 分发系统介绍 20.28 expect脚本远程登录 20.29 expect脚本远程执行命令 20.30 expect脚本传递参数 20.27 分发系统介绍: 场景:业务越来越大。用的比如app,后端(也就是服务器)所使用...

王鑫linux
51分钟前
0
0
SpringBoot应用不能访问项目静态页面html问题处理

问题描述:SpringBoot搭建web应用在eclipse中启动能够正常访问页面,打包成jar之后不能访问到页面,没有任何出错提示。 环境:使用的是前后端分离架构,没有使用模板,前端html和静态文件放到...

奋斗小蜗牛
54分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部