• JS+Div实现的阴影菜单


    代码简介:

    JS+Div实现的阴影菜单,放出来的让大家学习JS,CSS的朋友参考。

    代码内容:

    <title>JS+Div实现的阴影菜单_网页代码站(www.webdm.cn)</title>
    <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>
    <style>body,td,div,a,input{font:menu;line-height:180%}</style>
    <div id=menu style="position:absolute; left: 10px; top: 10px; background: #EEEEEE;  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'"
    >webdm.cn</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>
    <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>
    makeRectangularDropShadow(document.all["menu"], "#666666", 4);
    </script>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/39e04de5-02c5-4e32-9833-b5cd6e131906.html

  • 相关阅读:
    Android读书笔记三
    Android读书笔记二
    Android读书笔记一
    cpp plugin system
    houdini已放弃2
    ssh-keygen
    linux library
    software with plugin
    houdini已放弃
    C++ template
  • 原文地址:https://www.cnblogs.com/webdm/p/2040834.html
Copyright © 2020-2023  润新知