亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

去掉了startMove方法中的area.scrollTop++,為什么就不能間歇性循環了?

<!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;????????/*?頁面內容居中?*/
}
*?{
	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;???????????????/*?讓新聞內容靠左?*/
}
/*??頭部樣式?*/	
#moocTitle?{
	height:?62px;
	overflow:?hidden;??/*?這個一定要加上,內容超出的部分要隱藏,免得撐高頭部?*/
	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;?????/*?這個一定要加上,內容超出的部分要隱藏,免得撐高底部結構?*/
}
/*??中間樣式?*/
#moocBox?{
	height:?144px;
	width:?335px;
	margin-left:?25px;
	margin-top:?10px;
	overflow:?hidden;????/*??這個一定要加,超出的內容部分要隱藏,免得撐高中間部分?*/
}
#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>
</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.如何實現“新手引導”效果</a><span>2013-12-06</span></li>
????</ul>
</div>
<!--??中間結束?-->?
</div>
<!--??慕課網課程公告結束?-->?

<script?type="text/javascript">
?var?area?=?document.getElementById("moocBox");
?area.innerHTML?+=?area.innerHTML;
?area.scrollTop?=?0;
?var?iHeight?=?24;
?var?myScroll;
?var?speed?=?50;
?var?delay?=?2000;
?function?startMove(){
	?area.scrollTop++;
	?myScroll?=?setInterval('scrollUp()',speed);
	}
?function?scrollUp(){
	?area.scrollTop++;
	?if(area.scrollTop?%?iHeight?==0){
		?clearInterval(myScroll);
		?setTimeout("startMove()",delay);
	?}else{
		?area.scrollTop++;
		?if(area.scrollTop?>=?area.scrollHeight/2){
			?area.scrollTop?=?0;
			}
		}
	}
?setTimeout("startMove()",delay);
?</script>
</body>
</html>


正在回答

3 回答

去掉的話,開始直接先進行判斷 此時scrolltop值正好是上次結果,也就是li高度的整數倍,那么直接就停止了。于是一直停止下去。希望我的回答對你能有幫助。

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

林x蓋0 提問者

那在方法的調用過程中就是調用一次statMove,再調用一次scrollUp,再返回starMove,兩者相互輪流這樣子嗎?
2016-09-18 回復 有任何疑惑可以回復我~
#2

林x蓋0 提問者

非常感謝!
2016-10-09 回復 有任何疑惑可以回復我~

因為function scrollUp(){}里面多了area.scrollTop++;去掉了startMove中的area.scrollTop++,area.scrollTop?%?iHeight?==0條件不滿足,clearInterval(myScroll)不會執行。startMove方法中的area.scrollTop++不能去掉。

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

你目前的代碼還是有問題,你目前的代碼效果只能到<li>9</li>行,間歇性效果就無法繼續了。


應該把下的 14# 中的area.scrollTop++;給注釋掉或者去掉。

其他不用修改。

就可以得要你想要的完整的間歇性循環。

//////////////////////////////////////////////////////////////////////////////////

1#<script?type="text/javascript">

2# var?area?=?document.getElementById("moocBox");

3# area.innerHTML?+=?area.innerHTML;

4#area.scrollTop?=?0;

5#var?iHeight?=?24;

6#var?myScroll;

7# var?speed?=?50;

8#var?delay?=?2000;

9# function?startMove(){ ? ? ? ? ? ? ? ? ?//封裝1 ??startMove()

10 # ? area.scrollTop++;

11# ? ?myScroll?=?setInterval('scrollUp()',speed);

12 # ?} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//封裝1結束

13#function?scrollUp(){ ? ? ? ? ? ? ? ? ? ?//封裝2 ? ?scrollUp()

14 # ?area.scrollTop++;

15# ? if(area.scrollTop?%?iHeight?==0){

16 # ? ? ? clearInterval(myScroll);

17# ? ? ?setTimeout("startMove()",delay);

18# ? }else{

19# ? ? ?area.scrollTop++;

20# ? ? ?if(area.scrollTop?>=?area.scrollHeight/2){

21# ? ? ? ? ?area.scrollTop?=?0;? ?22# ? ? ? ? }

23# ? ? ?}

24# ?} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 封裝2結束

25#setTimeout("startMove()",delay); ? ? ? //延時器執行。

26 #</script>

//////////////////////////////////////////////////////////////////////////////////


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

林x蓋0 提問者

謝謝提醒~但是你回答的不是我要問的問題...
2016-09-18 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
信息滾動效果制作
  • 參與學習       47740    人
  • 解答問題       333    個

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

進入課程

去掉了startMove方法中的area.scrollTop++,為什么就不能間歇性循環了?

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號