Div Js によって実装されたシャドウメニューは、Microsoft によって以前の Web サイトで使用されています

Div Js によって実装されたシャドウメニューは、Microsoft によって以前の Web サイトで使用されています_ナビゲーションメニュー

WBOY

リリース： 2016-05-16 18:38:41

オリジナル

868 人が閲覧しました

<title>Div Js は、Microsoft が以前の Web サイトで使用していたシャドウ メニューを実装しました</title>
<style>body,td,div,a,input{font:menu;line-height:180%}</style>
<div id="menu" style="position:absolute; left: 10px; top: 10px; background: #EEEEEE; width: 120px; height: 100px; padding: 3px; border: 1 #999999 solid; cursor: default">
<div style="border: 1 solid #EEE" onmouseover="this.style.background='#CCC'; this.style.borderColor='#999'" onmouseout="this.style.background='#EEE'; this.style.borderColor='#EEE'">
</div>Jb51.net<div style="border: 1 solid #EEE" onmouseover="this.style.background='#CCC'; this.style.borderColor='#999'" onmouseout="this.style.background='#EEE'; this.style.borderColor='#EEE'">
</div>スクリプトホーム<div style="border: 1 solid #EEE" onmouseover="this.style.background='#CCC'; this.style.borderColor='#999'" onmouseout="this.style.background='#EEE'; this.style.borderColor='#EEE'">
</div>Web ページの特殊効果
<br>
<input onclick="runEx('runcode29383')" type="button" value="运行代码"><input onclick="doCopy('runcode29383')" type="button" value="复制代码"><input onclick="doSave(runcode29383)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank"> </a>[Ctrl A すべて選択 注: </div>外部 Js を導入する必要がある場合は、<script> 
var global = window.document 
global.fo_shadows = new Array 
function makeRectangularDropShadow(el, color, size) 
{ 
    var i; 
    for (i=size; i>0; i--) 
    {

var rect = document.createElement('div'); 
        var rs = rect.style 
        rs.position = 'absolute'; 
        rs.left = (el.style.posLeft + i) + 'px'; 
        rs.top = (el.style.posTop + i) + 'px'; 
        rs.width = el.offsetWidth + 'px'; 
        rs.height = el.offsetHeight + 'px'; 
        rs.zIndex = el.style.zIndex - i; 
        rs.backgroundColor = color; 
        var opacity = 1 - i / (i + 1); 
        rs.filter = 'alpha(opacity=' + (100 * opacity) + ')'; 
        el.insertAdjacentElement('afterEnd', rect); 
        global.fo_shadows[global.fo_shadows.length] = rect; 
    }

} 
</script> を実行するために更新する必要があります]<script> 
makeRectangularDropShadow(document.all["menu"], "#666666", 4); 
</script>