JS组件:DropDown(下拉菜单)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Ercyao/article/details/79578172

第一次写js组件`(∩_∩)′,有什么不对的请随便指点出来,

单个下拉菜单组件

单个下拉菜单效果图

JS

//author:Ercyao
(function(){
    dropDown = function(id,items,title){
        var oDiv, oP, oUL, oLis, oA, oLi;
        oDiv = document.getElementById(id);
        if(oDiv){
            oP = document.createElement("p");
            oUL = document.createElement("ul");
            oDiv.appendChild(oP);
            oDiv.appendChild(oUL);
            oP.innerHTML = title;
            if(items){
                items.map(function(item,index){
                oLi =document.createElement("li")
                oA =document.createElement("a")
                oA.href = item.url;
                oA.innerHTML = item.name;
                oLi.style.cssText = "list-style-type: none;" + "color:cadetblue;" + "overflow: hidden;" + "white-space: nowrap;" + "text-overflow: ellipsis;" + "background-color:#fff;" + "margin-bottom: 5px;" + "padding:0 5%;" + "box-shadow: 3px 3px 10px rgba(0,0,0,0.3);";
                oA.style.cssText = "color:cadetblue;"+"text-decoration: none;"+"width:100%;" + "line-height:30px;";
                oLi.appendChild(oA);
                oUL.appendChild(oLi);
                })
            }   
            oLis = oUL.children;        
            oP.style.cssText = "color:white;" + "background-color:cadetblue;" + "box-shadow: 3px 3px 10px rgba(0,0,0,0.3);" + "width:90%;" + "line-height:30px;" + "padding:0 5%;" + "margin:0;";
            oUL.style.cssText =  "padding:5px 0 0;" + "margin:0;" + "width:100%;" + "visibility: hidden;";  
            //绑定事件
            function bindEvent(){
                oP.addEventListener('mouseover', onMouseover, false);
                oUL.addEventListener('mouseover', ULonMouseover, false);
                oDiv.addEventListener('mouseout', onMouseout, false);
            }
            //P鼠标经过
            function onMouseover(){
                oUL.style.visibility= "visible";
                doAnimate();
            }
            //UL鼠标经过
            function ULonMouseover(){
                oUL.style.visibility= "visible";
            }
            //li标签经过和移出事件
            for(var i=0; i< oLis.length; i++){
              (function(x){
                var aaa = oLis[x].getElementsByTagName("a")[0];
                oLis[x].οnmοuseοver=function(){
                    oLis[x].style.backgroundColor = "antiquewhite";
                    oLis[x].style.webkitTransform = 'scale(' + 1.2 + ') rotate(' + 5 + 'deg)';
                    oLis[x].style.MozTransform = 'scale(' + 1.2 + ') rotate(' + 5 + 'deg)';
                    oLis[x].style.transform = 'scale(' + 1.2 + ') rotate(' + 5 + 'deg)';
                    oLis[x].style.boxShadow = "0 5px 8px rgba(0,0,0,0.3);";
                    }
                oLis[x].οnmοuseοut=function(){
                    oLis[x].style.backgroundColor = "#fff";
                    oLis[x].style.transform = 'scale(' + 1.0 + ') rotateY(' + 0 + 'deg)';
                    oLis[x].style.boxShadow = "3px 3px 10px rgba(0,0,0,0.3);";
                }
              })(i);
            }
            //div鼠标移出
            function onMouseout(){
                oUL.style.visibility= "hidden";
            }
            //动画效果
            function doAnimate(){
                var i = 0;
                setInterval(function(){
                    if(i < 360){
                        i += 5;
                        oUL.style.transform = 'rotateY(' + i + 'deg)';
                    }
                },10)
            }
            if (oDiv.addEventListener) {  bindEvent();}
        }
    }
}());

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
        <title>DropDown - Ercyao</title>
        <style>
            .drop-down-box{width: 100%;display: flex;justify-content: space-around;}
            .drop-down-box .drop-down{width: 120px;text-align: center;}
            .drop-down-box .drop-down ul{font-size: 14px;}
        </style>
    </head>
<body>
    <div class="drop-down-box">
        <div class="drop-down" id="drop-down1"></div>
        <div class="drop-down" id="drop-down2"></div>
    </div>
<script src="dropDown.js"></script>
<script>
    var title1 = "经典的动漫";
    var title2 = "收藏的动漫";
    var items1 = [{url:"https://baike.so.com/doc/2873397-3032543.html",name:"海贼王"},{url:"https://baike.so.com/doc/2089677-2210664.html",name:"火影忍者"},{url:"https://baike.so.com/doc/4470546-4679457.html",name:"死神"}];
    var items2 = [{url:"https://baike.so.com/doc/928405-981327.html",name:"罪恶王冠 "},{url:"https://baike.so.com/doc/23640377-25012496.html",name:"在下坂本,有何贵干?"},{url:"https://baike.so.com/doc/4228844-4430597.html",name:"地狱少女"},{url:"https://baike.so.com/doc/392584-7577623.html",name:"尸鬼"}];
    var dropDown1 = dropDown("drop-down1", items1, title1);
    var dropDown2 = dropDown("drop-down2", items2, title2);
</script>
    </body>
</html>

一次性生成多个下拉菜单

多个下拉菜单效果图

JS

//author:Ercyao
(function(){
	dropDown = function(id,list){
		var mUL, mLi;            //父级菜单的ul、li
		var zUL, zP;	         //子级菜单的ul、p
		var oDiv, oP, oUL, oLis, oA, oLi;
		oDiv = document.getElementById(id);         //获取id
		if(oDiv){
			mUL = document.createElement("ul");
			list.map(function(list,i){
				mLi = document.createElement("li");	
				mUL.style.cssText = "display: flex; flex-flow: row wrap; width: 100%;";
				mLi.style.cssText = "list-style-type: none; width: 30%;";
				mUL.appendChild(mLi);
				oP = document.createElement("p");
				oUL = document.createElement("ul");
				// p和ul的样式设置			
				oP.style.cssText = "color:white; background-color:cadetblue; box-shadow: 3px 3px 10px rgba(0,0,0,0.3); width:90%; line-height:30px; padding:0 5%; margin:0;";
				oUL.style.cssText =  "padding:5px 0 0; margin:0; width:100%; visibility: hidden;";	
				mLi.appendChild(oP);
				mLi.appendChild(oUL);
				oDiv.appendChild(mUL);
				oP.innerHTML = list.title;
				var items = list.items;
				if(items){
					items.map(function(item,index){
						oLi =document.createElement("li")
						oA =document.createElement("a")
						oA.href = item.url;
						oA.innerHTML = item.name;
		                //	li和a的样式设置
						oLi.style.cssText = 'list-style-type: none; color:cadetblue; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color:#fff; margin-bottom: 5px; padding:0 5%; box-shadow: 3px 3px 10px rgba(0,0,0,0.3);';
						oA.style.cssText = 'color:cadetblue; text-decoration: none; width:100%; line-height:30px;';
						oLi.appendChild(oA);
						oUL.appendChild(oLi);
					})
				}	
			})
			mLis = mUL.children;
			for(var i=0; i< mLis.length; i++){
			  	(function(x){
				  	var zUL = mLis[x].lastChild;
				  	var zP = mLis[x].firstChild;
				     zP.οnmοuseοver=function(){
				    	zUL.style.visibility= "visible";
				    	zP.style.backgroundColor = "darksalmon";
				    	oLis = zUL.children;
				    	//动画效果
				    	var j = 0;
				        setInterval(()=>{
				        	if(j < 360){
				        		j += 5;
				        		zUL.style.transform = 'rotateY(' + j + 'deg)';
				        	}
				        },10)
				    	oLisChange();
				    }
				    zUL.οnmοuseοver=function(){
				    	zP.style.backgroundColor = "darksalmon";
				     	zUL.style.visibility= "visible";
				    }
				    mLis[x].οnmοuseοut=function(){
				    	zP.style.backgroundColor = "cadetblue";
				    	zUL.style.visibility= "hidden";
				    }
			  	})(i);
			}
			//子菜单经过和移出事件
			function oLisChange(){
			 	for(var i=0; i< oLis.length; i++){
				  (function(x){
				    oLis[x].οnmοuseοver=function(){
				    	oLis[x].style.backgroundColor = "antiquewhite";
				    	oLis[x].style.transform = 'scale(' + 1.1 + ') rotate(' + 5 + 'deg)';
				    	oLis[x].style.boxShadow = "0 5px 8px rgba(0,0,0,0.3);";
						}
				    oLis[x].οnmοuseοut=function(){
				    	oLis[x].style.backgroundColor = "#fff";
				    	oLis[x].style.transform = 'scale(' + 1.0 + ') rotateY(' + 0 + 'deg)';
				    	oLis[x].style.boxShadow = "3px 3px 10px rgba(0,0,0,0.3);";
				    }
			  	  })(i);
				}
			}
		}
	}
}());

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
        <title>DropDown - Ercyao</title>
    </head>
<body>
        <div id="drop-down"></div>
<script src="dropDown.js"></script>
<script>
    var list = [{
        title:"经典的动漫",
        items:[
            {
                url:"https://baike.so.com/doc/2873397-3032543.html",name:"海贼王"
            },{
                url:"https://baike.so.com/doc/2089677-2210664.html",name:"火影忍者"
            },{
                url:"https://baike.so.com/doc/4470546-4679457.html",name:"死神"
            }
        ]
    },{
        title:"最爱的动漫",
        items:[
            {
                url:"https://baike.so.com/doc/928405-981327.html",name:"罪恶王冠 "
            },{
                url:"https://baike.so.com/doc/23640377-25012496.html",name:"在下坂本,有何贵干?"
            },{
                url:"https://baike.so.com/doc/4228844-4430597.html",name:"地狱少女"
            },{
                url:"https://baike.so.com/doc/392584-7577623.html",name:"尸鬼"
            }
        ]
    }]
    var dropDown1 = dropDown("drop-down", list);
</script>
    </body>
</html>
展开阅读全文

没有更多推荐了,返回首页