浮动的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 表单验证常见正则
Sep 28 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
原生js实现轮播图
Feb 27 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
用JS创建一个录屏功能
Nov 11 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 检查扩展库或函数是否可用的代码
2010/04/06 PHP
php生成excel列序号代码实例
2013/12/24 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python三级菜单的实例
2017/09/13 Python
python机器学习之贝叶斯分类
2018/03/26 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
消防安全责任书范本
2014/04/15 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
导游词之桂林山水
2019/09/20 职场文书
Python基础知识之变量的详解
2021/04/14 Python
spring boot中nativeQuery的用法
2021/07/26 Java/Android