Qui-Note官网Logo
导航:Qui-Note/marquee-js

marquee-js

<style type="text/css">
 	.marquee{width: 300px;height: 200px;overflow: hidden;border: 1px solid #ddd;}
 	.marqueeLeft{width: 800px;height: 200px;overflow: hidden;}
 	.marqueeLeft ul{white-space: nowrap;}
 	.marqueeLeft ul li{display: inline-block;}
</style>
<div class="marquee" id="parent">
	<ul id="list">
<li>
	<h4 class="title">滚动标题</h4>
	<div class="course-list f16">
<p><a href="" target="_blank">前端知识体系</a></p>
<p><a href="" target="_blank">前端知识结构</a></p>
<p><a href="" target="_blank">Web前端开发大系概览</a></p>
<p><a href="" target="_blank">Web前端开发大系概览-中文版</a></p>
<p><a href="" target="_blank">Web Front-end Stack v2.2</a></p>
<p><a href="" target="_blank">前端书籍</a></p>
<p><a href="" target="_blank">前端免费书籍大全</a></p>
	</div>
</li>
<li>
	<h4 class="title">测试标题1</h4>
	<div class="course-list f16">
<p><a href="" target="_blank">前端入门教程</a></p>
<p><a href="" target="_blank">瘳雪峰的Javascript教程</a></p>
<p><a href="" target="_blank">jQuery基础教程</a></p>
<p><a href="" target="_blank">前端工程师必备的PS技能——切图篇</a></p>
<p><a href="" target="_blank">结合个人经历总结的前端入门方法</a></p>
	</div>
</li>
<li>
	<h4 class="title">测试标题2</h4>
	<div class="course-list f16">
<p><a href="" target="_blank">css sprite 雪碧图制作</a></p>
<p><a href="" target="_blank">版本控制入门 – 搬进 Github</a></p>
<p><a href="" target="_blank">Grunt-beginner前端自动化工具</a></p>
	</div>
</li>
	</ul>
	<ul id="list1"></ul>
</div>

<div class="marqueeLeft" id="leftParent">
	<ul id="listLeft">
<li><img src="https://images.pexels.com/photos/6069699/pexels-photo-6069699.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200" alt=""/></li>
<li><img src="https://images.pexels.com/photos/6069699/pexels-photo-6069699.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200" alt=""/></li>
<li><img src="https://images.pexels.com/photos/6069699/pexels-photo-6069699.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200" alt=""/></li>
<li><img src="https://images.pexels.com/photos/6069699/pexels-photo-6069699.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200" alt=""/></li>
<li><img src="https://images.pexels.com/photos/6069699/pexels-photo-6069699.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200" alt=""/></li>
	</ul>
	<ul id="listLeft1"></ul>
</div>
<script type="text/javascript">
	marqueeUp("parent","list","list1",40)
	function marqueeUp(a,b,c,d){
let parent = document.getElementById(a);
let child1 = document.getElementById(b);
let child2 = document.getElementById(c);
child2.innerHTML = child1.innerHTML;
let timer = setInterval(function() {
	if(parent.scrollTop >= child1.scrollHeight) {
parent.scrollTop = 0;
	} else {
parent.scrollTop++;
	}
}, d);
parent.onmouseenter = function() {
	clearTimeout(timer)
}
parent.onmouseleave = function() {
	marqueeUp("parent","list","list1",40)
}
	}
	
	marqueeLeft("leftParent","listLeft","listLeft1",40)
	function marqueeLeft(a,b,c,d){
let parent = document.getElementById(a);
let child1 = document.getElementById(b);
let child2 = document.getElementById(c);
child2.innerHTML = child1.innerHTML;
let timer = setInterval(function() {
	if(child2.offsetWidth-parent.scrollLeft<=0)
parent.scrollLeft-=child1.offsetWidth
	else{
parent.scrollLeft++;
	}
}, d);
parent.onmouseenter = function() {
	clearTimeout(timer)
}
parent.onmouseleave = function() {
	marqueeLeft("leftParent","listLeft","listLeft1",40)
}
	}
	

</script>
	

效果展示:

    X
    馊稀饭 赞助了 陈小知 9.99
    太阳 赞助了 陈小知 18.8
    fonhen 赞助了 陈小知 8.76
    admin 赞助了 陈小知 9.90
    ku5151 赞助了 陈小知 9.90
    admin 赞助了 陈小知 6.90
    Tiger 赞助了 陈小知 9.90
    cznq1106 赞助了 陈小知 9.90
    459977099 赞助了 陈小知 9.90
    2910224190 赞助了 陈小知 9.90