zoukankan
html css js c++ java
斗鱼的sidebar的实现简陋的demo
斗鱼的sidebar的实现简陋的demo
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title></title> <style> .sidebar{ position:fixed; top:0; left:0; background:#f00; } .content{ 200px; background:#666; height:200px; } .left-smcontent{ 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; 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>
运行
//因为时间比较紧张,没有对源码进行详细的介绍,在周末的优化的时候都会一一的补上,并且对代码进行优化
2222222
查看全文
相关阅读:
第一道题:无头苍蝇装头术(望不吝赐教)
jdk8 list是否包含某值的一些应用
Failed to close server connection after message failures; nested exception is javax.mail.MessagingException: Can't send command to SMTP host
itext pdf加密
TiDB-禁用遥测功能
TiDB-配置调整
DM-表空间
DM-INI参数配置
DM-DSC集群配置
PG-并行查询
原文地址:https://www.cnblogs.com/heyinwangchuan/p/6003922.html
最新文章
排序算法4
排序算法3
排序算法2
排序算法1
springboot中邮箱验证按钮实现60秒后可重新获取(可防刷新)以及防重复发送
2021/1/29 35. 搜索插入位置 收获:一颗星
数据结构之哈希(hash)表
CSP 2021 游记
windows 下的对拍
实习答辩项目分享-侣行婚礼婚品采购系统
热门文章
Java SE 高级
JavaSE高级-多线程
JavaSE高级 -JDK1.8新特性-Lambda表达式-函数式接口
JavaSE高级-集合框架List&Set&Map
使用 swagger-ui 可视化 Kubernetes API 文档
拼多多如何批量修改放心推出价?
resharper 自定义代码模板(code snippet)
anaconda创建新的虚拟环境
TOPSIS法(优劣解距离法)
层次分析法(AHP)
Copyright © 2011-2022 走看看