科室排班动效边框问题~
来源：6-6 作业题
七十七个七
2019-02-26 12:35:46
点击左右切换后因为有2px的边框，加上了一个（-2）后第一页能对齐了，但是点击到第二、第三页还是不能对齐。。。。怎么让切换页面每一页都对齐切边框不会重复？
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>scheduling</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
border: none;
outline: none;
}
/* 科室排班内容样式 */
.scheduling{
width: 100%;
}
.schedulingMin{
width: 1000px;
margin: 40px auto;
}
.schedulingTitle{
width: 991px;
height: 30px;
line-height: 30px;
padding-left: 9px;
}
.schedulingTitle .backTo{
color: #00b3ec;
font-size: 15px;
margin-left: 17px;
}
.schedulingConcent{
width: 998px;
height: 388px;
border: 1px solid #dcdddd;
margin: 11px auto 110px auto;
position: relative;
}
.schedulingConcent .rule{
width: 247px;
height: 279px;
overflow-y: scroll;
overflow-x: hidden;
padding: 22px 10px;
float: right;
border-left: 1px solid #dcdddd;
border-bottom: 1px solid #dcdddd;
}
.ruleText{
height: 24px;
font-size: 18px;
margin-bottom: 4px;
}
.schedulingConcent .rule .ruleList{
width: 178px;
height: 42px;
font-size: 14px;
color: #555555;
line-height: 21px;
margin-top: 5px;
}
.schedulingConcent .rule .ruleTips{
color: #888888;
font-size: 14px;
}
.ruleListOne{
width: 178px;
height: 62px;
line-height: 21px;
font-size: 14px;
color: #555555;
}
.next,
.prev{
width: 36px;
height: 323px;
float: left;
}
.nextBox,
.prevBox{
width: 35px;
height: 44px;
display: block;
text-align: center;
line-height: 50px;
}
.prevArrow{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 9px 12px 9px 0;
border-color: transparent #01b3f1 transparent transparent;
}
.nextTime,
.prevTime{
height: 279px;
background: #f2f8ff;
border-bottom: 1px solid #dcdddd;
}
.prevTimeList{
height: 93px;
line-height: 93px;
text-align: center;
font-size: 14px;
}
.tipsBox{
width: 100%;
height: 64px;
position: absolute;
bottom: 0;
color: #9f9f9f;
}
.tipsPic{
width: 186px;
height: 20px;
text-align: center;
margin: 24px auto 0 auto;
padding-left: 20px;
background: url(../images/icon-info.jpg) no-repeat;
}
.nextArrow{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 9px 0 9px 12px;
border-color: transparent transparent transparent #01b3f1;
}
.scheduleBox{
width: 656px;
height: 323px;
border: 1px solid #dcdddd;
border-top: none;
position: relative;
float: left;
overflow: hidden;
}
.scheduleBoxWrap{
width: 999999px;
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
.scheduleitem{
width: 93px;
height: 323px;
float: left;
border-right: 1px solid #dcdddd;
}
.date{
width: 93px;
height: 44px;
font-size: 12px;
text-align: center;
border-bottom: 1px solid #dcdddd;
line-height: 22px;
background: #f8fafc;
}
.state{
width: 93px;
height: 92px;
border-bottom: 1px solid #dcdddd;
text-align: center;
line-height: 92px;
}
.stateFull{
background: #e0eefd;
color: #4ab4ed;
}
.wrap{
width: 658px;
height: 323px;
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<!-- 科室排班区域 -->
<div class="scheduling">
<div class="schedulingMin">
<div class="schedulingTitle">
科室排班表<a href="details.html" class="backTo">返回科室列表</a>
</div>
<div class="schedulingConcent">
<div class="prev">
<a class="prevBox" href="#"><span class="prevArrow"></span></a>
<div class="prevTime">
<ul>
<li class="prevTimeList">上午</li>
<li class="prevTimeList">下午</li>
<li class="prevTimeList">晚上</li>
</ul>
</div>
</div>
<div class="scheduleBox">
<div class="scheduleBoxWrap">
</div>
</div>
<div class="next">
<a class="nextBox" href="#"><span class="nextArrow"></span></a>
<div class="nextTime"></div>
</div>
<div class="rule">
<div class="ruleText">预约规则</div>
<ul class="ruleList">
<li>预约周期：</li>
<li class="ruleTips">7天</li>
</ul>
<ul class="ruleList">
<li>放号时间：</li>
<li class="ruleTips">8:30</li>
</ul>
<ul class="ruleListOne">
<li>停挂时间：</li>
<li class="ruleTips">下午14:00停止次日预约挂号(周五14:00后停挂至下周一)</li>
</ul>
<ul class="ruleList">
<li>退号时间：</li>
<li class="ruleTips">就诊前一工作日14:00前取消</li>
</ul>
<ul class="ruleList">
<li>特殊规则：</li><br>
<li class="ruleTips">① 取号地点不同：西院区预约号取号地点：西院区门诊楼一层大厅挂号窗口取号。东院区预约号取号地点：东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。</li><br><br><br><br><br>
</ul>
</div>
<div class="tipsBox">
<p class="tipsPic">您还没有选择就诊日期</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
weekDay=7,
index=0,
days=weekDay+21,
date=new Date(),
time=date.getTime();
width=$('.scheduleBox').width();
for(var i=0;i<days;i++){
var newTime=time+i*86400000,
newDay=new Date(newTime),
html=[],
newWeekDay=week[newDay.getDay()],
years=newDay.getFullYear(),
months=newDay.getMonth()+1,
newDays=newDay.getDate();
html.push('<div class="scheduleitem"><div class="date">'+newWeekDay+'<br>'+years+'-'+months+'-'+newDays+'</div>');
html.push('<div class="state"></div>');
html.push('<div class="state stateFull">约满</div>');
html.push('<div class="state"></div></div>');
$('.scheduleBoxWrap').append(html.join(''));
}
$('.prevBox').click(function(){
index--;
if(index<0){
index=0;
}
$('.scheduleBoxWrap').css('left',index*width*-1-2);
})
$('.nextBox').click(function(){
index++;
if(index>3){
index=3;
}
$('.scheduleBoxWrap').css('left',index*width*-1-2);
})
})
</script>
</body>
</html>
1回答
-
同学，你好。这里可以加上（-2*index），就可以解决这个问题了。如图：
祝学习愉快！
0
相似问题