版权声明:非经本人同意,请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/82793358
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的滚文字动-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<style>
.scroll_news {
height:30px;
width:100%;
border:#e3e3e3 1px solid;
box-shadow:#979595 2px 2px 2px 2px;
}
.scroll_news span {
float:left;
height:30px;
line-height:30px;
color:#b81c22;
font-size:16px;
padding-left:10px;
margin-right:-70px;
}
.scroll_con {
height:30px;
line-height:30px;
font-size:9px;
padding-left:10px;
float:left;
margin-left:70px;
}
.scroll_con a {
color:#000000;
}
.scroll_con a:hover {
color:#FF0000;
}
</style>
</head>
<body>
<div class="scroll_news">
<span><i class="fa fa-bullhorn" aria-hidden="true"></i> 提醒</span>
<marquee scrollamount="3" scrolldelay="0" direction="left" class="scroll_con" onmouseout="this.start()" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" onmouseover="this.stop()">
<a href="###"><i class="fa fa-circle" aria-hidden="true"></i> 超经典科幻大片重启!百分百必看</a>
<a href="###"><i class="fa fa-circle" aria-hidden="true"></i> 首发立减700元!AMD次旗舰来了:功耗大亮</a>
</marquee>
</div>
<script>
</script>
</body>
</html>