浮动的div自适应居中显示的js代码

 这篇文章主要介绍了浮动的div自适应居中显示的js代码,有需要的朋友可以参考一下

当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;//监听事件
 
 

时间: 2024-08-09 00:05:16

浮动的div自适应居中显示的js代码的相关文章

浮动的div自适应居中显示的js代码_javascript技巧

当div是浮动的时候浏览器窗口发生变化的时候不能居中显示(因为浮动的时候一般设定的有left或者right值) 可以先用jquery获取外围的div随浏览器变化而变化的宽度(加上监听事件) 之后再获取div的宽度 例如: 复制代码 代码如下: function autoWidth(){      var bW = $(".call_man").width();//外围的div     var popWidth = (bW-150)/2    //(150是div的宽度)    $(&q

基于jQuery实现左右div自适应高度完全相同的代码_jquery

在线演示:http://demo.jb51.net/js/2012/jquery_demo/jquery_div_autoheihet.htm完整代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

让一个div绝对居中显示的跨浏览器js

js|浏览器|显示 <html><body><input type="button" value="sd" /><br/> <div id="111" style="position:absolute;width:200px;height:200px;background-color:#666666;"><div id="a0" name=&

基于jQuery实现左右div自适应高度完全相同实现代码

浏览器分别为IE(Internet Explorer).NS(Netscape).Opera.FF(FireFox). clientHeight 大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关. offsetHeight IE.Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框. NS.FF 认为 offset

鼠标悬浮停留三秒后自动显示大图js代码

 鼠标悬浮停留三秒后显示大图,在网页中还是比较实用的 1 <style> 2 *{margin:0;padding:0;list-style-type:none;} 3 img,a{border:0;} 4 .piccon{height:75px;margin:100px 0 0 50px;} 5 .piccon li{float:left;padding:0 10px;} 6 #preview{position:absolute;border:1px solid #ccc;backgroun

鼠标悬浮停留三秒后自动显示大图js代码_javascript技巧

鼠标悬浮停留三秒后显示大图,在网页中还是比较实用的 <style> *{margin:0;padding:0;list-style-type:none;} img,a{border:0;} .piccon{height:75px;margin:100px 0 0 50px;} .piccon li{float:left;padding:0 10px;} #preview{position:absolute;border:1px solid #ccc;background:#333;paddin

json格式化显示样式js代码分享

最近开发中需要在页面展示json.特整理了下代码,送给大家,希望能帮到有同样需求的朋友们. 代码: <html> <script src="http://cdn.bootcss.com/jquery/3.0.0-rc1/jquery.min.js"></script> <body> <span class="result"></span> <script> //json格式化方法 参

Ajax在线提交留言并实时显示的js代码[修正版]_表单特效

不妨多提交几次留言试试看-- 姓名: 内容: 显示留言

大图片根据分辨率自适应宽度仍居中显示

 问题:一个1920*900的大图,在1024*768的分辨率只能显示一部分,希望仍居中显示 解决方案CSS:   代码如下: width: 100%; background-position: 50% 50%; 示例code:    代码如下: <style> body { background-repeat: no-repeat; width: 100%; background-position-x: 50%; background-position-y: 118px; backgroun