为了账号安全,请及时绑定邮箱和手机立即绑定

请问?我的代码必须加上<marquee>标签才会滚动,而且也没有无缝滚动,为什么?xiexie

<<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 

<title>0916-2无缝滚动</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

body{

text-align: center;

font-size: 12px;

line-height: 24px;

}

ul{

list-style: none;

}

a{

color: #000;

text-decoration: none;

}

a:hover{

color: #00f;

}

#bigBox{

width: 400px;

border:5px solid #ababab;

border-radius: 15px;

margin: 50px auto 0;

text-align:left;

/* -moz-border-radius:15px;

-webkit-border-radius:15px;

box-shadow: 2px 2px 10px #ababab;*/

}

#topBox{

font-size: 26px;

height: 62px;

line-height: 62px;

overflow: hidden;

padding-left: 30px;

color: #fff;

background: #f00;

position: relative;

border:1px solid #f00;

border-radius:8px 8px 0 0;

}

#topBox a{

position: absolute;/*父级relative子级absolute可具体定位*/

right: 10px;

bottom: 10px;

font-size: 14px;

line-height: 24px;

display: inline;

color: #fff;

}

#topBox a:hover{

color: #00f;

}

#bottomBox{

width: 335px;

/*height: 144px;*/

margin-left: 25px;

margin-top: 10px;

overflow: hidden;

}

#bottomBox ul li{

height: 24px;

}

#bottomBox ul li a{

width: 180px;

height: 24px;

text-indent: 15px;

/* float: left;

display: block;

overflow: hidden;*/

}

#bottomBox ul li span{

float: right;

color: #999;

}

</style>

<script type="text/javascript">

var area=document.getElementById("bottomBox");

var cont1=document.getElementById("cont1");

var cont2=document.getElementById("cont2");

cont2.innerHTML=cont1.innerHTML;

var speed=50;

area.scrollTop=0;

function scrollUp(){

if (area.scrollTop>=cont1.offsetHeight){

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="bigBox">

<div id="topBox">

<span class="logCont">慕课网最新课程</span><a href="#">更多&gt;&gt;</a>

</div>

<div id="bottomBox">

<marquee behavior="scroll" direction="up" loop=-1 scrollamount="2" scrolldelay="100" onmouseover="stop();" onmouseout="start();">

<ul id="cont1">

<li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09-18</span></li>

<li><a href="#">2.tab页面切换效果(案例)</a><span>2013-10-09</span></li>

<li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li>

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

<li><a href="#">5.分页页码制作(案例)</a><span>2013-11-06</span></li>

<li><a href="#">6.导航条菜单制作(案例)</a><span>2013-11-08</span></li>

<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>

<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>

<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>

</ul>

<ul id="cont2">

</ul>

</marquee>

</div>

</div>

</body>

</html>


正在回答

2 回答

这是你的代码改过之后能运行的样子,借用了一下你的样式,谢谢= =。

<<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>0916-2无缝滚动</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

body{

text-align: center;

font-size: 12px;

line-height: 24px;

}

ul{

list-style: none;

}

a{

color: #000;

text-decoration: none;

}

a:hover{

color: #00f;

}

#bigBox{

width: 400px;

border:5px solid #ababab;

border-radius: 15px;

margin: 50px auto 0;

text-align:left;

/* -moz-border-radius:15px;

-webkit-border-radius:15px;

box-shadow: 2px 2px 10px #ababab;*/

}

#topBox{

font-size: 26px;

height: 62px;

line-height: 62px;

overflow: hidden;

padding-left: 30px;

color: #fff;

background: #f00;

position: relative;

border:1px solid #f00;

border-radius:8px 8px 0 0;

}

#topBox a{

position: absolute;/*父级relative子级absolute可具体定位*/

right: 10px;

bottom: 10px;

font-size: 14px;

line-height: 24px;

display: inline;

color: #fff;

}

#topBox a:hover{

color: #00f;

}

#bottomBox{

width: 335px;

height: 200px;

/*height: 144px;*/

margin-left: 25px;

margin-top: 10px;

overflow: hidden;

}

#bottomBox ul li{

height: 24px;

}

#bottomBox ul li a{

width: 180px;

height: 24px;

text-indent: 15px;

/* float: left;

display: block;

overflow: hidden;*/

}

#bottomBox ul li span{

float: right;

color: #999;

}

</style>

</head>

<body>

<div id="bigBox">

<div id="topBox">

<span class="logCont">慕课网最新课程</span><a href="#">更多&gt;&gt;</a>

</div>

<div id="bottomBox">

<ul id="cont1">

<li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09-18</span></li>

<li><a href="#">2.tab页面切换效果(案例)</a><span>2013-10-09</span></li>

<li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li>

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

<li><a href="#">5.分页页码制作(案例)</a><span>2013-11-06</span></li>

<li><a href="#">6.导航条菜单制作(案例)</a><span>2013-11-08</span></li>

<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>

<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>

<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>

</ul>

<ul id="cont2">

</ul>


</div>

</div>

</body>

<script type="text/javascript">

var area=document.getElementById("bottomBox");

var cont1=document.getElementById("cont1");

var cont2=document.getElementById("cont2");

cont2.innerHTML=cont1.innerHTML;

var speed=50;

area.scrollTop=0;

function scrollUp(){

if (area.scrollTop>=cont1.offsetHeight){

area.scrollTop=0;

}else{

area.scrollTop++;

}

}

var myScroll=setInterval("scrollUp()",speed);

area.onmouseover=function(){

clearInterval(myScroll);

}

area.onmouseout=function(){

myScroll=setInterval("scrollUp()",speed);

}

</script>


</html>

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

雪梨儿 提问者

可以啦!谢谢!
2016-09-16 回复 有任何疑惑可以回复我~

关于你的问题。第一,你需要把JS代码写到body中<div>的后边,这样代码才会执行,因为浏览器执行代码顺序从上到下。第二,你需要给包含两个滚动内容的容器bottomBox设置高度,因为你的代码没有设置高度所以它是自适应高度的。第三,改完之后就可以达到效果了。

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

雪梨儿 提问者

我的样式只写了自己能看懂的部分 老师写的其他看不懂的注释掉了 不好看啊 哈哈
2016-09-16 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
信息滚动效果制作
  • 参与学习       47735    人
  • 解答问题       333    个

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

进入课程

请问?我的代码必须加上<marquee>标签才会滚动,而且也没有无缝滚动,为什么?xiexie

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号