中易网

jQuery获取子元素宽度。

答案:1  悬赏:70  
解决时间 2021-04-28 10:57
  • 提问者网友:久伴不朽
  • 2021-04-27 19:11
以下是HTML代码:、
<a href="javascript:void(0);" onclick="hidebox(2);showbox(1);">我要接通绿线</a><div class="position"><div id="facebox1" class="facebox" style="display:none;"> <img class="tl" src="/2010/images/pop/tl.gif" /> <img class="tr" src="/2010/images/pop/tr.gif" /> <img class="bl" src="/2010/images/pop/bl.gif" /> <img class="br" src="/2010/images/pop/br.gif" /> <div class="holder gtel_1"> <div class="head"> <strong>新通杭州</strong> </div> <div class="body"> <table width="588" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="369" height="118"> <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="152" height="33" align="right"><span>输入您的电话号码:</span></td> <td><input class="txtbox" type="text" size="35" /></td> </tr> <tr> <td height="29" align="right"><span>输入验证码:</span></td> <td><input class="txtbox" type="text" size="4" /><img class="yzm" align="absmiddle" src="/2010/images/pop/yzm.gif" /><a href="#">换一张?</a></td> </tr> <tr> <td height="29" align="right">&nbsp;</td> <td><a href="javascript:void(0);" onclick="hidebox(1);showbox(2);" class="redbtn"><img align="top" src="/2010/images/pop/bd_btn_l.gif" /><strong>发起回呼</strong><img align="top" src="/2010/images/pop/bd_btn_r.gif" /></a></td> </tr> </table> </td> <td valign="top"> <div class="other"> 如果你想咨询其他分公司: <select class="ddlist"><option>请点击选择</option></select> </div> </td> </tr> </table> <dl class="explain"> <dt>绿线使用说明</dt> <dd>1、输入您的电话号码,固话请加区号(如:01087654321),手机请直接输入号码(如:13923456789)</dd> <dd>2、点击“发起回呼”按钮,立即以接听的方式免费通话,GTel帮助您轻松沟通!</dd> </dl> </div> <div class="foot"> <img src="/2010/images/pop/foot_gtel.gif" /> </div> </div> <div class="close"> <img src="/2010/images/pop/closelabel.gif" /> </div></div></div>
以下是CSS代码:.position{ width:100%; position:absolute;}.facebox{ border:8px solid #989695; position:relative; margin:0 auto;}.facebox .tl{ position:absolute; top:-8px; left:-8px;}.facebox .tr{ position:absolute; top:-8px; right:-8px;}.facebox .bl{ position:absolute; bottom:-8px; left:-8px;}.facebox .br{ position:absolute; bottom:-8px; right:-8px;}
.facebox .close{ text-align:right; padding:7px 10px 5px 0; background:#fff; border-top:1px solid #ddd;}.facebox .close img{ cursor:pointer;}
.loading{ width:32px; height:32px; overflow:hidden; position:absolute; top:300px; z-index:10000;}
.bg{ height:1000px; background:#f5f5f5;}
a.redbtn{ display:inline-block; height:25px; line-height:25px; color:#fff; font-size:14px; background:url(/2010/images/pop/bg_btn_1.gif) repeat-x;}a.redbtn strong{display:inline-block;  padding:0 20px;}a.redbtn:hover{ text-decoration:none;}
.gtel_1{ width:588px;}.gtel_1 .head{ height:43px; padding:36px 0 0 275px; background:url(/2010/images/pop/head_gtel.jpg) no-repeat;}.gtel_1 .head strong{ font-size:14px; color:#fff885; font-weight:bold;}.gtel_1 .body{ background:#fafdf7 url(/2010/images/pop/hr_gtel_1.gif) no-repeat 369px 0;}.gtel_1 .body .table1 span{ font-size:14px;}.gtel_1 .body .yzm{ margin:0 5px;}.gtel_1 .body .txtbox{ height:18px; line-height:18px; border-top:1px solid #a5acb2; border-right:1px solid #ced3d7; border-bottom:1px solid #ced3d7; border-left:1px solid #a5acb2;}.gtel_1 .other{ margin:20px 20px 0; color:#ff5a00; font-size:14px; line-height:30px;}.gtel_1 .other .ddlist{ width:155px;}.gtel_1 .foot img{ display:block;}.gtel_1 .explain{ padding:0 0 10px 20px; background:#e8f5e1; border-top:1px solid #d1e6b9;}.gtel_1 .explain dt{ height:30px; line-height:30px; font-family:"微软雅黑"; font-size:15px; color:#ff6000; padding:5px 0 0; border-top:1px solid #fff;}.gtel_1 .explain dd{ height:20px; line-height:20px; color:#508200;}
以下是jQuery代码: //返回滚动宽高 $.getPageScroll = function(){ var xScroll, yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; xScroll = self.pageXOffset; } else if (document.documentElement && document.documentElement.scrollTop) { yScroll = document.documentElement.scrollTop; xScroll = document.documentElement.scrollLeft; } else if (document.body) { yScroll = document.body.scrollTop; xScroll = document.body.scrollLeft; } return new Array(xScroll,yScroll); } //显示盒子 function showbox(id){ var objBox = $("#facebox" + id); var pageScroll = $.getPageScroll(); //获取窗口高 var winHeight = window.screen.height; //获取盒子宽 var boxWidth = objBox.find(".holder").width(); alert(boxWidth); var boxHeight = objBox.height(); objBox.css({top:pageScroll[1] + (winHeight - boxHeight) / 4,width:boxWidth}).fadeIn(); } //隐藏盒子 function hidebox(id){ $("#facebox" + id).fadeOut(); } //关闭盒子 $(function(){ $(".close").click(function(){$(this).parent().fadeOut();}); });


如果需要源文件的可以加我。
最佳答案
  • 二级知识专家网友:年轻没有失败
  • 2021-04-27 19:23
代码这么乱,难怪没人答,谁乐意看啊?拜托下次问的时候用点心好吧?
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
点此我要举报以上问答信息!
大家都在看
推荐信息