科室排班表跳转
老师好，想问下这里科室排班表，我用jQuery控制div的left值让其左右移动，但是会有移动超出的情况，我又用jQuery判断并校正，但是总觉得有欠缺，有没有更好的办法让移动距离不超出div范围呢？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>城市统一预约挂号平台</title> <link rel="stylesheet" href="css/fragment.css"> <link rel="stylesheet" href="css/detail.css"> </head> <body> <!--页首--> <!--所有的wrap都是用来框内容位置区域的--> <header> <div class="wrap"> <div class="header_left"> <span class="phonenumber">010-114/116114电话预约</span> </div> <div class="header_right"> 欢迎来到城市预约挂号统一平台 请 <span>登陆</span> <span>注册</span> <span>帮助中心</span> </div> </div> </header> <!--头部的logo、搜索框--> <section class="head"> <div class="wrap"> <!--logo--> <img src="img/logo.png" class="logo"> <!--搜索框UI--> <div class="search"> <span class="search_type">医院</span> <ul class="select_items"> <li>科室</li> <li>疾病</li> <li>医院</li> </ul> <span class="select_icon"></span> <input type="text" placeholder="请输入搜索内容"> <span class="search_go"></span> </div> </div> </section> <!--顶部的导航--> <nav class="head_nav"> <div class="wrap"> <ul> <li>首页</li> <li>按医院挂号</li> <li>按科室挂号</li> <li>按疾病挂号</li> <li>最新公告</li> <li class="famous_hospital">社会知名医院</li> </ul> </div> </nav> <!--医院信息、地图--> <section class="info"> <!--医院信息（顶部的标题等）--> <div class="info_title"> <a class="hospital_name">北京协和医院</a> <a class="hospital_attention">关注医院</a> <a class="hospital_detail"> <span>等级：</span>三级甲等 <span>区域：</span>东城区 <span>分类：</span>中国医科院所属医院 </a> </div> <!--医院图片、地址信息、地图等--> <div class="info_content"> <!--医院图片--> <div class="hospital_pic"> <img src="img/hospital-1.jpg"> <img src="img/hospital-2.jpg"> <img src="img/hospital-3.jpg"> <img src="img/hospital-4.jpg"> <img src="img/hospital-5.jpg"> <img src="img/hospital-6.jpg"> </div> <!--医院地址、公交线路--> <div class="hospital_place"> <p class="hospital_place1">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓胡同41号</p> <p class="hospital_place2">http://www.pumch.cn/</p> <p class="hospital_place3">东院咨询台：010-69155564；西院咨询台：010-69158010</p> <p class="hospital_place4">东院：106,108,110,111,116,684,665到东单路口北；41,104快，814到东单路口南；1,52,728,802到东单路口西；20,25,37,39到东单路口东；103,104,420,803到新东安市场；地铁1、5号线到东单。西院：68到辟才胡同东口；更多乘车路线详见须知</p> </div> <!--医院地图--> <div class="hospital_map"></div> </div> </section> <!--挂号预约导航--> <nav class="order_nav"> <div class="wrap"> <ul> <li class="current">预约挂号</li> <li>医院介绍</li> <li>预约通知</li> <li>停诊信息</li> <li>查询取消</li> </ul> </div> </nav> <!--预约情况等（会变化）--> <section class="order"> <!--预约挂号--> <div class="appointment"> <!--左侧的开放预约科室信息--> <table class="open_apartments"> <thead> <tr> <td>开放预约科室</td> <td colspan="4"></td> </tr> </thead> <tr> <td rowspan="3" class="apartment_name">2301</td> <td class="apartments">特殊门诊科</td> <td class="apartments">特殊门诊科</td> <td class="apartments">特殊门诊科</td> <td class="apartments">特殊门诊科</td> </tr> <tr> <td class="apartments">特殊门诊科</td> <td class="apartments">特殊门诊科</td> <td class="apartments">特殊门诊科</td> <td class="apartments">特殊门诊科</td> </tr> <tr> <td class="apartments">特殊门诊科</td> <td class="apartments">特殊门诊科</td> </tr> <tr> <td rowspan="3" class="apartment_name">专科</td> <td class="apartments">多发性硬化专科</td> <td class="apartments">门诊麻醉科</td> <td class="apartments">门诊麻醉科</td> <td class="apartments">多发性硬化专科</td> </tr> <tr> <td class="apartments">多发性硬化专科</td> <td class="apartments">特殊门诊科</td> <td class="apartments">门诊麻醉科</td> <td class="apartments">门诊麻醉科</td> </tr> <tr> <td class="apartments">特殊门诊科</td> <td class="apartments">门诊麻醉科</td> <td class="apartments">门诊麻醉科</td> <td class="apartments">多发性硬化专科</td> </tr> <tr> <td rowspan="3" class="apartment_name">内科</td> <td class="apartments">肿瘤内科门诊</td> <td class="apartments">特需血液内科</td> <td class="apartments">特需血液内科</td> <td class="apartments">肿瘤内科门诊</td> </tr> <tr> <td class="apartments">肿瘤内科门诊</td> <td class="apartments">特需门诊科</td> <td class="apartments">门诊麻醉科</td> <td class="apartments">特需血液内科</td> </tr> <tr> <td class="apartments">特需血液内科</td> <td class="apartments">门诊麻醉科</td> <td class="apartments">门诊麻醉科</td> <td class="apartments">肿瘤内科门诊</td> </tr> <tr> <td rowspan="3" class="apartment_name">内科</td> <td class="apartments">肿瘤内科门诊</td> <td class="apartments">特需血液内科</td> <td class="apartments">特需血液内科</td> <td class="apartments">肿瘤内科门诊</td> </tr> <tr> <td class="apartments">肿瘤内科门诊</td> <td class="apartments">特需门诊科</td> <td class="apartments">门诊麻醉科</td> <td class="apartments">特需血液内科</td> </tr> <tr> <td class="apartments">特需血液内科</td> <td class="apartments">门诊麻醉科</td> <td class="apartments">门诊麻醉科</td> <td class="apartments">肿瘤内科门诊</td> </tr> </table> <!--右侧的预约规则说明--> <div class="appointment_rule"> <h1>预约规则<span>（更新时间每日8:30更新）</span></h1> <p>预约周期：<span>7天</span></p> <p>放号时间：<span>8:30</span></p> <p>停挂时间：<span>下午14:00停滞次日预约挂号（周五14:00后停挂至下周一）</span></p> <p>退号时间：<span>就诊前一工作日14:00前取消</span></p> <p>特殊规则：<span>①取号地点不同：西院区预约取号地点：西院区门诊楼一层大厅挂号窗口取号。东院区预约取号地点：东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。</span></p> </div> </div> <!--医院介绍--> <div class="introduction"> <p>北京协和医院是集医疗、教学、科研于一体的大型三级甲等综合医院，是国家卫生计生委指定的全国疑难重症诊治指导中心，也是最早承担干保健和外宾医疗任务的医院之一，以学科齐全、技术力量雄厚、特色专科突出、多学科综合优势强大享誉海内外。在2010、2011、2012、2013、2014年复旦大学医院管理研究所公布的“中国最佳医院排行榜”中连续五年排名榜首。</p> <p>医院建成于1921年，由洛克菲勒基金会创办。建院之初，就志在“建成亚洲最好的医学中心”。90余年来，医院形成了“严谨、求精、勤奋、奉献”的协和精神和兼容并蓄的特色文化风格，创立了“三基”、“三严”的现代医学教育理念，形成了以“教授、病案、图书馆”著称的协和“三宝”，培养造就了张孝骞、林巧稚等一代医学大师和多位中国现代医学的领军人物，并向全国输送了大批的医学管理人才，创建了当今知名的10余家大型综合及专科医院。2011年在总结90年发展经验的基础上，创新性提出了“待病人如亲人，提高病人满意度；待同事如家人，提高员工幸福感”新办院理念。</p> <p>目前，医院共有2个院区，总建筑面积53万平方米。在职职工4000余名、两院院士5人、临床和医技科室53个、国家级重点学科20个、国家临床重点专科29个、博士点16个、硕士点29个、国家级继续医学教育基地6个、二级学科住院医师培养基地18个、三级学科专科医师培养基地15个。开放住院床位2000余张，单日最高门诊量约1.5万人次，年出院病人约8万余人次。被评为“全国文明单位”、“全国创先争优先进基层党组织”、“全国卫生系统先进集体”、“首都卫生系统文明单位”、“最受欢迎三甲医院”，荣获全国五一劳动奖章。同时，医院还承担着支援老少边穷地区、国家重要活动和突发事件主力医疗队的重任，在2008年北京奥运工作中荣获“特别贡献奖”。</p> <p>90多年来，协和人以执着的医志、高尚的医德、精湛的医术和严谨的学风书写了辉煌的历史，今天的协和人正为打造“国际知名、国内一流”医院的目标而继续努力。</p> </div> <!--预约通知--> <div class="notice"> <h1>北京协和医院预约挂号须知</h1> <p><span>电话预约挂号：010-114（24小时）</span></p> <p><span>网络预约挂号：http://www.bjguahao.gov.cn</span><br/> 根据卫生部8月5日通知和卫生局8月20日工作部署民万科协和医院已完成电话、网络预约挂号的流程建设，现将预约挂号、取号有关事项公布如下，请您认真阅读预约须知：</p> <p> <span>一、预约时间范围：</span><br/> 1.您可预约7天内（试点）日间的副教授、主治医师和住院医师等号源。节假日不安排预约号（含周六、周日）。<br/> 2.每天早8:30分开始放号，下午14:00停滞次日预约挂号。<br/> 3.周五14:00停挂至下周一。 </p> <p> <span>二、预约实名制：</span><br/> 统一平台电话预约和网上预约挂号均采取实名制注册预约，请您如实提供就诊人员的真实姓名、有效证件号（身份证、军官证、护照）、性别、电话、手机号码、病案号或协和就诊卡条形码上的ID号等有效基本信息。 </p> <p> <span>三、预约取号：</span><br/> 1.预约成功后，请患者于就诊当日携带有效证件、预约识别码及协和医院就诊卡到医院挂号窗口验证预约信息（核对与预约登记实名信息一致的本人有效证件和预约识别码）和取号，如验证不符则医院不能提供相应的诊疗服务。如果没有协和医院就诊卡者，请先办好就诊卡后再取号。<br/> 2.取号时间：上午就诊患者，就诊当日早9:00以前取号。下午就诊患者，就诊当日下午12:00-13:00之前取号，过时未取号者，预约作废。<br/> 3.取号地点：西院区预约取号地点：西院区门诊楼一层大厅挂号窗口取号。东院区取号地点：东院区老门诊楼一层大厅挂号窗口或新门诊各楼层挂号/收费窗口取号。 </p> <p> <span>四、医生停诊：</span><br/> 如遇特殊情况医生要停诊，给您造成的不便请谅解。医生临时停诊，工作人员将会用电话方式及时通知您，请配合更改就诊日期或更换其他医生，请您保持电话畅通。 </p> <p> <span>五、取消预约：</span><br/> 挂出的预约号如办理退号，至少在就诊前一工作日14:00前通过网站或者114电话凭预约识别码进行取消。 </p> <p> <span>六、爽约处理：</span><br/> 1.如预约成功后患者未能按时就诊且不办理取消预约号视为爽约。<br/> 2.一年内（自然年）无故爽约累计达到3次的爽约用户将自动进入系统爽约名单，此后3个月内将取消其预约挂号资格；一年内（自然年）累计爽约6次，取消6个月的预约挂号资格。 </p> <p> <span>七、其他注意事项：</span><br/> 1.协和东院、西院都可以预约。<br/> 2.国际医疗部门诊、卫干门诊不对外预约。 </p> </div> <!--停诊信息--> <div class="stop_info"> <h1>停诊信息</h1> <table> <thead> <tr> <td>日期</td> <td>星期</td> <td>时段</td> <td>科室</td> <td>特长</td> <td>职称</td> <td>挂号费</td> <td>可挂号数</td> <td>剩余号数</td> <td>替换方式</td> </tr> </thead> <tbody> <tr> <td>2017-01-09</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td></td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-13</td> <td>5</td> <td>上午</td> <td>眼科门诊</td> <td></td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-10</td> <td>2</td> <td>上午</td> <td>变态反应科门诊</td> <td></td> <td>正教授</td> <td>9.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-11</td> <td>3</td> <td>下午</td> <td>骨科门诊</td> <td></td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>下午</td> <td>特需眼科门诊</td> <td></td> <td>专家（特需300）</td> <td>300.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-11</td> <td>3</td> <td>上午</td> <td>特需中医科门诊2</td> <td></td> <td>副教授（特需200）</td> <td>200.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-11</td> <td>3</td> <td>下午</td> <td>中医科门诊</td> <td></td> <td>副教授</td> <td>7.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>下午</td> <td>特需血管外科门诊（西院）</td> <td></td> <td>专家（特需300）</td> <td>300.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>上午</td> <td>泌尿外科膀胱癌专科门诊</td> <td></td> <td>副教授</td> <td>7.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>下午</td> <td>特需血液内科门诊</td> <td></td> <td>正教授（特需300）</td> <td>300.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>下午</td> <td>特需耳鼻喉科门诊</td> <td></td> <td>专家（特需300）</td> <td>300.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-11</td> <td>3</td> <td>下午</td> <td>特需中医科门诊1</td> <td></td> <td>专家（特需300）</td> <td>300.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>上午</td> <td>特需神经科门诊2</td> <td></td> <td>副教授（特需200）</td> <td>200.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-11</td> <td>3</td> <td>下午</td> <td>特需耳鼻喉科门诊</td> <td></td> <td>专家（特需300）</td> <td>300.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-09</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td></td> <td>专家</td> <td>14.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>上午</td> <td>普通内科门诊</td> <td></td> <td>副教授</td> <td>7.00</td> <td>5</td> <td>5</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>下午</td> <td>普通内科门诊</td> <td></td> <td>副教授</td> <td>7.00</td> <td>5</td> <td>4</td> <td>不可替换</td> </tr> <tr> <td>2017-01-11</td> <td>3</td> <td>下午</td> <td>特需骨科门诊</td> <td></td> <td>副教授（特需200）</td> <td>200.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-11</td> <td>3</td> <td>下午</td> <td>整形美容外科门诊（西院）</td> <td></td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-10</td> <td>2</td> <td>下午</td> <td>变态反应科门诊</td> <td></td> <td>副教授</td> <td>7.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> </tbody> </table> </div> <!--查询取消--> <div class="query_cancel"> <div class="query_verify"> <label for="subscribe">预约识别码：</label> <input type="text" id="subscribe"> <button>查询订单</button> </div> </div> <!--第二页的排班表--> <div class="arrangement"> <!--头部标题--> <p>科室排班表 <span class="arrangement_back">返回科室列表</span></p> <!--排班表--> <div class="arrangement_main wrap"> <!--左侧侧边栏--> <div class="arrangement_aside_left"> <div class="icon_left"></div> <div>上午</div> <div>下午</div> <div>晚上</div> </div> <!--中间排班表--> <div class="arrangement_content"> <div class="date_scroll"> <!--第一周--> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <!--第二周--> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <!--第三周--> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <!--第四周--> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <!--第五周--> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <!--第六周--> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <!--第七周--> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> <div class="date"> <div class="date_info"> 星期<span class="week"></span><br/> <span class="days"></span> </div> <div></div> <div>约满</div> <div></div> </div> </div> </div> <!--右侧侧边栏--> <div class="arrangement_aside_right"> <div class="icon_right"></div> <div></div> <div></div> <div></div> </div> <!--最右侧预约规则说明--> <div class="arrangement_info"> <h1>预约规则</h1> <p>预约周期：<br/> <span>7天</span> </p> <p>放号时间：<br/> <span>8:30</span> </p> <p>停挂时间：<br/> <span>下午14:00停止次日预约挂号（周五14:00后停挂至下周一）</span> </p> <p>退号时间：<br/> <span>就诊前一工作日14:00前取消</span> </p> <p>特殊规则：<br/> <span>①取号地点不同：西院区预约取号地点：西院区门诊楼一层大厅挂号窗口取号。东院区预约取号地点：东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号</span> </p> </div> </div> <!--底部提示信息--> <div class="arrangement_bottom"> <span></span>您还没有选择就诊日期 </div> </div> </section> <!--页脚信息--> <footer> Copyright © 2019慕课网版权所有 </footer> <script src="js/jQuery 3-4-1.js"></script> <script src="js/qtfy720.js"></script> </body> </html>
19
收起
正在回答
4回答
你好，
每次点击是通过获取left值而进行移动的，所以快速移动的时候可能这一页显示不完整的时候，left值获取了，从而移动的位置不对。可以修改成判断当前页的情况，用一个索引，参考：
初始idx为0，也就是在第一页。然后点击的时候用idx去计算移动的距离，再判断idx处在第几页。
自己测试下，祝学习愉快！
好帮手慕星星
2019-08-31 18:19:02
同学你好，
测试了你的代码，排班表跳转正常，很棒！
但是数据目前是固定写死在页面中的，而我们要求表格中的数据就是动态获取的，需要通过js仿数据库，生成少量的数据显示。可以参考下面的思路：
（1）把week星期定义成数组，里面每一天都是数组的一项。
（2）定义总页数为7页，当前页为0 ，定义总天数为总页数*7，获取当时时间new Date(),获取当前总毫秒数date.getTime()。
（3）进行for循环，计算每一天的毫秒数，把这个毫秒数放进date里面，获取每一天的日期，再分别获取每一天的年，日期，月，小时，日。定义一个数组，把填充盒子的代码和获取的每一项日期内容拼接起来（可以使用div标签），最后追加到date_scroll盒子里面。
（4）对新添加的内容设置样式
（5）给左右按钮添加点击事件，改变定位的left值即可。left值计算可以用（页数-1）*arrangement_content盒子的宽度，最后边界可以判断页数。
希望能帮助到你，欢迎采纳。
祝学习愉快！
且听风吟720
2019-08-31 14:26:09
detail的css
/*清除默认样式*/
*{margin:0;padding:0;}
/*页首*/
/*左侧电话号码*/
.header_left{
float:left;
}
span.phonenumber::before{
content:"";
display:inline-block;
width:17px;height:17px;
margin-right:5px;
background:url(../img/icon-call.png);
}
span.phonenumber{
color:#868686;
line-height:30px;
font-size:12px;
}
/*右侧登陆以及帮助*/
.header_right{
float:right;
text-align:right;
color:#868686;
font-size:12px;
line-height:30px;
}
.header_right span{
color:#2da5e1;
cursor:pointer;
}
/*头部logo*/
.logo{height:92px;}
/*搜索框*/
.search{
width:326px;height:38px;
background:#fec009;
position:absolute;top:29px;right:0;
border-radius:5px/5px;
}
.search_type{
display:inline-block;
margin-left:14px;
color:white;
font-size:16px;
line-height:38px;
}
.select_icon{
display:inline-block;
width:16px;height:16px;
background:url(../img/ui-search.jpg) -46px -11px;
cursor:pointer;
}
.search input{
width:215px;height:32px;
border:none;outline:none;
}
.search_go{
float:right;
display:block;
width:32px;height:32px;
margin-right:5px;margin-top:3px;
background:url(../img/ui-search.jpg) -288px -3px;
cursor:pointer;
}
/*搜索框的下拉菜单*/
.select_items{
width:70px;height:90px;
position:absolute;top:40px;left:0;
box-shadow:2px 2px 2px 0 #ccc;
display:none;
}
.select_items li{
list-style-type:none;
width:70px;height:30px;
line-height:30px;
background:white;
text-align:center;
}
/*放到下拉菜单时的样式*/
.select_items li:hover{
background:#ebeef5;
cursor:pointer;
}
/*顶部导航*/
.head_nav ul li{
list-style-type:none;
float:left;
color:white;
line-height:36px;
margin-right:20px;
font-size:18px;
}
.head_nav ul li:hover{
color:#d7f3ff;
cursor:pointer;
}
.head_nav ul li.famous_hospital{
position:absolute;
right:0;
margin-right:0;
}
/*医院信息、地图等*/
/*医院信息的标题*/
.info_title{
width:950px;height:52px;
margin-left:25px;
border-bottom:1px solid #dcdddd;
line-height:52px;
}
a.hospital_name{
font-size:18px;
}
a.hospital_attention{
font-size:12px;
color:#f29600;
}
a.hospital_detail{
float:right;
font-size:12px;
}
a.hospital_detail span{
color:#0000ff;
}
/*医院地图、地址*/
.info_content{
width:950px;
margin:12px 25px 0 25px;
overflow:hidden;
}
/*医院图片*/
.hospital_pic{
width:200px;height:150px;
float:left;
}
/*默认第一张图片显示，其他的隐藏*/
.hospital_pic img{
display:none;
}
.hospital_pic img:first-of-type{
display:block;
}
/*医院地址等详细信息*/
/*这里的文字和图标的位置需要调整*/
.hospital_place{
width:450px;margin-left:30px;
float:left;
font-size:12px;line-height:2em;
color:#888888;
}
/*医院地址中的四个小图标，分别设置小图标的内容*/
.hospital_place1::before{
content:"";
display:inline-block;
width:16px;height:16px;
margin-right:5px;margin-top:4px;
background:url(../img/icon-web.png) 0 0;
}
.hospital_place2::before{
content:"";
display:inline-block;
width:16px;height:16px;
margin-right:5px;margin-top:4px;
background:url(../img/icon-web.png) 0 -22px;
}
.hospital_place3::before{
content:"";
display:inline-block;
width:16px;height:16px;
margin-right:5px;margin-top:4px;
background:url(../img/icon-web.png) 0 -43px;
}
.hospital_place4::before{
content:"";
display:inline-block;
width:16px;height:16px;
margin-right:5px;margin-top:4px;
background:url(../img/icon-web.png) 0 -65px;
}
/*医院地图位置*/
.hospital_map{
width:250px;height:165px;
background:url(../img/map-1.png) no-repeat;
float:right;
}
/*挂号导航*/
nav.order_nav .wrap{
border-bottom:2px solid #60bff2;
}
nav.order_nav ul li{
list-style-type:none;
display:inline-block;
width:110px;height:30px;
color:#2da5e1;
line-height:30px;text-align:center;
cursor:pointer;
}
/*选中的样式*/
nav.order_nav ul li.current{
background:#2da5e1;
color:white;
}
/*内容区（会实时变化）*/
/*1.预约挂号*/
.appointment{
width:1000px;height:408px;
position:relative;
display:block;/*默认出现，调试设置时默认不出现*/
}
/*预约挂号左侧表格（开放预约科室）*/
table.open_apartments{
width:706px;height:406px;
border:1px solid #f4f6fa;
border-spacing:0;
}
/*单元格通用的样式*/
table.open_apartments tr td{
padding:5px 0 5px 20px;
}
/*科室的总标题*/
table.open_apartments thead tr td{
background:#f4f6fa;
border:transparent;
width:144px;height:42px;
text-align:center;line-height:42px;
font-size:16px;
padding:0;
}
/*各个科室的标题*/
table.open_apartments tr td.apartment_name{
width:144px;
background:#f2fbff;
text-align:center;vertical-align:top;
color:#888888;
padding-left:0;
}
/*所有科室（后期可以点击进入排班表）*/
table.open_apartments tr td.apartments:hover{
cursor:pointer;
color:#666;
}
/*表格的内部边框线*/
table.open_apartments tr:nth-of-type(3n+1) td{
border-top:1px solid #f4f6fa;
}
/*右侧信息*/
.appointment_rule{
position:absolute;top:0;right:0;
margin-left:18px;
width:272px;height:282px;
border:1px solid #f4f6fa;
overflow:scroll;
}
/*信息标题*/
.appointment_rule h1{
line-height:40px;
background:#f4f6fa;
padding-left:10px;
font-size:14px;
font-weight:normal;
}
.appointment_rule h1 span{
color:#00b3ea;
font-size:12px;
}
/*下方文字样式*/
.appointment_rule p{
font-size:12px;
margin-left:10px;
margin-top:10px;
}
.appointment_rule p span{
display:inline-block;
font-size:10px;
color:#888888;
line-height:2em;
}
/*2.医院介绍*/
.introduction{
width:1000px;
display:none;/*默认不出现*/
}
.introduction p{
margin-top:20px;
line-height:2em;
text-indent:2em;
}
/*3.挂号须知*/
.notice{
width:1000px;
display:none;/*默认不出现*/
}
.notice h1{
text-align:center;
}
.notice p{
margin-top:15px;
line-height:2em;
}
.notice p span{
font-weight:bolder;
}
/*4.停诊信息*/
.stop_info{
width:1000px;
display:none;/*默认不出现*/
}
.stop_info h1{
text-align:center;
}
.stop_info table{
width:1000px;
margin-top:20px;
text-align:center;
border-spacing:0;
border:1px solid #cccccc;
}
.stop_info table tr td{
border:1px solid #cccccc;
padding:5px;
}
/*5.查询取消*/
.query_cancel{
width:1000px;height:200px;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
display:none;/*默认不出现*/
position:relative;
}
.query_verify{
width:370px;height:30px;
position:absolute;top:50%;left:50%;
margin-left:-185px;margin-top:-15px;
}
.query_verify button{
width:100px;height:24px;
border:none;outline:none;
background:#2da5e1;
color:white;
line-height:24px;
font-size:16px;
}
/*6.科室安排表*/
/*顶部标题文字*/
.arrangement{
display:none;/*默认不出现*/
}
.arrangement p{
font-size:16px;
margin-left:10px;margin-bottom:18px;
}
.arrangement p span{
font-size:12px;
color:#00b3ec;
cursor:pointer;
}
/*主体框架*/
.arrangement_main{
border:1px solid #dcdddd;
margin-bottom:110px;
overflow:hidden;
}
/*左右两侧*/
.arrangement_aside_left,.arrangement_aside_right{
width:35px;height:323px;
float:left;
}
/*左右两侧内部*/
.arrangement_aside_left>div:not(.icon_left),.arrangement_aside_right>div:not(.icon_right){
height:92px;
background:#f2f8ff;
line-height:92px;
text-align:center;
}
/*两个点击的图标*/
.icon_left{
height:44px;
background:url(../img/icon-left.jpg);
}
.icon_right{
height:44px;
background:url(../img/icon-right.jpg);
}
.icon_left:hover,.icon_right:hover{
cursor:pointer;
}
/*内部核心区*/
.arrangement_content{
width:657px;/*计算得出*/height:325px;
border-left:1px solid #dcdddd;
border-right:1px solid #dcdddd;
float:left;
overflow:hidden;
position:relative;
}
/*为了可以后期滚动，设置一个大框*/
.date_scroll{
width:4650px;/*计算得出*/height:325px;
position:absolute;top:0;left:0;
}
/*内部每一天的样式*/
.arrangement_content .date{
float:left;
}
/*每一个元素右侧加1px的边框*/
.arrangement_content .date{
border-right:1px solid #dcdddd;
}
/*其他行通用样式*/
.arrangement_content .date>div:not(.date_info){
width:93px;height:92px;
border-top:1px solid #dcdddd;
}
/*第一行预留的时间区域*/
.arrangement_content .date>div.date_info{
width:93px;height:44px;
background:#f8fafc;
font-size:12px;
color:#888888;
line-height:22px;
text-align:center;
}
/*第三行的“约满”*/
.arrangement_content .date>div:nth-of-type(3){
background:#e0eefd;
color:#4ab4ed;
line-height:92px;text-align:center;
font-size:12px;
}
/*侧边的预约说明*/
.arrangement_info{
width:268px;height:323px;
overflow:scroll;
border-left:1px solid #dcdddd;
border-right:1px solid #dcdddd;
}
/*顶部标题*/
.arrangement_info h1{
margin-top:22px;
margin-left:10px;
font-size:16px;
font-weight:normal;
}
/*信息文字*/
.arrangement_info p{
margin-top:14px;
margin-left:10px;
font-size:12px;
}
.arrangement_info p span{
color:#888888;
line-height:2em;
}
/*底部*/
.arrangement_bottom{
width:998px;height:64px;
border:1px solid #dcdddd;
font-size:16px;
color:#9f9f9f;
line-height:64px;text-align:center;
}
.arrangement_bottom span{
display:inline-block;
width:20px;height:20px;
margin-right:10px;
background:url(../img/icon-info.jpg);
}
且听风吟720
2019-08-31 14:25:36
fragment的css
/*清除全局默认样式*/
*{margin:0;padding:0;}
/*框定区域用的div*/
div.wrap{
width:1000px;
margin:0 auto;
position:relative;
}
/*页首*/
header{
width:100%;height:30px;
background:#f5f5f5;
overflow:hidden;
}
/*头部logo、搜索框*/
section.head{
height:92px;
background:white;
}
/*页首的导航（首页等）*/
nav.head_nav{
width:100%;height:36px;
background:#60bff2;
}
nav.head_nav>.wrap{
position:relative;
}
/*医院介绍、地图等*/
section.info{
width:1000px;height:260px;
background:#f7f7f7;
margin:30px auto 40px;
}
/*挂号导航*/
nav.order_nav{
width:100%;height:30px;
}
/*挂号下显示的主体内容（预约情况等，会变化）*/
section.order{
width:1000px;
margin:20px auto 80px;
overflow:hidden;
}
/*页脚*/
footer{
width:100%;height:70px;
background:#eceef2;
color:#acacac;
font-size:12px;line-height:70px;
text-align:center;
}jQuery部分
$("document").ready(function(){
//搜索框
//1.点击时显示
$(".select_icon").click(function(){
$(".select_items").css({"display":"block"})
return false;//防止事件冒泡
})
//2.点击具体内容时，变更上方部分的内容
$(".select_items li").click(function(){
$(".search_type").text($(this).text())
$(".select_items").css({"display":"none"})
})
//3.点击body（页面其他部分）时，隐藏选项框
$("body").click(function(){
$(".select_items").css({"display":"none"})
})
//预约挂号
//1.点击某选项时，其样式改变（修改class）
//2.利用选项的index来修改下方显示的div区域
$(".order_nav li").click(function(){
$(this).attr({"class":"current"}).siblings().attr({"class":""})
$(".order>div").eq($(this).index()).css({"display":"block"}).siblings().css({"display":"none"})
})
//科室排班查询
//1.点击某一科室时，跳转到查询科室排班界面
$(".apartments").click(function(){
$(".arrangement").css({"display":"block"}).siblings().css({"display":"none"})
})
//2.点击返回科室列表，返回科室列表界面
$(".arrangement_back").click(function(){
$(".appointment").css({"display":"block"}).siblings().css({"display":"none"})
})
//排班表
//1.点击左右按钮，切换日期
$(".icon_left").click(function(){
var left = $(".date_scroll").position().left;
if(Math.round(left) == 0){
return;
}
else if(Math.round(left) > 0){//修复滚动过度的问题
$(".date_scroll").stop().animate({"left":0},200)
}
else{
$(".date_scroll").stop().animate({"left":left+658},800)
}
})
$(".icon_right").click(function(){
var left = $(".date_scroll").position().left;
if(Math.round(left) == -3948){
return;
}
else if(Math.round(left) < -3948){//修复滚动过度的问题
$(".date_scroll").stop().animate({"left":-3948},200)
}
else{
$(".date_scroll").stop().animate({"left":left-658},800)
}
})
//2.滚动过度问题修复：在鼠标移动的时候修复位置
$("body").mousemove(function(){
var left = $(".date_scroll").position().left;
if(Math.round(left) < -3948){
$(".date_scroll").stop().animate({"left":-3948},500)
}
else if(Math.round(left) > 0){
$(".date_scroll").stop().animate({"left":0},500)
}
else{
return;//其他正常情况不予处理
}
})
//日期的添加
//创建一个星期的数组，用来把星期的数字转换成汉字
var weeks = ["日","一","二","三","四","五","六"];
//获取日期，通过修改毫秒数来得到往后的48天的日期以及星期
var newdate = new Date().getTime(),//得到当前日期毫秒数
days_len = $(".days").length;//得到days的数量
for(var i=0;i<days_len;i++){
var currentDate = new Date(newdate+86400000*i);//通过毫秒数来得知当天日期
//得到所需日期的年月日、星期，把年月日拼成字符串
var year = currentDate.getFullYear(),
month = currentDate.getMonth()+1,
date = currentDate.getDate(),
week = currentDate.getDay();
var datestr = year + "-" + month + "-" + date;
//给每一个指定对象添加日期和星期
$(".days").eq(i).text(datestr)
$(".week").eq(i).text(weeks[week])
}
//轮播效果
//设置初始的位置，获取图片数量
var index = 0,
pic_len = $(".hospital_pic img").length;
setInterval(function(){
index++;
if(index == pic_len){
index = 0;
}
$(".hospital_pic img").eq(index).css({"display":"block"}).siblings().css({"display":"none"})
},2000)
})
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星