上個星期開始接觸JavaScript，看了JavaScript說明，感覺挺靈活的，缺點是調試太麻煩了，我昨天晚上下載了Editplus來寫腳本還可以。
下面是昨天晚上寫的圖片新聞的無限滾動，網絡上的都是定義好了具體的圖像個數，而我的這個稍加改動就可以不限制圖像，後面再豐富它。
今天看了一些網頁遊戲，準備學習一下練手。
<html>
<head><title>圖片新聞的無限滾動</title>
<style type=text/css>
#DemoWin{width:600;height:500;background:red;margin:100 100 auto;overflow:hidden}
.DemoPic{width:300;height:300;position:absolute;top:50;overflow:hidden;clear:both;}
#DemoPic0{left:0;background:#123;z-index:999}
#DemoPic1{left:300;background:#456}
#DemoPic2{left:600;background:#789}
img{width:400;height:300;}
</style>
<script language="JavaScript">
var ScrollStr;
下面是昨天晚上寫的圖片新聞的無限滾動，網絡上的都是定義好了具體的圖像個數，而我的這個稍加改動就可以不限制圖像，後面再豐富它。
今天看了一些網頁遊戲，準備學習一下練手。
<html>
<head><title>圖片新聞的無限滾動</title>
<style type=text/css>
#DemoWin{width:600;height:500;background:red;margin:100 100 auto;overflow:hidden}
.DemoPic{width:300;height:300;position:absolute;top:50;overflow:hidden;clear:both;}
#DemoPic0{left:0;background:#123;z-index:999}
#DemoPic1{left:300;background:#456}
#DemoPic2{left:600;background:#789}
img{width:400;height:300;}
</style>
<script language="JavaScript">
var ScrollStr;
function init(){
ScrollStr="012";
ReadyDiv();
}
ScrollStr="012";
ReadyDiv();
}
function ReadyDiv(){
for(var i=0;i<3;i++){
var DivTemp=document.getElementById("DemoPic"+ScrollStr.substring(i,i+1)).style;
DivTemp.xpos=(i-1)*300;
DivTemp.left=DivTemp.xpos+'px';
}
}
for(var i=0;i<3;i++){
var DivTemp=document.getElementById("DemoPic"+ScrollStr.substring(i,i+1)).style;
DivTemp.xpos=(i-1)*300;
DivTemp.left=DivTemp.xpos+'px';
}
}
function ScrollPicToLeft(){
DivTemp=document.getElementById("DemoPic"+ScrollStr.substring(0,1)).style;
DivTemp.left=600+'px';
ScrollStr=ScrollStr.substring(1,3)+ScrollStr.substring(0,1);
DivTemp=document.getElementById("DemoPic"+ScrollStr.substring(0,1)).style;
DivTemp.left=600+'px';
ScrollStr=ScrollStr.substring(1,3)+ScrollStr.substring(0,1);
for(var i=0;i<300;i=i+100){
for(var k=0;k<3;k++){
DivTemp=document.getElementById("DemoPic"+ScrollStr.substring(k,k+1)).style;
DivTemp.xpos=parseInt(DivTemp.left)
DivTemp.xpos=DivTemp.xpos - i;
DivTemp.left=DivTemp.xpos+'px';
}
}
}
for(var k=0;k<3;k++){
DivTemp=document.getElementById("DemoPic"+ScrollStr.substring(k,k+1)).style;
DivTemp.xpos=parseInt(DivTemp.left)
DivTemp.xpos=DivTemp.xpos - i;
DivTemp.left=DivTemp.xpos+'px';
}
}
}
function ScrollPicToRight(){
for(var i=0;i<300;i=i+100){
for(var k=0;k<3;k++){
DivTemp=document.getElementById("DemoPic"+ScrollStr.substring(k,k+1)).style;
DivTemp.xpos=parseInt(DivTemp.left)
DivTemp.xpos=DivTemp.xpos + i;
DivTemp.left=DivTemp.xpos+'px';
}
}
DivTemp=document.getElementById("DemoPic"+ScrollStr.substring(2,3)).style;
DivTemp.left=-300+'px';
ScrollStr=ScrollStr.substring(2,3)+ScrollStr.substring(0,2);
}
</script>
</head>
<body onLoad="init()">
<a href="javascript:void(null)" onMouseDown="ScrollPicToLeft()" onMouseUp="javascript:void(null)" onMouseOut="javascript:void(null)">向左移動</a>
<a href="javascript:void(null)" onMouseDown="ScrollPicToRight()" onMouseUp="javascript:void(null)" onMouseOut="javascript:void(null)">向右移動</a>
<div id=DemoWin>
<div class="DemoPic" id=DemoPic0><img src="1.jpg"/></div>
<div class="DemoPic" id=DemoPic1><img src="2.jpg"/></div>
<div class="DemoPic" id=DemoPic2><img src="3.jpg"/></div>
</div>
</body>
</html>
for(var i=0;i<300;i=i+100){
for(var k=0;k<3;k++){
DivTemp=document.getElementById("DemoPic"+ScrollStr.substring(k,k+1)).style;
DivTemp.xpos=parseInt(DivTemp.left)
DivTemp.xpos=DivTemp.xpos + i;
DivTemp.left=DivTemp.xpos+'px';
}
}
DivTemp=document.getElementById("DemoPic"+ScrollStr.substring(2,3)).style;
DivTemp.left=-300+'px';
ScrollStr=ScrollStr.substring(2,3)+ScrollStr.substring(0,2);
}
</script>
</head>
<body onLoad="init()">
<a href="javascript:void(null)" onMouseDown="ScrollPicToLeft()" onMouseUp="javascript:void(null)" onMouseOut="javascript:void(null)">向左移動</a>
<a href="javascript:void(null)" onMouseDown="ScrollPicToRight()" onMouseUp="javascript:void(null)" onMouseOut="javascript:void(null)">向右移動</a>
<div id=DemoWin>
<div class="DemoPic" id=DemoPic0><img src="1.jpg"/></div>
<div class="DemoPic" id=DemoPic1><img src="2.jpg"/></div>
<div class="DemoPic" id=DemoPic2><img src="3.jpg"/></div>
</div>
</body>
</html>