<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. CarbonData-1:common

    最近公司需要对CarbonData进一步应用,或许封装进产品,或许是为了解析CarbonData元数据,于是开始预研CarbonData,下面将保持每天一篇以上的阅读CarbonData源码博客,由于 ...

  2. memcached----------linux下安装memcached,以及php的memcached扩展。

    1.通过wget http://www.memcached.org/files/memcached-1.4.24.tar.gz下载最新源码2.解压tar -xf memcached-1.4.24.ta ...

  3. linux----------centos下添加环境变量

    1.添加PHP的环境变量.如图操作 其中在 /etc/profile里面编辑的内容是:只加了这一行,箭头所指的那一行. 2.需要添加其他环境变量就在后面用 :追加 PATH=$PATH:/usr/lo ...

  4. Unity3D中的shader基础知识

    1.Unity中配备了强大的阴影和材料的语言工具称为ShaderLab,以程式语言来看,它类似于CgFX和Direct3D的效果框架语法,它描述了材质所必须要的一切咨询,而不仅仅局限于平面顶点/像素着 ...

  5. 福州大学软件工程1916|W班 第2次作业成绩排名

    作业链接: 结对第一次-原型设计(文献摘要热词统计) 评分准则: 本次作业评分分为两部分,一部分是博客分数(满分25分),另一部分是工程能力分数(满分30分). 博客分数评分标准: 1.在随笔开头请加 ...

  6. 纪念一下学写pipeline时脑子里的坑

    用的是filespipeline,用的存储地址是images的地址 测试煎蛋ooxx首页,shell测试的时候返回很多列表,但是实际爬的时候一直只返回一条,很烦,一直测一直测,就是不行,后来才发现,首 ...

  7. Tensorflow object detection API 搭建属于自己的物体识别模型

    一.下载Tensorflow object detection API工程源码 网址:https://github.com/tensorflow/models,可通过Git下载,打开Git Bash, ...

  8. EXCEL 如何实现下拉填充公式,保持公式部分内容不变,使用绝对引用

    EXCEL 如何实现下拉填充公式,保持公式部分内容不变,使用绝对引用 在不想变的单元格前加$符号(列标和列数,两个都要加$),变成绝对引用,默认情况是相对引用 L4固定不变的方式:$L$4 M4固定不 ...

  9. rabbitMq交换机direct、topics

    一: direct 上面我用采用了广播的模式进行消息的发送,现在我们采用路由的方式对不同的消息进行过滤 发送端代码 public class RoutingSendDirect { private s ...

  10. package.json的配置理解

    一.初步理解 1. npm安装package.json时  直接转到当前项目目录下用命令npm install 或npm install --save-dev安装即可,自动将package.json中 ...