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 相关文章推荐
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 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
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
详解Vue爬坑之vuex初识
2017/06/14 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
使用pip安装python库的多种方式
2019/07/31 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
巴西手表购物网站:eclock
2019/03/19 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
食品工程专业求职信
2014/06/15 职场文书
营销总监岗位职责
2014/09/16 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL
python实现双向链表原理
2022/05/25 Python