斗鱼的sidebar的实现简陋的demo

Posted 2020-08-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了斗鱼的sidebar的实现简陋的demo相关的知识，希望对你有一定的参考价值。

//因为时间比较紧张，没有对源码进行详细的介绍，在周末的优化的时候都会一一的补上，并且对代码进行优化

<!DOCTYPE <a href="https://it.cha138.com/html/" target="_blank"><strong class="keylink">html</strong></a>>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style>
.sidebar{
position:fixed;
top:0;
left:0;
background:#f00;
}
.content{
width:200px;
background:#666;
height:200px;
}
.left-smcontent{
width:57px;
display:none;
background:#ccc;
height:200px;
}
.small .content{ display:none;}
.small .left-smcontent{ display:block;}
.small .close{left:57px;}
.close{
position:fixed;
top:50%;
left:200px;
display:inline-block;
width:30px;
height:30px;
background:red;
}
.main{margin-left:250px;}
</style>
</head>
<body>
<div id="sidebar" class="sidebar">
<div class="content"></div>
<div class="left-smcontent"></div>
<a href="<a href="https://it.cha138.com/javascript/" target="_blank"><strong class="keylink">javascript</strong></a>:;" id="close" class="close"></a>
</div>
<div class="main" id="main">2222222</div>
  <script>
function $(id){
return document.getElementById(id)
  }
function windowHight(){
return document.documentElement.clientHeight||document.body.clientHeight;
  }
$("sidebar").style.height=windowHight()+"px";
window.onresize=function(){
$("sidebar").style.height=windowHight()+"px";
  }
$("close").onclick=function(){
if($("sidebar").className=="sidebar small"){
$("sidebar").className="sidebar";
$("main").style.marginLeft="250px"
}else{
$("sidebar").className="sidebar small";
$("main").style.marginLeft="57px"
}
  }
</script></body>
</html>

以上是关于斗鱼的sidebar的实现简陋的demo的主要内容，如果未能解决你的问题，请参考以下文章

博客园头像

12mmaction2 行为识别商用级别X3D复现 demo实现检测自己的视频 Expanding Architecturesfor Efficient Video Recognition(代码片段

两行代码实现微信小程序联系人sidebar

#VSCode保存插件配置并使用 gist 管理代码片段

PHP实现一个简陋的注册登录页面

Wordpress在侧边栏sidebar实现微博挂件方法[图]