斗鱼的sidebar的实现简陋的demo

首页 > 代码库 > 斗鱼的sidebar的实现简陋的demo

斗鱼的sidebar的实现简陋的demo

2024-08-18 10:46:07 217人阅读

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

<!DOCTYPE html><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="javascript:;" 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

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 斗鱼的sidebar的实现简陋的demo

斗鱼的sidebar的实现简陋的demo

看完仍有疑问？有类似问题直接问程序猿