<script type="text/javascript">
<!--
var xx= 200;
var xxy= 600;
var xxb= 600;
var xxyb= 200;
var cvcv=0;
function kknd(){
cvcv++;
if(cvcv==1){ppp=cvcv;fxt="floa"+ppp;movea();}else{
if(cvcv==2){ppp=cvcv;fxt="floa"+ppp;moveb();}else{alert("結束!"); return (true);}
}
return (true);
}
//移動用
function movea(){
if(xx<=xxy){ setTimeout("movea()",10);}
xx = xx + 10;
document.getElementById(fxt).style.left = xx;
return (true);
}
function moveb(){
if(xxb>=xxyb){ setTimeout("moveb()",10);}
xxb = xxb - 10;
document.getElementById(fxt).style.left = xxb;
return (true);
}
//-->
</script>
<table border="0">
<tr>
<td><img id="floa0" style="left:400px; top:100px; z-index:10; position:absolute" src="qz1.gif"></td>
<td><img id="floa1" style="left:200px; top:100px; z-index:10; position:absolute" src="qz1.gif"></td>
<td><img id="floa2" style="left:600px; top:100px; z-index:10; position:absolute" src="qz1.gif"></td>
</tr>
</table>
<INPUT TYPE="button" VALUE="開始" onCLick="kknd();">
程式如上....
要如何才能導入floa1 或floa2的時候..同時變更z-index:的值....
例如導入floa1...z-index:的值..自動變為12
可以做到嗎?
要如何寫....??
2012-03-19 14:40:31 補充
發現標題css打成了ccs...= =||
睡了一覺之後醒來...也想到的解決方法..跟您寫的差不多..
不過我寫法有些不同
document.getElementById(fxt).style.zIndex = 12;
這2種寫法有差異性嗎??
另外, 感謝您的建議....^^(用物件導向觀念去寫)
2012-03-19 15:58:01 補充
剛剛測試了您寫的方式
document.getElementById(fxt).style.["z-index"] = 12;
卻出現程式錯誤...
後來查看您的物件導向式寫法發現...
原來問題出現在這個.點
您在物件導向式寫法中是
document.getElementById(fxt).style["z-index"] = 12;
少了個點..就能正確執行了....
可是...問題來了....執行後...卻沒有效果....
2012-03-19 15:59:56 補充
我測試的方式是將
2012-03-19 16:07:39 補充
[td][img id="floa0" style="left:400px; top:100px; z-index:10; position:absolute" src="qz1.gif"][/td]
[td][img id="floa1" style="left:200px; top:100px; z-index:10; position:absolute" src="qz1.gif"][/td]
2012-03-19 16:07:57 補充
改為
[td][img id="floa1" style="left:200px; top:100px; z-index:10; position:absolute" src="qz1.gif"][/td]
[td][img id="floa0" style="left:400px; top:100px; z-index:10; position:absolute" src="qz1.gif"][/td]
2012-03-19 16:08:37 補充
原始的排列..執行後...看到的效果很像是z-index:已經變為12
可是發現...原始的排列..照z-index的順序關係...就算z-index:沒變12...還是10.....其效果還是一樣的..
因為floa1和floa2都在floa0之後...所以看到的結果都是一樣的....
2012-03-19 16:09:09 補充
順序改為
[td][img id="floa1" style="left:200px; top:100px; z-index:10; position:absolute" src="qz1.gif"][/td]
[td][img id="floa0" style="left:400px; top:100px; z-index:10; position:absolute" src="qz1.gif"][/td]
後...
2012-03-19 16:09:30 補充
因為floa1在floa0之前...所以程式執行後..z-index:如果有變12
那效果應該是floa1的圖片在移動的過程中..會覆蓋floa0的圖片....可是...卻是沒有......他會從floa0的圖片下通過....
那是為什麼?..是style["z-index"] =12 沒有發揮作用嗎??
我之前自己寫style.z-index =12 也是變成程式錯誤..後來改寫style.zindex =12..
程式正常執行了....可是卻跟style["z-index"] =12 一樣... 沒有效果...
2012-03-19 16:09:46 補充
後來...在網路上找到了相關資料..
http://blog.roodo.com/css_file/archives/13638753.html
改為style.zIndex = 12...就成功了....
請問一下..為何會這樣......是IE版本的問題嗎?...我的是IE7...別的版本我沒測試過..
還有..Firefox 的寫法也是一樣嗎...?
2012-03-20 00:14:11 補充
er">
很簡單:
document.getElementById(fxt).style.["z-index"] = 12;
============================
另外, 儘量試著用物件導向觀念去寫javascript會比較好...
[script type="text/javascript"]
var cvcv = 0;
function kknd(){
cvcv++;
if (cvcv == 1)
new Move("floa1", 200, 600, 10).moveTo();
else if (cvcv == 2)
new Move("floa2", 600, 200, -10).moveTo();
}
function Move(target, fromLeft, toLeft, value) {
var xTarget = target;
var xFromLeft = fromLeft;
var xToLeft = toLeft;
var xValue = value;
function funcMoveTo() {
if ((xValue > 0 && xFromLeft <= xToLeft) ||
(xValue < 0 && xFromLeft >= xToLeft)) {
setTimeout(funcMoveTo, 10);
}
else {
document.getElementById(xTarget).style["z-index"] = 10;
}
xFromLeft += xValue;
document.getElementById(target).style.left = xFromLeft;
}
this.moveTo = function() {
document.getElementById(xTarget).style["z-index"] = 12;
funcMoveTo();
};
}
[/javascript]
*大於小於符號會被吃掉..
參考資料
什麼時候MADAO才會開花呢？
2012-03-19 10:19:22 補充
document.getElementById(target).style.left = xFromLeft;
改為
document.getElementById(xTarget).style.left = xFromLeft;
(雖然執行結果一樣啦...)
留言列表
