原生js实现文字轮播

版权声明:非经本人同意,请勿转载。 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>&nbsp;提醒</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>&nbsp;超经典科幻大片重启!百分百必看</a>&nbsp;&nbsp;
        <a href="###"><i class="fa fa-circle" aria-hidden="true"></i>&nbsp;首发立减700元!AMD次旗舰来了:功耗大亮</a>&nbsp;&nbsp;
    </marquee>
</div>

<script>

</script>

</body>
</html>

效果图: 

猜你喜欢

转载自blog.csdn.net/QQ_Empire/article/details/82793358
今日推荐