移动端消息滚动效果 - web吧

level 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>移动端消息滚动效果</title>
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style type="text/css"media="all">
*{
margin: 0;
padding: 0;
}
a{
outline: 0;
color: #323232;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
ul,li{
list-style: none;
}
em {
font-style: normal;
}
div, input, textarea, button, a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
div, ul, li, dl, dt, dd, table, td, input {
font-size: 12px;
}
*, ::after, ::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.zxjx {
background: #f6f6f6;
}
.demo{
width:90%;
margin:auto;
overflow:hidden;
height:1.62rem;
line-height: 1.62rem;
position: absolute;
top:0;
bottom: 0;
left:0;
right:0;
}
.zxjx_1 {
font-family: "MicroSoft Yahei";
background: #f6f6f6;
overflow: hidden;
padding: 0.5rem 0.31rem;
height: 2rem;
position: relative;
}
.hj {
color: #cb0504;
}
</style>
<body>
<div>
<div id="demo">
<ul id="demo1">
<li>
<ahref="javascript:;">
<emclass="hj">奇点</em> 刚刚创惠易购1人次，贡献1份爱心</a>
</li>
<li>
<ahref="javascript:;">
<emclass="hj">恒久相依</em> 刚刚创惠易购97人次，贡献97份爱心</a>
</li>
<li>
<ahref="javascript:;">
<emclass="hj">恒久相依</em> 刚刚创惠易购28人次，贡献28份爱心</a>
</li>
<li>
<ahref="javascript:;">
<emclass="hj">不哭不闹</em> 刚刚创惠易购10人次，贡献10份爱心</a>
</li>
<li>
<a href="javascript:;">
<emclass="hj">奇点</em> 刚刚创惠易购48人次，贡献48份爱心</a>
</li>
<li>
<ahref="javascript:;">
<emclass="hj">奇点</em> 刚刚创惠易购10人次，贡献10份爱心</a>
</li>
<li>
<ahref="javascript:;">
<emclass="hj">恒久相依</em> 刚刚创惠易购3人次，贡献3份爱心</a>
</li>
<li>
<ahref="javascript:;">
<emclass="hj">恒久相依</em> 刚刚创惠易购1人次，贡献1份爱心</a>
</li>
<li>
<ahref="javascript:;">
<emclass="hj">恒久相依</em> 刚刚创惠易购1人次，贡献1份爱心</a>
</li>
<li>
<ahref="javascript:;">
<emclass="hj">奇点</em> 刚刚创惠易购1人次，贡献1份爱心</a>
</li>
</ul>
<div id="demo2"></div>
</div>
</div>
<script>
var speed = 60
var demo = document.getElementById("demo");
var demo2 = document.getElementById("demo2");
var demo1 = document.getElementById("demo1");
demo2.innerHTML = demo1.innerHTML
function Marquee() {
if (demo2.offsetTop - demo.scrollTop <= 0)
demo.scrollTop -= demo1.offsetHeight
else {
demo.scrollTop++
}
}
var MyMar = setInterval(Marquee, speed)
demo.onmouseover = function() {
clearInterval(MyMar)
}
demo.onmouseout = function() {
MyMar = setInterval(Marquee, speed)
}
</script>
</body>
</html>

2017年02月21日 02点02分 1

level 1

依树而生的藤楼主

2017年03月14日 03点03分 3

level 1

丝丝chanel

java开发项目：嗖嗖移动业务大厅、吃货联盟订餐系统、SSH开发OA系统（系统建模）、TXT迷你小说阅读器、韩国ST电商平台项目剖析、快速报表项目分享（设计篇）、快速报表项目分享(实战篇)、萝卜特项目分享
公益学习交流平台【课工场IT活动交流群120342833】,保你快速入门,每周定期有公开直播课，有业内大咖为你授业解惑，海量真实项目案例分享，从零到大神的成功之路，从你相信我开始!!!

2017年03月20日 08点03分 4

level 1

丝丝chanel

java开发项目：嗖嗖移动业务大厅、吃货联盟订餐系统、SSH开发OA系统（系统建模）、TXT迷你小说阅读器、韩国ST电商平台项目剖析、快速报表项目分享（设计篇）、快速报表项目分享(实战篇)、萝卜特项目分享
公益学习交流平台【课工场IT活动交流群120342833】,保你快速入门,每周定期有公开直播课，有业内大咖为你授业解惑，海量真实项目案例分享，从零到大神的成功之路，从你相信我开始!!!

2017年03月20日 08点03分 5

level 1

依树而生的藤楼主

2017年04月20日 08点04分 6