js实现屏幕自适应局部代码分享


Posted in Javascript onJanuary 30, 2015

有小伙伴留言说需要一个js实现屏幕自适应局部的代码,这里简单整理了下,放出来给大家。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

*{

margin:0;

padding:0;

list-style:none;

}

div{

margin:0 auto;

height:10000px;

min-width:880px;

max-width:1100px;

background:#060;

clear:both;

}

ul{}

li{

float:left;

display:inline;

width:198px;

height:198px;

border:1px solid #ccc;

margin:10px;

}

</style>

</head>

<body>

<div id="main">

<ul>

        <li>11111111111</li>

        <li>2222222222</li>

        <li>33333333333</li>

        <li>4444444444</li>

        <li>55555555555</li>

        <li>666666666</li>

        <li>77777777777</li>

        <li>888888888888</li>

        <li>999999999</li>

        <li>00000000000</li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

<script>

var winWidth;

window.onload=function(){

if (window.innerWidth)

winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth = document.body.clientWidth;

if(winWidth<=1100)

document.getElementById("main").style.width="880px";

else if(winWidth>=1100)

document.getElementById("main").style.width="1100px";

}

window.onresize=function(){

if (window.innerWidth)

winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth = document.body.clientWidth;

if(winWidth<=1100)

document.getElementById("main").style.width="880px";

else if(winWidth>=1100)

document.getElementById("main").style.width="1100px";

}

</script>

</body>

</html>

试试看,是不是效果非常棒,希望大家能够喜欢。

Javascript 相关文章推荐
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 #Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 #Javascript
javascript中sort()的用法实例分析
Jan 30 #Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 #Javascript
javascript结合fileReader 实现上传图片
Jan 30 #Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 #Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 #Javascript
You might like
浅谈php扩展imagick
2014/06/02 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
JS中的作用域链
2017/03/01 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
Python numpy 点数组去重的实例
2018/04/18 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Django之模型层多表操作的实现
2019/01/08 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
详解python中的线程与线程池
2019/05/10 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
大学校园毕业自我鉴定
2014/01/15 职场文书
中专自我鉴定
2014/02/05 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
爱心倡议书范文
2014/05/12 职场文书
会计演讲稿范文
2014/05/23 职场文书
计划生育工作汇报
2014/10/28 职场文书
小学教师工作总结2015
2015/04/07 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
小学中队委竞选稿
2015/11/20 职场文书
浅析Python实现DFA算法
2021/06/26 Python
mysql 索引合并的使用
2021/08/30 MySQL
Python实现制作销售数据可视化看板详解
2021/11/27 Python
什么是SOLID
2022/03/24 Javascript