click弹出菜单

网页左上角有个按钮,当鼠标点击的时候,会弹出一个自定义菜单

代码如下:

<script type="text/javascript">
  var EX = {
  addEvent:function(k,v){
    var me = this;
    if(me.addEventListener)
      me.addEventListener(k, v, false);
    else if(me.attachEvent)
      me.attachEvent("on" + k, v);
    else
      me["on" + k] = v;
  },
  removeEvent:function(k,v){
    var me = this;
    if(me.removeEventListener)
      me.removeEventListener(k, v, false);
    else if(me.detachEvent)
      me.detachEvent("on" + k, v);
    else
      me["on" + k] = null;
  },
  stop:function(evt){
    evt = evt || window.event;
    evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;
  }
};

document.getElementById('pop').onclick = EX.stop;
var url = '#'; 
function show(){ 
  var o = document.getElementById('pop'); 
  o.style.display = ""; 
  setTimeout(function(){
    EX.addEvent.call(document,'click',hide);
  });
}
function hide(){ 
  var o = document.getElementById('pop'); 
  o.style.display = "none"; 
  EX.removeEvent.call(document,'click',hide);
} 
</script>
<style type="text/css">
::-webkit-scrollbar {width:0px;}
*{margin:0;padding:0;}
body{background-repeat:no-repeat;background-position:center;
	background:linear-gradient(0deg,rgba(99, 0, 255, 0.3), rgba(88, 0, 255, 0.6)),url(https://cjj.zone/xxx/gif/海水.gif);background-size:cover;height:100vh;}
.menu{text-decoration:none;width:20px;height:20px;color:#ccc;text-align:left;font-size:20px;position:fixed;left:30px;top:30px;}
.menu:hover{color:#eee;}

/* pop */
.pop{position:fixed;left:0;top:0;width:320px;opacity:0.7;background-color:#111;height:100%;padding-top:15px;}
.x{position:relative;height: 2%;}
.x .close {width: 30px;height: 30px;position: absolute;top:5px;right:5px;font-size: 30px;color: #fff;text-decoration: none;font-family: "宋体";font-weight: 1;opacity: 0.3;}
	

.myzybox{height:100%;width:200px;margin:0 0 0 100px;}
.zhuye{display:block;width:150px;height:32px;line-height:32px;border-bottom:1px #1a1a1a solid;color:#888;font-size:14px;padding-left:2px;text-decoration:none;font-family:"微软雅黑";}
.zhuye:hover{color:#008e6e;width:144px;padding:0 0 0 6px;transition:all 0.2s ease-in-out;}
.zhuye img{display:block;float:left;width:13px;height:auto; margin:9px 5px 0 0;}
</style>
<!--首先设置一个层:-->
<div id="pop" class="pop" style="display:none">
    <div class="x"><a class="close" href="javascript:void(0);" onclick="hide()">×</a></div>	
	<div class="myzybox">	
		<a class="zhuye" href="https://gitee.com/cjj_uid" target="_blank"><img src="https://gitee.com/favicon.ico">Gitee</a>
		<a class="zhuye" href="https://gitlab.com/cjj.today" target="_blank"><img src="https://about.gitlab.com/images/icons/logos/slp-icon.svg">GitLab</a>
		<a class="zhuye" href="https://my.oschina.net/1115451756" target="_blank"><img src="https://static.oschina.net/new-osc/img/favicon.ico">OSCHINA</a>
		<a class="zhuye" href="https://blog.csdn.net/JJ1115451756" target="_blank"><img src="https://blog.csdn.net/favicon.ico">CSDN</a>
		<a class="zhuye" href="https://blog.51cto.com/13984984" target="_blank"><img src="https://blog.51cto.com/favicon.ico">51CTO</a>
		<a class="zhuye" href="https://www.yuque.com/cjj.today" target="_blank"><img src="https://gw.alipayobjects.com/zos/rmsportal/UTjFYEzMSYVwzxIGVhMu.png">语雀</a>
		<a class="zhuye" href="https://www.zhisheji.com/space-uid-150671.html" target="_blank"><img src="https://www.zhisheji.com/favicon.ico">致设计</a>
		<a class="zhuye" href="https://www.zcool.com.cn/u/14814302" target="_blank"><img src="https://static.zcool.cn/git_z/z/site/favicon.ico?version=1645763753035">ZCOOL</a>
		<a class="zhuye" href="https://huaban.com/cjjuid" target="_blank"><img src="https://huaban.com/favicon.ico">花瓣</a>
		<a class="zhuye" href="https://www.58pic.com/u/4082948/" target="_blank"><img src="http://www.58pic.com/favicon.ico">千图网</a>
		<a class="zhuye" href="https://weibo.com/cjjuid" target="_blank"><img src="https://weibo.com/favicon.ico">Sina</a>
		<a class="zhuye" href="https://tiangeclub.lofter.com/" target="_blank"><img src="https://lofter.com/favicon.ico">LOFTER</a>
		<a class="zhuye" href="https://www.zhihu.com/people/i2356" target="_blank"><img src="https://static.zhihu.com/heifetz/favicon.ico">知乎</a>
		<a class="zhuye" href="https://space.bilibili.com/492212413" target="_blank"><img src="https://space.bilibili.com/favicon.ico">bilibili</a>
		<a class="zhuye" href="http://blog.sina.com.cn/s/articlelist_5579810778_0_1.html" target="_blank"><img src="http://blog.sina.com.cn/favicon.ico">新浪博客</a>
		<a class="zhuye" href="http://new.yizhibo.com/member/personel/user_info?memberid=25989178&jumpbrowser=1" target="_blank"><img src="http://new.yizhibo.com/favicon.ico">一直播</a>
		<a class="zhuye" href="https://www.meipai.com/user/1053854976?single_column=0" target="_blank"><img src="https://www.meipai.com/favicon.ico">美拍</a>
		<a class="zhuye" href="https://699pic.com/photographer/336560" target="_blank"><img src="http://699pic.com/favicon.ico">摄图网</a>
		<a class="zhuye" href="http://www.cjjuid.poco.cn/" target="_blank"><img src="https://www.poco.cn/favicon.ico">poco摄影网</a>
		<a class="zhuye" href="https://shiyi.tuchong.com/" target="_blank"><img src="https://tuchong.com/favicon.ico">图虫</a>
		<a class="zhuye" href="https://my.fengniao.com/i2356" target="_blank"><img src="https://my.fengniao.com/favicon.ico">蜂鸟网</a>
		<a class="zhuye" href="https://node.kg.qq.com/personal?uid=639b948c2c2b318933" target="_blank"><img src="https://node.kg.qq.com/favicon.ico">全民K歌</a>
		<a class="zhuye" href="https://music.163.com/#/user/home?id=61868641" target="_blank"><img src="https://s1.music.126.net/style/favicon.ico?v20180823">网易云</a>
		<a class="zhuye" href="https://y.qq.com/n/ryqq/profile/like/song" target="_blank"><img src="https://y.qq.com/favicon.ico?max_age=2592000">QQ音乐</a>
		<a class="zhuye" href="https://www.douyin.com/user/MS4wLjABAAAA0w_IxSATZ5SktaQbLMMYt9o3MkR9W60bmrVDzomdUeA" target="_blank"><img src="https://lf1-cdn-tos.bytegoofy.com/goofy/ies/douyin_web/public/favicon.ico">抖音</a>
		<a class="zhuye" href="https://www.kuaishou.com/profile/3xzfnqidbqmjgdu" target="_blank"><img src="https://static.yximgs.com/udata/pkg/WEB-LIVE/kwai_icon.8f6787d8.ico">快手</a>
	</div>
</div>

<!--弹出层的按钮:-->
<a class="menu" href="javascript:void(0);" onclick="show();"><b>☰</b></a>

这里的内容可以用表格来梳理,更方便,更清晰(用Excel或者wps)
个人推荐用语雀

THE END
觉得有用就给点个赞呗
点赞5 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容