October 11, 2011
DEMO
程序說明
原理就是通過不斷設置滑動對象的left(水平切換)和top(垂直切換)來實現圖片切換的動態效果。
首先需要一個容器，程序會自動設置容器overflow為hidden，如果不是相對或絕對定位會同時設置position為relative，
滑動對象會設置為絕對定位：
var p = CurrentStyle(this._container).position;
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";
August 6, 2010
以下放至於<body>與</body>之間
<a href="#" onClick="window.close(); return false;">close window</a>
備註︰
close window可以自由置換
參考連結︰
http://www.livemusic98.com/map.html
<a href="#" onClick="window.close(); return false;">close window</a>
備註︰
close window可以自由置換
參考連結︰
http://www.livemusic98.com/map.html
August 5, 2010
以下放至於<body >與</body>之間
<SCRIPT language="JavaScript"><!--
myMsg = "你好歡迎光臨！你好歡迎光臨！你好歡迎光臨！ ";
myMsg = myMsg + myMsg;
myCnt = 0;
function myFunc(){
document.myForm.myFormMes.value = myMsg.substring(myCnt,myMsg.length);
myCnt = ( myCnt == (myMsg.length/2)-1 ) ? 0 : myCnt+1;
}
// --></SCRIPT>
<form name="myForm">
<input type="text" size="30" name="myFormMes">
</form>
<SCRIPT language="JavaScript"><!--
setInterval("myFunc()",200);
// --></SCRIPT>
備註︰
你好歡迎光臨！你好歡迎光臨！你好歡迎光臨！ ←可自由置換，留空白有助於斷字，較容易理解。
size="30"←可用CSS控制寬度等等，較容易適用於各瀏覽器內。
參考連結︰
http://www.livemusic98.com
<SCRIPT language="JavaScript"><!--
myMsg = "你好歡迎光臨！你好歡迎光臨！你好歡迎光臨！ ";
myMsg = myMsg + myMsg;
myCnt = 0;
function myFunc(){
document.myForm.myFormMes.value = myMsg.substring(myCnt,myMsg.length);
myCnt = ( myCnt == (myMsg.length/2)-1 ) ? 0 : myCnt+1;
}
// --></SCRIPT>
<form name="myForm">
<input type="text" size="30" name="myFormMes">
</form>
<SCRIPT language="JavaScript"><!--
setInterval("myFunc()",200);
// --></SCRIPT>
備註︰
你好歡迎光臨！你好歡迎光臨！你好歡迎光臨！ ←可自由置換，留空白有助於斷字，較容易理解。
size="30"←可用CSS控制寬度等等，較容易適用於各瀏覽器內。
參考連結︰
http://www.livemusic98.com
August 5, 2010
範例來自︰http://www.fa-hua.com.tw
以下放至於<body>與</body>之間
<SCRIPT language="JavaScript"><!--
myMsg = " 你好歡迎光臨！";
myCnt = 0;
myDspFlg = 0;
function myFunc(){
if ( myDspFlg == 0 ){
document.myForm.myFormMes.value = myMsg.substring(0,myCnt);
if ( myCnt == myMsg.length ){
myCnt = 0;
myDspFlg = 1;
}else{
myCnt += 1;
}
}else if ( myDspFlg == 1 ){
document.myForm.myFormMes.value = "";
myDspFlg = 2;
}else{
document.myForm.myFormMes.value = myMsg;
myCnt ++;
if ( myCnt == 5 ){
myDspFlg = 0;
myCnt = 0;
}else{
myDspFlg = 1;
}
}
}
// --></SCRIPT>
<form name="myForm">
<input type="text" size="30" name="myFormMes">
</form>
<SCRIPT language="JavaScript"><!--
setInterval("myFunc()",200);
// --></SCRIPT>
備註︰
你好歡迎光臨！←可自由置換
size="30"←可以CSS指定寬度等等，較適用於各瀏覽器。
以下放至於<body>與</body>之間
<SCRIPT language="JavaScript"><!--
myMsg = " 你好歡迎光臨！";
myCnt = 0;
myDspFlg = 0;
function myFunc(){
if ( myDspFlg == 0 ){
document.myForm.myFormMes.value = myMsg.substring(0,myCnt);
if ( myCnt == myMsg.length ){
myCnt = 0;
myDspFlg = 1;
}else{
myCnt += 1;
}
}else if ( myDspFlg == 1 ){
document.myForm.myFormMes.value = "";
myDspFlg = 2;
}else{
document.myForm.myFormMes.value = myMsg;
myCnt ++;
if ( myCnt == 5 ){
myDspFlg = 0;
myCnt = 0;
}else{
myDspFlg = 1;
}
}
}
// --></SCRIPT>
<form name="myForm">
<input type="text" size="30" name="myFormMes">
</form>
<SCRIPT language="JavaScript"><!--
setInterval("myFunc()",200);
// --></SCRIPT>
備註︰
你好歡迎光臨！←可自由置換
size="30"←可以CSS指定寬度等等，較適用於各瀏覽器。
August 2, 2010
按[<< < > >>] 可以看到由[PAGE - 1到PAGE - 5]不同的畫面的左右滑動。
demo
http://www.hajimeteno.ne.jp/dhtml/sample/sp58.html
也有直的模式
http://www.hajimeteno.ne.jp/dhtml/dist/js62.html
