文字向上向左滚动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文字向上向左滚动相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>信息情况展示</title>
<style>
body,ul,li,dl,dd{
margin: 0;
padding: 0;
}
.content{
background: rgba(0,0,0,0) url("../image/background.png") no-repeat scroll center center;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
ul{
list-style: none;
}
.clearfix::after{
content: "";
height:0;
clear: both;
display: block;
visibility: hidden;
}
.logo{
margin: 20px 0 0 25px;
}
.layout{
text-align: center;
padding: 10px 25px 0 25px;;
}
.list-info dd{
float: left;
text-align: center;
height: 40px;
line-height: 40px;
color: #fff;
background: #007cc4;
box-sizing: border-box;
}
.list-info li span{
display: block;
float: left;
box-sizing: border-box;
}
.list-info li{
float: left;
width: 100%;
height: 40px;
line-height: 40px;
}
.btm-title{
width: 100%;
height: 40px;
line-height: 40px;
}
.btm-list{
width: 100%;
height: 80px;
overflow: hidden;
border: 1px solid #f4f4f4;
box-sizing: border-box;
font-size: 14px;
}
.btm-list ul{
height: 80px;
}
.btm-title dd:nth-child(1), .btm-list li span:nth-child(1){
width: 20%;
border-right: 1px solid #e5e5e5;
}
.btm-title dd:nth-child(2), .btm-list li span:nth-child(2){
width: 20%;
border-right: 1px solid #e5e5e5;
}
.btm-title dd:nth-child(3), .btm-list li span:nth-child(3){
width: 20%;
border-right: 1px solid #e5e5e5;
}
.btm-title dd:nth-child(4), .btm-list li span:nth-child(4){
width: 20%;
border-right: 1px solid #e5e5e5;
}
.btm-title dd:nth-child(5), .btm-list li span:nth-child(5){
width: 20%;
}
.section{
border: 1px solid #f4f4f4;
}
.footer{
margin-bottom: 0;
height: 30px;
line-height: 30px;
background: #ebebeb;
font-size: 14px;
text-align: center;
}
.left-info{
margin-bottom: 10px;
border: 1px solid #f4f4f4;
box-sizing: border-box;
width: 50%;
}
.top-title, .btm-title{
font-size: 18px;
}
.btm-pic{
width: 100%;
}
</style>
</head>
<body>
<div class="content">
<div><img class="logo" src="../image/logo.png"/></div>
<div class="layout">
<div id="demo" class="welcome" style="overflow:hidden;height:290px;width:100%;padding-top: 30px;">
<table cellpadding="0" cellspace="0" border="0">
<tr>
<td id="demo1">
<table width="2000px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size: 106px;color: #cc0000;word-break:keep-all;overflow:hidden;font-weight: bold;white-space: nowrap;letter-spacing: 15px;">欢迎XX市交易中心领导莅临检查</td>
</tr>
</table>
</td>
<td id="demo2"></td>
</tr>
</table>
</div>
<div class="section">
<div class="list-info left-info">
<dl class="btm-title clearfix">
<dd>今日开标项目名称</dd>
<dd>项目类别</dd>
<dd>交易方式</dd>
<dd>开标时间</dd>
<dd>开标室</dd>
</dl>
<div class="btm-list">
<ul>
<li style="background: #fff;"><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施</span><span>01长沙抽</span><span>01长纱厂</span><span>01长沙厂</span></li>
<li style="background: #f3f5f6;"><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施</span><span>02长沙抽</span><span>01长纱厂</span><span>01长沙厂</span></li>
<li style="background: #fff;"><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施</span><span>03长沙抽</span><span>01长纱厂</span><span>01长沙厂</span></li>
<li style="background: #f3f5f6;"><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施</span><span>04长沙抽</span><span>01长纱厂</span><span>01长沙厂</span></li>
<li style="background: #fff;"><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施</span><span>05长沙抽</span><span>01长纱厂</span><span>01长沙厂</span></li>
<li style="background: #f3f5f6;"><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施</span><span>01长沙抽</span><span>01长纱厂</span><span>01长沙厂</span></li>
<li style="background: #fff;"><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施</span><span>01长沙抽</span><span>01长纱厂</span><span>01长沙厂</span></li>
<li style="background: #f3f5f6;"><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施</span><span>01长沙抽</span><span>01长纱厂</span><span>01长沙厂</span></li>
<li style="background: #fff;"><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施</span><span>01长沙抽</span><span>01长纱厂</span><span>01长沙厂</span></li>
</ul>
</div>
<div>
<img class="btm-pic" src="../image/pic.png" />
</div>
</div>
</div>
</div>
<footer>
<div class="footer">技术支持：XXXX有限公司</div>
</footer>
</div>
<script src="../js/common/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function autoScroll(obj){
$(obj).find("ul").animate({
marginTop : "-40px"
},500,function(){
var back = $(this).find("li:first").css(‘background‘);
console.log(back);
$(this).css({marginTop : "0px",background:back}).find("li:first").appendTo(this);
})
}
$(function(){
// 向上滚动
// setInterval(‘autoScroll(".cycle")‘,3000);
setInterval(‘autoScroll(".btm-list")‘,3000);
// 向左滚动
var speed=3;
var MyMar=setInterval(Marquee,speed);
document.getElementById(‘demo2‘).innerHTML=document.getElementById(‘demo1‘).innerHTML;
// document.getElementById(‘demo‘).onmouseover=function() {clearInterval(MyMar)};
// document.getElementById(‘demo‘).onmouseout=function() {MyMar=setInterval(Marquee,speed)};
function Marquee(){
if(document.getElementById(‘demo2‘).offsetWidth-document.getElementById(‘demo‘).scrollLeft<=0)
document.getElementById(‘demo‘).scrollLeft-=document.getElementById(‘demo1‘).offsetWidth;
else{
document.getElementById(‘demo‘).scrollLeft++;
}
}
});
</script>
</body>
</html>
以上是关于文字向上向左滚动的主要内容，如果未能解决你的问题，请参考以下文章