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 /// 跑马灯内容点击处理协 ...
随机推荐
- java Design Patterns
设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...
- ES6,ES5,ES3,对比学习~
在简书上看到一个博主写的文章,感觉很有用.留下:https://www.jianshu.com/p/287e0bb867ae Excuse me?这个前端面试在搞事!https://zhuanlan ...
- js选中变色,不选中鼠标放上变色
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- 蓝桥杯c/c++省赛真题——日志统计
标题:日志统计 [问题描述]小明维护着一个程序员论坛.现在他收集了一份"点赞"日志,日志共有N行.其中每一行的格式是:ts id 表示在ts时刻编号id的帖子收到一个" ...
- 从json-lib转成jackson的遇到的问题
从json-lib转成jackson的遇到的问题 问题一:json 字符串,再经过Jackson序列化之后就变成原生字符串了.而json-lib经过再序列化之后,还是json格式的串. 针对这种情况, ...
- Java输出流FileOutputStream使用详解
Java输出流FileOutputStream使用详解 http://baijiahao.baidu.com/s?id=1600984799323133994&wfr=spider&f ...
- 2018-2019-2 网络对抗技术 20165316 Exp5 MSF基础应用
2018-2019-2 网络对抗技术 20165316 Exp5 MSF基础应用 目录 原理与实践说明 实践原理 实践内容概述 基础问题回答 攻击实例 主动攻击的实践 ms08_067_netapi: ...
- 使用HTML meta no-cache标签来禁用缓存
使用HTML meta no-cache标签来禁用缓存 如何完美滴使浏览器访问一个 HTML 页面时禁用缓存?在测试某个 SPA 项目时,发现更改后 Chrome 浏览器页面刷新还是使用之前的版本.经 ...
- 用Flow编写更好的js代码
关于本文: 原文地址 翻译地址 译者:野草 本文发表于前端早读课[第897期] 你是否经常在debug那些简单可避免的bug?可能你给函数传参的时候搞错了参数的顺序,或者本来应该传个Number类型的 ...
- IIS的地址指向
地址指向 1)AuthwebAPI 修改web.xml文件 <connectionStrings> data source 改成当前虚拟环境的IP指向 </connectionSt ...