實現(xiàn)向左滾動時受限于父盒子大小，兩個UL不能在一行，怎么處理，代碼如下
<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>Document</title>
?? ?<style>
?? ?*{margin: 0;padding: 0;}
#box{width: 300px;height: 300px;background: #eee;margin:100px;overflow: hidden;}
ul{list-style: none;width: 400px;height: 300px;background: #aaa;float: left;}
a{text-decoration: none;color: #333;display: block;height: 30px;line-height: 40px;width: 200px;}
</style>
</head>
<body>
?? ?<div id="box">
?? ??? ??? ?<ul id="content">
?? ??? ??? ??? ?<li><a href="#">1新聞內(nèi)容</a></li>
?? ??? ??? ??? ?<li><a href="#">2新聞內(nèi)容</a></li>
?? ??? ??? ??? ?<li><a href="#">3新聞內(nèi)容</a></li>
?? ??? ??? ??? ?<li><a href="#">4新聞內(nèi)容</a></li>
?? ??? ??? ??? ?<li><a href="#">5新聞內(nèi)容</a></li>
?? ??? ??? ??? ?<li><a href="#">6新聞內(nèi)容</a></li>
?? ??? ??? ??? ?<li><a href="#">7新聞內(nèi)容</a></li>
?? ??? ??? ??? ?<li><a href="#">8新聞內(nèi)容</a></li>
?? ??? ??? ??? ?<li><a href="#">9新聞內(nèi)容</a></li>
?? ??? ??? ??? ?<li><a href="#">10新聞內(nèi)容</a></li>
?? ??? ??? ?</ul>
?? ??? ??? ?<ul id="content2"></ul>
?? ?</div>
?? ?<script>
window.onload=function () {
?? ?
?? ??? ?var oBox=document.getElementById('box');
?? ??? ?var ct1=document.getElementById('content');
?? ??? ?var ct2=document.getElementById('content2');
?? ??? ?ct2.innerHTML=ct1.innerHTML;
?? ??? ?var myScroll=setInterval(scrollUp,50)
?? ??? ?oBox.onmouseover=function () {
?? ??? ??? ?clearInterval(myScroll);
?? ??? ?}
?? ??? ?oBox.onmouseout=function () {
?? ??? ?myScroll=setInterval(scrollUp,50)
?? ??? ?}
?? ??? ?function scrollUp() {if (oBox.scrollLeft>=ct1.offsetLeft) {oBox.scrollLeft=0}else{(oBox.scrollLeft++)}}
?????? ?
?????? ?
}
?? ?</script>
</body>
</html>
2016-05-10
我實現(xiàn)的思路是：兩個盒子，里面的盒子比外面盒子寬度長，因為里面的盒子用來放<li>標(biāo)簽元素，然后外面盒子移動，超過本身的寬度被隱藏。代碼發(fā)給你看看吧
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-family: "微軟雅黑";
font-size: 8px;
text-align: center;
}
* {
padding: 0;
margin: 0;
}
#maxbox {
width: 175px;
height: 100px;
border: 1px solid black;
margin: 10px auto;
box-shadow: 2px 2px 2px grey;
overflow: hidden;
}
#box {
width: 390px;
height: 100px;
border: 1px solid gold;
float: left;
}
#box ul {
float: left;
}
#box ul li {
height: 5px;
list-style: none;
}
#box ul li a {
float: left;
display: block;
text-indent: 15px;
height: 20px;
text-decoration: none;
}
a:hover {
color: gold;
}
</style>
</head>
<body>
<div id="maxbox">
<div id="box">
<ul id="con1">
<li><a href="#">1.學(xué)會html5 絕對的屌絲逆襲（案例）</a></li>
<li><a href="#">2.tab頁面切換效果（案例）</a></li>
<li><a href="#">3.圓角水晶按鈕制作（案例）</a></li>
<li><a href="#">4.HTML+CSS基礎(chǔ)課程(系列)</a></li>
<li><a href="#">5.分頁頁碼制作（案例）</a></li>
</ul>
<ul id="con2">
</ul>
</div>
</div>
<script>
var x = document.getElementById("maxbox");
//var are = document.getElementById("box");
var con1 = document.getElementById("con1");
var con2 = document.getElementById("con2");
var speed = 30;
con2.innerHTML = con1.innerHTML;
x.scrollLeft=0;
function scrollUp() {
if (x.scrollLeft>=x.offsetWidth) {
x.scrollLeft = 0 ;
} else {
x.scrollLeft++ ;
}
}
var myScroll = setInterval("scrollUp()", speed);
x.onmouseover = function() {
clearInterval(myScroll);
}
x.onmouseout = function() {
myScroll = setInterval("scrollUp()", speed);
}
</script>
</body>
</html>