浮动的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 Array.prototype.slice的使用示例
Nov 14 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
js与applet相互调用的方法
Jun 22 Javascript
javascript的几种写法总结
Sep 30 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
Vue + ts实现轮播插件的示例
Nov 10 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
php GD绘制24小时柱状图
2008/06/28 PHP
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
深入研究React中setState源码
2017/11/17 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
清洁员岗位职责
2015/02/15 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
python微信智能AI机器人实现多种支付方式
2022/04/12 Python
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL