浮动的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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 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指定函数参数默认值示例代码
2013/12/04 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
javascript 播放器 控制
2007/01/22 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
javascript时间差插件分享
2016/07/18 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
layui原生表单验证的实例
2019/09/09 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
python 系统调用的实例详解
2017/07/11 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
Python File(文件) 方法整理
2019/02/18 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
法国在线药房:DoctiPharma
2020/10/21 全球购物
业务员薪酬管理制度
2014/01/15 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
演讲稿开场白台词
2014/08/25 职场文书
导航工程专业自荐信
2014/09/02 职场文书
教师考核表个人总结
2015/02/12 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL