The shadowed menu implemented by Div Js has been used by Microsoft on previous websites

Home

Web Front-end

JS Tutorial

The shadowed menu implemented by Div Js has been used by Microsoft on previous websites_Navigation menu

May 16, 2016 pm 06:38 PM

<title>Div Js implemented shadow menu, which Microsoft has used on previous websites</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>Script Home<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 page special effects
<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 select all Note: </div>If you need to introduce external Js, you need to refresh to execute <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>

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn