js 上下滚动加停顿效果,js 跑马灯加停顿效果

<div id="middle">
<ul id="slide1">
<li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li>
<li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li>
<li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li>
<li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li>
<li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li>
<li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li>
<li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li>
<li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li>
</ul>
<ul id="slide2"></ul>
</div>
html
#middle{
width: 100%;
height: 100%;
overflow-y: auto;
}
#middle li {
height: 100%;
}
css
var speed = 40;
var app = document.getElementById('middle');
var slide1 = document.getElementById('slide1');
var slide2 = document.getElementById('slide2');
slide2.innerHTML = slide1.innerHTML;
var timer ,timeout;
function marqueeMethods(){
clearTimeout(timeout)
if(slide2.offsetTop-app.scrollTop<=0){
app.scrollTop = app.scrollTop - slide1.offsetHeight;
}else{
app.scrollTop++;
if(app.scrollTop% ($('#slide1 li').eq(0).height()) == 0){
clearTimeout(timeout);
clearInterval(timer);
timeout = setTimeout(function(){
app.scrollTop++;
return timer = setInterval(marqueeMethods,speed);
},2000);
}
}
}
timer = setInterval(marqueeMethods,speed);
js
注意 app.scrollTop% ($('#slide1 li').eq(0).height()) == 0
$('#slide1 li').eq(0).height() 这个是获取 走多少距离停的,因为要适配手机直接用jquery 获取的高度,写死的话就不能适配不同屏幕的手机了,
里面还可以自己调节速度,自己去代码吧,一看就知道改那个!
js 上下滚动加停顿效果,js 跑马灯加停顿效果的更多相关文章
- 设置TextView的密码效果以及跑马灯效果
密码效果以及跑马灯效果: xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...
- css 跑马灯加载特效
css 跑马灯加载特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
- CSS效果:跑马灯按钮
HTML代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
- Android 文字自动滚动(跑马灯)效果的两种实现方法[特别好使]
有时候在xml中写的跑马灯效果不滚动:原因有以下 Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize=”marquee” 2.TextV ...
- Android使用TextView实现跑马灯效果(自定义控件)
对于一个长的TetxView 折行显示是一个很好的办法,另一种方法就是跑马灯显示(单行滚动) 1.折行显示的长TextView <LinearLayout xmlns:android=" ...
- 【Android】TextView跑马灯效果
老规矩,先上图看效果. 说明 TextView的跑马灯效果也就是指当你只想让TextView单行显示,可是文本内容却又超过一行时,自动从左往右慢慢滑动显示的效果就叫跑马灯效果. 其实,TextView ...
- iOS中跑马灯效果小结
时光过得好快,记忆中刚刚从春节返回没有多久,清明.五一已飞逝而过,眨眼已到盛夏季节.不过还好,济南这两年不算太热,刚开始升温几天,一场及时雨总能让温度保持适宜.为了纪念一下青春的尾巴,也为了能有个健康 ...
- android 怎么实现跑马灯效果
自定义控件 FocusedTextView, 使android系统误以为它拥有焦点 public class FocusedTextView extends TextView { public Foc ...
- iOS - 跑马灯、弹幕
1.跑马灯 具体实现代码见 GitHub 源码 QExtension QMarqueeView.h #pragma mark - QMarqueeViewDelegate /// 跑马灯内容点击处理协 ...
随机推荐
- 个人常用的移动端浅灰底index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Javascript循环删除数组中元素的几种方法示例
发现问题 大家在码代码的过程中,经常会遇到在循环中移除指定元素的需求.按照常规的思路,直接一个for循环,然后在循环里面来个if判断,在判断中删除掉指定元素即可.但是实际情况往往不会像预想的那样顺利运 ...
- MFC消息 OnCtlColor 改变控件颜色
OnCtlColor 有以下几个宏定义 #define CTLCOLOR_MSGBOX 0 #define CTLCOLOR_EDIT 1 #defin ...
- mvc partialView+kendo window
在写mvc项目时,一个列表查询页面含有多个操作按钮及弹框操作.原本写在了一个view中,导致代码繁多复杂,难以维护,还有表单赋值清空.验证等麻烦. 因此改用kendo window +partialV ...
- C# rtsp 转码rtmp nginx踩下的坑
最近有一个项目, 进行步态识别的时候,同时需要显示摄像的实时画面.对于 Winform 显示画面,之前针对 rtmp 流的时候,是先写一个HTML 网页加载视频流,然后在IIS上发布,将地址直接赋值给 ...
- 深入浅出Java探针技术2---java字节码生成框架ASM、Javassist和byte buddy的使用
目前Java字节码生成框架大致有ASM.Javassist和byte buddy三种 ASM框架介绍及使用 1.ASM介绍 ASM是一种Java字节码操控框架,能够以二进制形式修改已有的类或是生成类, ...
- 2018-2019-2 《网络对抗技术》Exp2 后门原理与应用 20165215
目录 实验内容 基础问题回答 常用后门工具 Netcat windows 获取 linux 的shell linux 获取 winsdows 的shell 使用nc传输数据 使用nc传文件 Socat ...
- css3 样式过度器 Transition
transition 简写属性,用于在一个属性中设置四个过渡属性. 1. transition 把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px: eg: div{wi ...
- centos7将网卡名字改成eth样式
ll /etc/sysconfig/grub lrwxrwxrwx 1 root root 17 Jun 12 2016 /etc/sysconfig/grub -> /etc/default/ ...
- 关于Axure RP软件的介绍——软件工程实践第二次个人作业
关于Axure RP软件的介绍——软件工程实践第二次个人作业 Axure RP是一个非常专业的快速原型设计的一个工具,客户提出需求,然后根据需求定义和规格.设计功能和界面的专家能够快速创建应用软件或W ...