第一次写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].onmouseover=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].onmouseout=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.onmouseover=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.onmouseover=function(){
zP.style.backgroundColor = "darksalmon";
zUL.style.visibility= "visible";
}
mLis[x].onmouseout=function(){
zP.style.backgroundColor = "cadetblue";
zUL.style.visibility= "hidden";
}
})(i);
}
//子菜单经过和移出事件
function oLisChange(){
for(var i=0; i< oLis.length; i++){
(function(x){
oLis[x].onmouseover=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].onmouseout=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>
网友评论