<!DOCTYPE html ><html ><head><meta charset="utf-8" /><title>ls</title><style>*{ padding:0px; margin:0px;}#table{ height:300px; width:400px; border:2px solid gray; margin:50px auto; border-radius:5px; overflow:hidden;}#first{ height:80px; width:398px; background:red; color:white; border:1px solid red; border-radius:1px 1px 0px 0px; line-height:80px; overflow:hidden;}h2{ margin-left:30px;}#first span{ margin-right:30px; line-height:80px; float:right; font-size:13px;} ul{ list-style:none; }#last ul li a{ text-decoration:none; color:black; margin-left:30px; line-height:30px; list-style:none; font-size:13px;}#last span{ margin-right:30px; line-height:30px; float:right;}a:hover { color: #ff0000;}</style><script type="text/javascript"> var area = document.getElementById('last'); var con1 = document.getElementById('con1'); var con2 = document.getElementById('con2'); var speed = 50; area.scrollTop = 0; con2.innerHTML = con1.innerHTML; function scrollUp(){ if(area.scrollTop >= con1.scrollHeight) { area.scrollTop = 0; }else{ area.scrollTop ++; } }var myScroll = setInterval("scrollUp()",speed);area.onmouseover = function(){ clearInterval(myScroll); }area.onmouseout = function(){ myScroll = setInterval("scrollUp()",speed); }</script></head><body><div id="table"><div id="first"><h2>慕课网最新课程<span>更多>> </span></h2></div><div id="last"><ul id="con1"><li> <a href="#">1.学会HTML5<span>2017-03-06</span></a></li><li> <a href="#">2.学会HTML5<span>2017-03-06</span></a></li><li> <a href="#">3.学会HTML5<span>2017-03-06</span></a></li><li> <a href="#">4.学会HTML5<span>2017-03-06</span></a></li><li> <a href="#">5.学会HTML5<span>2017-03-06</span></a></li><li> <a href="#">6.学会HTML5<span>2017-03-06</span></a></li><li> <a href="#">7.学会HTML5<span>2017-03-06</span></a></li></ul><ul id="con2"></ul></div></div></body></html>
3 回答
qq_时光隧道_0
TA贡献6条经验 获得超1个赞
<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8" />
<title>ls</title>
<style>
*{
padding:0px;
margin:0px;
}
#table{
position:relative;
height:300px;
width:400px;
border:2px solid gray;
margin:50px auto;
border-radius:5px;
overflow:hidden;
}
#first{
height:80px;
width:398px;
background:red;
color:white;
border:1px solid red;
border-radius:1px 1px 0px 0px;
line-height:80px;
overflow:hidden;
}
h2{
margin-left:30px;
}
#first span{
margin-right:30px;
line-height:80px;
float:right;
font-size:13px;
}
ul{
list-style:none;
}
#last{
width:200px;
height:210px;
overflow:hidden;
position:absolute;
top:80px;
}
#last ul li a{
text-decoration:none;
color:black;
margin-left:30px;
line-height:30px;
list-style:none;
font-size:13px;
}
#last span{
margin-right:30px;
line-height:30px;
float:right;
}
a:hover {
color: #ff0000;
}
</style>
<script type="text/javascript">
window.onload=function(){
var area = document.getElementById('last');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
var speed = 500;
console.log(area);
area.scrollTop = 0;
con2.innerHTML = con1.innerHTML;
console.log(con2.innerHTML)
function scrollUp(){
console.log(area.scrollTop);
console.log(con1.scrollHeight);
if(area.scrollTop >= con1.scrollHeight) {
area.scrollTop = 0;
}else{
area.scrollTop=area.scrollTop+20;
}
}
var myScroll = setInterval(scrollUp,speed);
area.onmouseover = function(){
//alert("鼠标进来");
clearInterval(myScroll);
}
area.onmouseout = function(){
//alert("鼠标出去");
myScroll = setInterval(scrollUp,speed);
}
}
</script>
</head>
<body>
<div id="table">
<div id="first">
<h2>慕课网最新课程<span>更多>> </span></h2>
</div>
<div id="last">
<ul id="con1">
<li> <a href="#">1.学会HTML5<span>2017-03-06</span></a></li>
<li> <a href="#">2.学会HTML5<span>2017-03-06</span></a></li>
<li> <a href="#">3.学会HTML5<span>2017-03-06</span></a></li>
<li> <a href="#">4.学会HTML5<span>2017-03-06</span></a></li>
<li> <a href="#">5.学会HTML5<span>2017-03-06</span></a></li>
<li> <a href="#">6.学会HTML5<span>2017-03-06</span></a></li>
<li> <a href="#">7.学会HTML5<span>2017-03-06</span></a></li>
</ul>
<ul id="con2">
</ul>
</div>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消