                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息滚动效果制作

实现向左滚动时受限于父盒子大小，两个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新闻内容</a></li>
               <li><a href="#">2新闻内容</a></li>
               <li><a href="#">3新闻内容</a></li>
               <li><a href="#">4新闻内容</a></li>
               <li><a href="#">5新闻内容</a></li>
               <li><a href="#">6新闻内容</a></li>
               <li><a href="#">7新闻内容</a></li>
               <li><a href="#">8新闻内容</a></li>
               <li><a href="#">9新闻内容</a></li>
               <li><a href="#">10新闻内容</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>

SamuleQiu

2016-05-09

源自：信息滚动效果制作 2-3

关注问题我要回答

658

操作

收起

1 回答

if_else_
2016-05-10

我实现的思路是：两个盒子，里面的盒子比外面盒子宽度长，因为里面的盒子用来放<li>标签元素，然后外面盒子移动，超过本身的宽度被隐藏。代码发给你看看吧

<html>

<head>

<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>

<li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a></li>

<li><a href="#">2.tab页面切换效果（案例）</a></li>

<li><a href="#">3.圆角水晶按钮制作（案例）</a></li>

<li><a href="#">4.HTML+CSS基础课程(系列)</a></li>

<li><a href="#">5.分页页码制作（案例）</a></li>

</ul>

</ul>

</div>

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>

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

信息滚动效果制作

参与学习 47751 人
解答问题 321 个

萌妹子带您快速学习滚动效果，掌握无缝滚动和歇间性滚动的制作方法

进入课程

实现向左滚动时受限于父盒子大小，两个UL不能在一行，怎么处理，代码如下

我要回答关注问题

热搜

最近搜索清空

实现向左滚动时受限于父盒子大小，两个UL不能在一行，怎么处理，代码如下

1 回答

实现向左滚动时受限于父盒子大小，两个UL不能在一行，怎么处理，代码如下