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
查看全文
相关阅读:
树的遍历
字符串转化到实数
redis笔记_源码_跳表skiplist
《parsing techniques》中文翻译和正则引擎解析技术入门
sublime3 Package Control和 中文安装
python基础——字典dict
python基础1
pandas入门总结1
numpy入门总结2
numpy入门总结1
原文地址:https://www.cnblogs.com/heyinwangchuan/p/6003922.html
最新文章
学习Java011302
学习JAVA-集合(一)
再看网络HTTP,摘抄-浏览器不能上网但QQ可以上
线段的垂直平分线
放松读物,看视频,再提html语义化
放松读物,再看css禅意花园-总结HTML-总结
Apache commons (Java常用工具包)简介
smtp cmd 测试 smtp发送邮件 cmd发送邮件
在Windows平台下安装与配置Memcached的方法分享
CentOS下重新安装yum
热门文章
linux搭建php
centeros resin安装脚本启动
myeclipse 环境配置优化,不断跟新整理中
Tomcat 设置自动编译,自动发布,自动部署
servlet学习
Python迭代器与生成器
Python3基础数据类型(数字、字符串、元组、列表、集合、字典)
日志级别的判定
github项目大全
转:深入浅出cache写策略
Copyright © 2011-2022 走看看