runxinzhi.com
首页
百度搜索
斗鱼的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
相关阅读:
linux清理内存
华为代码注释标准
Spring缓存机制的理解
jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小
模仿iframe框架,由分隔栏动态改变左右两侧div大小———基于jQuery
js实现由分隔栏决定两侧div的大小—js动态分割div
java基于socket的简单聊天系统
中国移动归属地区号大全
将本地光盘做成yum源
windows下设置计划任务自动执行PHP脚本
原文地址:https://www.cnblogs.com/heyinwangchuan/p/6003922.html
最新文章
Entity Framework 学习笔记(2)
Entity Framework 学习笔记(1)
深入理解IEnumerable和IQueryable两接口的区别
贪心算法
中华人民共和国建筑工业行业标准—IFC详细解读 第三篇
中华人民共和国建筑工业行业标准—IFC详细解读 第二篇
中华人民共和国建筑工业行业标准—IFC详细解读 第一篇
遍历树节点(多层)的方法(java)
IFC4 在线参考手册
使用java解析ifc并获取数据(树形结构)
热门文章
IFC数据模式架构的四个概念层详解说明
IFC文档结构说明
IFC标准是为了满足建筑行业的信息交互与共享而产生的统一数据标准,是建 筑行业事实上的数据交换与共享标准。本文概要介绍了IFC标准的产生及发展 历程,IFC的整体框架结构,简要说明了IFC标准的实现方法和过程,描述了 当前的应用以及我们应该更加积极地利用IFC标准为建筑软件行业服务。
C#连接Mysql数据库 MysqlHelper.cs文件
IFC文件解析
IFC格式简介
Visual Stdio 无法直接启动带有“类库输出类型”的项目若要调试此项目,请在此解决方案中添加一个引用库项目的可执行项目。将这个可执行项目设置为启动项目!
A*算法
如何获取用户的真实IP
基于bootstrap样式的tree,
Copyright © 2020-2023
润新知