<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 跑马灯加停顿效果的更多相关文章

  1. 设置TextView的密码效果以及跑马灯效果

    密码效果以及跑马灯效果: xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...

  2. css 跑马灯加载特效

    css 跑马灯加载特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  3. CSS效果:跑马灯按钮

    HTML代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  4. Android 文字自动滚动(跑马灯)效果的两种实现方法[特别好使]

    有时候在xml中写的跑马灯效果不滚动:原因有以下 Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize=”marquee” 2.TextV ...

  5. Android使用TextView实现跑马灯效果(自定义控件)

    对于一个长的TetxView 折行显示是一个很好的办法,另一种方法就是跑马灯显示(单行滚动) 1.折行显示的长TextView <LinearLayout xmlns:android=" ...

  6. 【Android】TextView跑马灯效果

    老规矩,先上图看效果. 说明 TextView的跑马灯效果也就是指当你只想让TextView单行显示,可是文本内容却又超过一行时,自动从左往右慢慢滑动显示的效果就叫跑马灯效果. 其实,TextView ...

  7. iOS中跑马灯效果小结

    时光过得好快,记忆中刚刚从春节返回没有多久,清明.五一已飞逝而过,眨眼已到盛夏季节.不过还好,济南这两年不算太热,刚开始升温几天,一场及时雨总能让温度保持适宜.为了纪念一下青春的尾巴,也为了能有个健康 ...

  8. android 怎么实现跑马灯效果

    自定义控件 FocusedTextView, 使android系统误以为它拥有焦点 public class FocusedTextView extends TextView { public Foc ...

  9. iOS - 跑马灯、弹幕

    1.跑马灯 具体实现代码见 GitHub 源码 QExtension QMarqueeView.h #pragma mark - QMarqueeViewDelegate /// 跑马灯内容点击处理协 ...

随机推荐

  1. IIS网站 由http协议改变为https协议

    https://www.cnblogs.com/boosasliulin/p/6811231.html?utm_source=itdadao&utm_medium=referral

  2. pytorch数据加载器

    class torch.utils.data.DataLoader(dataset, batch_size=1, shuffle=False, sampler=None, num_workers=0, ...

  3. 【Maven Jenkins】No resource to compile 还有多少坑要踩。。。LongTimeNoSee

    [INFO] --- maven-compiler-plugin:3.1:compile (default-compile) @ toptown-webservice-vcrs ---[INFO] N ...

  4. 解决postman环境切换,自动获取api签名时间及签名

    postman调试api接口时,常遇到两个问题: 1.环境分为开发环境,测试环境,正式环境,如何只写一个接口,通过切换postman环境来实现不同环境的接口调用? 2. api接口请求时往往会添加,来 ...

  5. gvim keil 快捷跳转至出现错误(警告)行

    开发环境 win7系统中:用keil 对工程进行编译链接,用gvim编辑查看源文件. 实现效果 一键跳转到出现警告或者错误的源码. 实现原理 gvim 调用外部shell脚本,对keil编译生成的lo ...

  6. C# 键盘钩子

    p{ text-align:center; } blockquote > p > span{ text-align:center; font-size: 18px; color: #ff0 ...

  7. GIL

    GIL(Global Interpreter Look):全局解释器锁,为了避免线程竞争资源造成数据错乱. 其实每个py程序都必须有解释器参加,解释器就是一堆代码,就等于多线程要竞争同一个解释器的代码 ...

  8. 韩顺平Linux学习笔记

    第 一 章    Linux开山篇 1.1 Linux课程的内容介绍 1.2Linux的学习方向 1.2.1. Linux运维工程师:主要做大公司中的电脑系统维护,保证服务器的正常运行,如服务器的优化 ...

  9. Oracle GoldenGate 18.1 支持的DB和OS列表

    Product Release Processor Type OS Version OS Update Type OS Update Level Run Mode 32/64 Bit Database ...

  10. mysql中的内置函数

    这里主要介绍mysql丰富的内置函数. 数学函数 数学函数相对比较简单,就是涉及一些数值的计算,这里列出数学函数的功能,仅个别给出实例. 函数 作 用 ABX(x) 返回x的绝对值 CEIL(X),C ...