浮动的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 相关文章推荐
javascript 常用关键字列表集合
Dec 04 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
React 组件间的通信示例
Jun 14 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
vue全屏事件开发详解
Jun 17 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/15 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
jquery随意添加移除html的实现代码
2011/06/21 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
python ssh 执行shell命令的示例
2020/09/29 Python
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
教师应聘个人求职信
2013/12/10 职场文书
九年级家长会邀请函
2014/01/15 职场文书
早会主持词
2014/03/17 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
自主招生教师推荐信
2014/05/10 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
人事文员岗位职责
2015/02/04 职场文书
公安机关起诉意见书
2015/05/20 职场文书
演讲开场白和结束语
2015/05/29 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
手写实现JS中的new
2021/11/07 Javascript
spring 项目实现限流方法示例
2022/07/15 Java/Android