浮动的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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
javascript开发中因空格引发的错误
Nov 08 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
python配置文件写入过程详解
2019/10/19 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
Python 高效编程技巧分享
2020/09/10 Python
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
英文版餐饮业求职信
2013/10/18 职场文书
五年级数学教学反思
2014/02/11 职场文书
工作岗位说明书模板
2014/05/09 职场文书
小学三年级作文之写景
2019/11/05 职场文书
python删除csv文件的行列
2021/04/06 Python
Vue router配置与使用分析讲解
2022/12/24 Vue.js