                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /信息滾動效果制作

為什么放在head中沒效果，不是綁了一個監(jiān)聽嗎？求指教

window.onload=function(){

}

?</script>

芥子1204

2016-04-10

源自：信息滾動效果制作 2-2

關注問題我要回答

626

操作

收起

3 回答

別擔心_有我陪著你
2016-04-11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
? ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ?<title>向上無縫滾動</title>
? ?<style>
? ? ? ?body {
? ? ? ? ? ?font-size: 12px;
? ? ? ? ? ?line-height: 24px;
? ? ? ? ? ?text-algin: center; ? ? ? ?/* 頁面內(nèi)容居中 */
? ? ? ?}
? ? ? ?* {
? ? ? ? ? ?margin: 0px;
? ? ? ? ? ?padding: 0px; ? ? ? ? ? ?/* ?去掉所有標簽的marign和padding的值 ?*/
? ? ? ?}
? ? ? ?ul {
? ? ? ? ? ?list-style: none; ? ? ? ? ? /* ?去掉ul標簽默認的點樣式 ?*/
? ? ? ?}
? ? ? ?a img {
? ? ? ? ? ?border: none; ? ? ? ?/* ?超鏈接下，圖片的邊框 ?*/
? ? ? ?}
? ? ? ?a {
? ? ? ? ? ?color: #333;
? ? ? ? ? ?text-decoration: none; ? ? /* 超鏈接樣式 */
? ? ? ?}
? ? ? ?a:hover {
? ? ? ? ? ?color: #ff0000;
? ? ? ?}
? ? ? ?#mooc {
? ? ? ? ? ?width: 399px;
? ? ? ? ? ?border: 5px solid #ababab;
? ? ? ? ? ?-moz-border-radius: 15px; ? ? ?/* Gecko browsers */
? ? ? ? ? ?-webkit-border-radius: 15px; ? /* Webkit browsers */
? ? ? ? ? ?border-radius: 15px;
? ? ? ? ? ?box-shadow: 2px 2px 10px #ababab;
? ? ? ? ? ?margin: 50px auto 0;
? ? ? ? ? ?text-align: left; ? ? ? ? ? ? ? /* 讓新聞內(nèi)容靠左 */
? ? ? ?}
? ? ? ?/* ?頭部樣式 */
? ? ? ?#moocTitle {
? ? ? ? ? ?height: 62px;
? ? ? ? ? ?overflow: hidden; ?/* 這個一定要加上，內(nèi)容超出的部分要隱藏，免得撐高頭部 */
? ? ? ? ? ?font-size: 26px;
? ? ? ? ? ?line-height: 62px;
? ? ? ? ? ?padding-left: 30px;
? ? ? ? ? ?background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
? ? ? ? ? ?background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
? ? ? ? ? ?filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/
? ? ? ? ? ?border: 1px solid #f05e6f;
? ? ? ? ? ?-moz-border-radius: 8px 8px 0 0; ? ? ?/* Gecko browsers */
? ? ? ? ? ?-webkit-border-radius: 8px 8px 0 0; ? /* Webkit browsers */
? ? ? ? ? ?border-radius: 8px 8px 0 0;
? ? ? ? ? ?color: #fff;
? ? ? ? ? ?position: relative;
? ? ? ?}
? ? ? ?#moocTitle a {
? ? ? ? ? ?position: absolute;
? ? ? ? ? ?right: 10px;
? ? ? ? ? ?bottom: 10px;
? ? ? ? ? ?display: inline;
? ? ? ? ? ?color: #fff;
? ? ? ? ? ?font-size: 12px;
? ? ? ? ? ?line-height: 24px;
? ? ? ?}
? ? ? ?/* ?底部樣式 */
? ? ? ?#moocBot {
? ? ? ? ? ?width: 399px;
? ? ? ? ? ?height: 10px;
? ? ? ? ? ?overflow: hidden; ? ? /* 這個一定要加上，內(nèi)容超出的部分要隱藏，免得撐高底部結構 */
? ? ? ?}
? ? ? ?/* ?中間樣式 */
? ? ? ?#moocBox {
? ? ? ? ? ?height: 144px;
? ? ? ? ? ?width: 335px;
? ? ? ? ? ?margin-left: 25px;
? ? ? ? ? ?margin-top: 10px;
? ? ? ? ? ?overflow: hidden; ? ?/* ?這個一定要加，超出的內(nèi)容部分要隱藏，免得撐高中間部分 */
? ? ? ?}
? ? ? ?#mooc ul li {
? ? ? ? ? ?height: 24px;
? ? ? ?}
? ? ? ?#mooc ul li a {
? ? ? ? ? ?width: 180px;
? ? ? ? ? ?float: left;
? ? ? ? ? ?display: block;
? ? ? ? ? ?overflow: hidden;
? ? ? ? ? ?text-indent: 15px;
? ? ? ? ? ?height: 24px;
? ? ? ?}
? ? ? ?#mooc ul li span {
? ? ? ? ? ?float: right;
? ? ? ? ? ?color: #999;
? ? ? ?}
? ?</style>
? ?<script type="text/javascript">
? ? ? ?window.onload=function(){
? ? ? ? ? ?var area = document.getElementById('moocBox');
? ? ? ? ? ?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="mooc">
? ?
? ?<h3 id="moocTitle">最新課程<a href="#" target="_self">更多>></a> </h3>
? ?
? ?
? ?<div ?id="moocBox">
? ? ? ?<ul id="con1">
? ? ? ? ? ?<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.如何實現(xiàn)“新手引導”效果</a><span>2013-12-06</span></li>
? ? ? ?</ul>
? ? ? ?<ul id="con2">
? ? ? ?</ul>
? ?</div>
? ?
</div>

</body>
</html>

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

收起回答

#1

芥子1204 提問者

謝謝~~阿里阿朵

2016-04-11 回復有任何疑惑可以回復我~

芥子1204 提問者
2016-04-11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>向上無縫滾動</title>

<style>

body {

font-size: 12px;

line-height: 24px;

text-algin: center; ? ? ? ?/* 頁面內(nèi)容居中 */

}

* {

margin: 0px;

padding: 0px; ? ? ? ? ? ?/* ?去掉所有標簽的marign和padding的值 ?*/

}

ul {

list-style: none; ? ? ? ? ? /* ?去掉ul標簽默認的點樣式 ?*/

}

a img {

border: none; ? ? ? ?/* ?超鏈接下，圖片的邊框 ?*/

}

a {

color: #333;

text-decoration: none; ? ? /* 超鏈接樣式 */

}

a:hover {

color: #ff0000;

}

#mooc {

width: 399px;

border: 5px solid #ababab;

-moz-border-radius: 15px; ? ? ?/* Gecko browsers */

-webkit-border-radius: 15px; ? /* Webkit browsers */

border-radius: 15px;

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

margin: 50px auto 0;

text-align: left; ? ? ? ? ? ? ? /* 讓新聞內(nèi)容靠左 */

}

/* ?頭部樣式 */

#moocTitle {

height: 62px;

overflow: hidden; ?/* 這個一定要加上，內(nèi)容超出的部分要隱藏，免得撐高頭部 */

font-size: 26px;

line-height: 62px;

padding-left: 30px;

background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/

border: 1px solid ##f05e6f;

-moz-border-radius: 8px 8px 0 0; ? ? ?/* Gecko browsers */

-webkit-border-radius: 8px 8px 0 0; ? /* Webkit browsers */

border-radius: 8px 8px 0 0;

color: #fff;

position: relative;

}

#moocTitle a {

position: absolute;

right: 10px;

bottom: 10px;

display: inline;

color: #fff;

font-size: 12px;

line-height: 24px;

}

/* ?底部樣式 */

#moocBot {

width: 399px;

height: 10px;

overflow: hidden; ? ? /* 這個一定要加上，內(nèi)容超出的部分要隱藏，免得撐高底部結構 */

}

/* ?中間樣式 */

#moocBox {

height: 144px;

width: 335px;

margin-left: 25px;

margin-top: 10px;

overflow: hidden; ? ?/* ?這個一定要加，超出的內(nèi)容部分要隱藏，免得撐高中間部分 */

}

#mooc ul li {

height: 24px;

}

#mooc ul li a {

width: 180px;

float: left;

display: block;

overflow: hidden;

text-indent: 15px;

height: 24px;

}

#mooc ul li span {

float: right;

color: #999;

}

</style>

window.onload=function(){

?var area = document.getElementById('moocBox');

?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="mooc">?

?

? ? <ul id="con1">

? ? ? ? <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.如何實現(xiàn)“新手引導”效果</a><span>2013-12-06</span></li>

? ? </ul>

? ? <ul id="con2">

? ? </ul>

</div>

?

</div>

?

</body>

</html>

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

收起回答

sunfloweryll
2016-04-11

把所有的代碼都貼出來，不然我看不太懂，不好幫你做測試

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

收起回答

舉報

0/150

提交

取消

信息滾動效果制作

參與學習 47740 人
解答問題 333 個

萌妹子帶您快速學習滾動效果，掌握無縫滾動和歇間性滾動的制作方法

進入課程

為什么放在head中沒效果，不是綁了一個監(jiān)聽嗎？求指教

我要回答關注問題

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

為什么放在head中沒效果，不是綁了一個監(jiān)聽嗎？求指教

3 回答

為什么放在head中沒效果，不是綁了一個監(jiān)聽嗎？求指教

為什么放在head中沒效果，不是綁了一個監(jiān)聽嗎？求指教

為什么放在head中沒效果，不是綁了一個監(jiān)聽嗎？求指教