浮动的div自适应居中显示的js代码


Posted in Javascript onDecember 23, 2013

当div是浮动的时候浏览器窗口发生变化的时候不能居中显示(因为浮动的时候一般设定的有left或者right值)

可以先用jquery获取外围的div随浏览器变化而变化的宽度(加上监听事件)

之后再获取div的宽度 例如:

function autoWidth(){
     var bW = $(".call_man").width();//外围的div
     var popWidth = (bW-150)/2    //(150是div的宽度)
    $(".rts").css("left",popWidth);  //把取得值赋给div 就是div距离左侧的距离
}
autoWidth();
window.onresize = autoWidth;//监听事件
Javascript 相关文章推荐
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
AngularJS基础知识
Dec 21 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
javascript实现简单的Map示例介绍
Dec 23 #Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 #Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 #Javascript
js写的评论分页(还不错)
Dec 23 #Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 #Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 #Javascript
jquery实现图片翻页效果
Dec 23 #Javascript
You might like
PHP 递归效率分析
2009/11/24 PHP
php学习之运算符相关概念
2011/06/09 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
php实现cookie加密的方法
2015/03/10 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
PHP代码加密的方法总结
2020/03/13 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
js实现选项卡效果
2020/03/07 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
python实现视频分帧效果
2019/05/31 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
自荐书范文范例
2014/02/13 职场文书
一年级语文教学反思
2014/02/13 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
2015年国庆节广播稿
2015/08/19 职场文书