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
查看全文
相关阅读:
从太空到地球某个位置的轨迹录像制作 | Earth Zoom in/out Tutorial (Record Video)
DNA replication timing数据库
探索ENCODE数据库 | Encyclopedia of DNA Elements
第100天: 三木板模型算法项目实战
第99天:UDP 编程
第98天:图像库 PIL 实例—验证码去噪
第97天:图像库 PIL(二)
第96天:图像库 PIL(一)
第95天:StringIO & BytesIO
第94天:数据分析之 pandas 初步
原文地址:https://www.cnblogs.com/heyinwangchuan/p/6003922.html
最新文章
生命科学50讲 | 生命·智能 | 笔记和点评
GWAS | 原理和流程 | 全基因组关联分析 | Linkage disequilibrium (LD)连锁不平衡 | 曼哈顿图 Manhattan_plot | QQ plot
转录因子 | transcription factor | 从入门到精通
大脑信号数据处理 | AP | LFP | ECoG | EEG | fNIRS | fMRI
Science全世界最前沿的125个科学问题
ATAC-seq数据处理流程 | 自定义 & 个性化分析
Moderna 新型冠状病毒 mRNA 疫苗 mRNA-1273中期试验结果公布
高级统计方法 | Advanced statistical methods
手动计算富集分析
MacBooster
热门文章
读过的书早晚会忘,为什么还要读书?
野狼disco | 歌词练习
发育生物学的常见实验技术 | 入门介绍
JCR分区 | 中科院SCI期刊分区表
ChIP-seq | ATAC-seq | RNA-seq | 数据分析流程
在HPC的节点上使用jupyter notebook
根据motif binding来确定target gene | HOMER | FIMO | MEME
科研黑帮 | Molecular Genetic Anatomy and Risk Profile of Hirschsprung’s Disease
Linux下安装和使用MySQL数据库
变异的功能 | variants function | coding | non-coding
Copyright © 2011-2022 走看看