最近、エフェクトを作成する必要があります。ボタン (画像) をクリックして、左側のメニューと上のバナー バーを非表示にします。
非常に簡単な例をコピーして修正しました。基本的には満足していますが、次の問題があります。
1 ) バナー ボタンを非表示にします (画像) showtop.html は常に上部マージンを削除できないため、表示は不完全です
2) 画像の変換と FrameSet サイズを制御する JS は IE でのみ適用できます
いくつかアドバイスをいただけます
(8 ページあり、公式の 1 つはインターフェイス効果、コードは比較的単純で、AR パッケージがインストールされていますが、アップロードの凡例が小さすぎます)
(1)index.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Test</title> <style> html,body { margin-left:0; margin-top:0; } </style> </head> <frameset id="mainFrame" rows="70,14,25,*,25" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"> <frame src="top.html" name="top" id="top" title="top" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> <frame src="showtop.html" name="showtop" id="showtop" title="showtop" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> <frame src="userinfo.html" name="userinfo" id="userinfo" title="userinfo" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> <frameset id="main" cols="200,9,*" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"> <frame src="left.html" name="leftmain" id="leftmain" title="leftmain" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> <frame src="middle.html" name="middlemain" id="middlemain" title="middlemain" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> <frame src="right.html" name="rightmain" id="rightmain" title="rightmain" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> </frameset> <frame src="bottom.html" name="bottom" id="bottom" title="bottom" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/></frameset> <noframes> <body> </body> </noframes></html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Left</title> <style> body{ background-color:#004600; } </style> </head> <body> </body> </html><html> <head> <title>Frame Middle</title><style type="text/css"><!--/*body { background-color:#000000; margin-top:0px; height:9px;}img { margin-top:0px;}-->*/</style> <script language="javascript"> function isShowtop() { if(window.parent.mainFrame.rows == "70,9,25,*,25") { window.parent.mainFrame.rows = "0,9,0,*,0"; document.images['topcontrol'].src='showtop.gif'; } else { window.parent.mainFrame.rows = "70,9,25,*,25"; document.images['topcontrol'].src='hiddetop.gif'; } } </script> </head> <body> <table border="0" align="center"><tr valign="top"><td valign="bottom"><img id="topcontrol" src="hiddetop.gif" onclick="isShowtop()" /></td></tr></table> </body> </html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Left</title> <style> body{ background-color:#00CA00; } </style> </head> <body> </body> </html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Left</title> <style> body{ background-color:#00FF00; } </style> </head> <body> </body> </html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Middle</title> <style> html,body { margin-left:0; } img { margin-top:200px; } </style> <script language="javascript"> function isShowleft() { if(window.parent.main.cols == "200,9,*") { window.parent.main.cols = "0,9,*"; document.images['imghiddetop'].src='showleft.gif'; } else { window.parent.main.cols = "200,9,*"; document.images['imghiddetop'].src='hiddeleft.gif'; } } </script> </head> <body> <img id="imghiddetop" src="hiddeleft.gif" onclick="isShowleft()" /> </body> </html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Right</title> <style> body{ background-color:#0000FF; } </style> </head> <body> </body> </html> showtop.html は間違っています
ランダム後のバージョンです修正………………
元のバージョンの CSS はコメント化されておらず、Body には Tabletrtd がありません。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Left</title> <style> body{ background-color:#AC0000; } </style> </head> <body> </body> </html> 1. 投稿者が参照している上部のマージンは何ですか。 ?
2. 2 つの JS を変更するだけです
middle.html
<html> <head> <title>Frame Middle</title><style type="text/css">body { background-color:#000000; margin-top:0px; height:9px;}img { margin-top:0px;}</style> <script language="javascript"> function isShowtop() { if(window.parent.mainFrame.rows == "70,9,25,*,25") { window.parent.mainFrame.rows = "0,9,0,*,0"; document.images['topcontrol'].src='showtop.gif'; } else { window.parent.mainFrame.rows = "70,9,25,*,25"; document.images['topcontrol'].src='hiddetop.gif'; } } </script> </head> <body> <img id="topcontrol" src="hiddetop.gif" onclick="isShowtop()" /> </body> </html> <script type="text/javascript"> function isShowleft() { if (window.parent.window.document.getElementById("main").cols == "200,9,*") { window.parent.window.document.getElementById("main").cols = "0,9,*"; document.images['imghiddetop'].src = 'http://csdnimg.cn/bbs/m/i/yellow_1.gif'; } else { window.parent.window.document.getElementById("main").cols = "200,9,*"; document.images['imghiddetop'].src = 'http://csdnimg.cn/bbs/m/i/yellow_1.gif'; } } </script> PS:
ポスターにはたくさんの花が付いています
おめでとうございます
………………
showtop.html には Firefox では上部マージンがありませんが、IE では上部マージンがあります
…………… …
showtop.html には、Firefox では上部マージンがありませんが、IE では上部マージンがあります
IE ではデフォルトのマージンがあります。
一般的に、マージンをクリアし、差異を排除して、すべての CSS を設定するには、次のコマンドを使用します:
* {margin:0;padding:0}
7 階の ccs02287 からの返信を引用:
………………
showtop .html Firefox では上部マージンはありませんが、IE では
があります。IE ではデフォルトのマージンがあります。
通常、次のコマンドを使用してマージンをクリアし、差異を排除してから、すべての CSS を設定します:
* {margin:0;padding:0}
ありがとうございます!
実際、いわゆるマルチブラウザ操作はフレームセットに対して何らかのトリックを実行しているだけであり、単なる構文の問題です。
Variable = window.parent.document.getElementById ('your Frameset name');
Variable.cols="フレーム幅の変更"; このように判断を書くだけです、それは非常に不正です...必要に応じてそれを渡すことができます Duan JS 、一緒に試してみましょう。 。 。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
