<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. 爬虫-----爬取所有国家的首都、面积 ,并保存到txt文件中

    # -*- coding:utf-8 -*- import urllib2import lxml.htmlfrom lxml import etree def main(): file = open( ...

  2. 蓝桥杯近3年初赛题之三(17年b组)

    1. 标题: 购物单 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推辞. 这不,XX大促销又来了!老板夫人开出了长长的购物单,都是 ...

  3. elasticsearch开机启动脚本

    最近搭建了一个elasticsearch服务,其中机器重启而ES服务没有重启是问题,就有下面的脚本 #!/bin/sh #chkconfig: #description: es export JAVA ...

  4. linux软AP--hostapd+dhcpd

    linux软AP--hostapd+dhcpd 2018年05月08日 ⁄ 综合 ⁄ 共 4908字 ⁄ 字号 小 中 大 ⁄ 评论关闭 随着手机.笔记本等无线设备的增多,公司里的家用三个无线路由器已 ...

  5. Hive中常用的参数配置

    -- 查看当前环境参数配置set -v;-- 重置配置为默认值reset; -- 调整map数-- input的文件大小,集群设置的文件块大小,hive中通过set dfs.block.size;命令 ...

  6. Node.js 搭建 https 协议 服务器

    var https = require('https'); //创建服务器 https var fs = require('fs'); //文件系统的模块 const hostname = '127. ...

  7. (简单)华为M3揽月 BTV-W09的Usb调试模式在哪里开启的经验

    每次我们使用pc链上安卓手机的时候,如果手机没有开启Usb调试模式,pc则没办法成功识别我们的手机,有时候,我们使用的一些功能较好的app如以前我们使用的一个app引号精灵,老版本就需要开启Usb调试 ...

  8. SSH 安全加固

    检查密码重用是否受限制 | 身份鉴别 说明:强制用户不重用最近使用的密码,降低密码猜测攻击风险 描述:设置较低的Max AuthTrimes参数将降低SSH服务器被暴力攻击成功的风险. 加固建议:在/ ...

  9. MySQL高性能优化规范建议,速度收藏

    数据库命令规范 •所有数据库对象名称必须使用小写字母并用下划线分割•所有数据库对象名称禁止使用 MySQL 保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来)•数据库对象的命名要能做到见 ...

  10. 浅谈Tarjan算法

    从这里开始 预备知识 两个数组 Tarjan 算法的应用 求割点和割边 求点-双连通分量 求边-双连通分量 求强连通分量 预备知识 设无向图$G_{0} = (V_{0}, E_{0})$,其中$V_ ...