点击时的动画
来源：6-6 作业题
qq_一个人一個人_0
2018-09-01 14:02:24
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>科室挂号</title> <link rel="stylesheet" type="text/css" href="layout.css"> <link rel="stylesheet" type="text/css" href="basement.css"> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> </head> <body> <div class="head"> <div class="top"> <div class="warp"> <span class="pnum"> 010-114/116114电话预约</span> <span class="online">欢迎来到城市挂号统一平台 请 <a href="0">登录</a> <a href="0">注册</a> <a href="0">帮助中心</a></span> </div> </div> <div class="bottom"> <div class="warp"> <img src="img/logo.png" style = "float: left;" class="logo"> <div class="search"><div class="word">医院</div><input type="text" name="123" class="iput" placeholder=" 请输入搜索内容"><a href="" title="000"></a><div class="list"><span>科室</span><span>疾病</span><span>医院</span></div></div> </div> </div> </div> <div class="nav"> <div class="warp"> <a href="" id="n1">首页</a> <a href="">按医院挂号</a> <a href="">按科室挂号</a> <a href="">按疾病挂号</a> <a href="">最新公告</a> <a href="" id="n2">社会知名医院</a> </div> </div> <div class="hosp warp"> <div class="cent"> 北京协和医院 <a href="0" id="gz">关注医院</a><span><a>分类:</a>中国医科院所属医院</span><span><a>区域:</a>东城区</span><span><a>等级:</a>三级甲等</span> <hr/ style = "margin-top: 20px;"> <img src="img/hospital-1.jpg" alt="123" id="pic1"> <div class="picture"> <img src="img/01-web.png" id="pic3"> <img src="img/02-web.png" id="pic4"> <img src="img/03-web.png" id="pic5"> <img src="img/04-web.png" id="pic6"> </div> <div class="hospim"> <p id="p1">[东院]北京市东城区帅府园一号</p> <p id="p2">http://www.punch.cn/</p> <p id="p3">东院咨询台:010-69155564;西院咨询台:010-69158010</p> <p id="p4">东院:106,108,110,111,116,684,685到东单路口北站下车,更多乘车路线详见患者须知</p> </div> <img src="img/map-1.png" id="pic2"> </div> </div> <div class="caption warp"> <p><h2 style="display: inline-block; font-weight: normal;">科室排班表 </h2><a href="index.html" class="back">返回科室列表</a></p> </div> <div class="plantime warp"> <div class="schdule"> <div class="inleft"> <img src="img/icon-scheduling-left.jpg" id="lastw"> <p style="margin-top: -8px;">上午</p> <p>下午</p> <p>晚上</p> </div> <div id="in_schedule" class="in_schedule"> <table> <tr height = 49px;> <td class="timer"></td> <td class="timer"></td> <td class="timer"></td> <td class="timer"></td> <td class="timer"></td> <td class="timer"></td> <td class="timer"></td> </tr> <tr height = 113.5px;> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr height = 113.5px;> <td style="background-color: #e1eefe; color: #48b3f6;">约满</td> <td style="background-color: #e1eefe; color: #48b3f6;">约满</td> <td style="background-color: #e1eefe; color: #48b3f6;">约满</td> <td style="background-color: #e1eefe; color: #48b3f6;">约满</td> <td style="background-color: #e1eefe; color: #48b3f6;">约满</td> <td style="background-color: #e1eefe; color: #48b3f6;">约满</td> <td style="background-color: #e1eefe; color: #48b3f6;">约满</td> </tr> <tr height = 113.5px;> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> <div class="inright"> <img src="img/icon-scheduling-right.jpg" id="nextw"> <p></p> </div> </div> <div class="message1"> <div class="top"> 预约规则<a href="">(更新时间每日8:30更新)</a> </div> <span> 预约周期:<br/><a>7天</a></span> <span> 放号事件:<br/><a>8:30</a></span> <span> 停挂事件:<br/><a>下午14:00停止次日预约挂号<br/> (周五14:00后停挂至下周一)</a></span> <span> 退号时间:<br/><a>就诊前一工作日14:00前取消</a></span> <span> 特殊规则:<br/><a><br/> 解放后一直由我国皮肤性病学<br/> 奠基人之一、著名的皮肤性病<br/> 学家、一级教授李洪迥任科主<br/> 任。经过近一个世纪来几代人<br/> 的不懈努力，皮肤性科学科队<br/> 伍不断壮大,在医疗、教学、科<br/> 研等方面取得了突出的成绩，<br/> 为我国的皮肤病、性病学发展<br/> &做出了突出贡献。</a></span> </div> </div> <div class="datetime warp"> 您还没有选择就诊日期！ </div> <div class="footer"> CopyRight © 2017慕课网版权所有 </div> <script type="text/javascript" src="JS/department.js"></script> </body>
.caption{
margin-top:80px;
}
.caption .back{
font-size: 18px;
color: #60bff2;
text-decoration: none;
}
.schdule{
width: 730px;
height: 390px;
margin-top:30px;
display: inline-block;
position: relative;
border:1px lightgray solid;
}
.schdule .inleft{
position: absolute;
left: 0;
width: 35px;
height: 390px;
}
.schdule .inleft img{
height: 50px;
}
.schdule .inleft img:hover{
cursor: pointer;
}
.schdule .inleft p{
width: 35px;
height: 114.5px;
line-height: 114.5px;
background-color: #f1f9ff;
}
.schdule .inright{
position: absolute;
right: 1px;
width: 34px;
height: 390px;
}
.schdule .inright img{
height: 50px;
}
.schdule .inright img:hover{
cursor: pointer;
}
.schdule .inright p{
width: 36px;
height: 344px;
margin-top: -8px;
background-color: #f1f9ff;
}
.schdule .in_schedule{
position: absolute;
left: 35px;
width: 660px;
text-align: center;
}
.schdule .in_schedule table tr td {
color: gray;
width: 94.3px;
border:1px solid lightgray;
}
.schdule .in_schedule table{
width: 660px;
height:391px;
border: 0;
border-collapse: collapse;
}
.timer{
font-size: 13px;
}
.message1{
width: 266px;
height: 390px;
margin-left: -5px;
border-left: none;
border: 1px lightgray solid;
display: inline-block;
overflow: scroll;
overflow-x: hidden;
}
.message1 .top{
width: 100%;
height: 45px;
line-height: 45px;
background-color: #f7f7f7;
color: #969696;
}
.message1 .top a{
text-decoration: none;
font-size: 12px;
color: #60c1f3;
}
.message1 span{
display: block;
padding: 5px 0 5px 0;
font-size: 13px;
}
.message1 span a{
color: #bababa;
width: 300px;
padding-left: 10px;
}
.datetime{
height: 120px;
width: 997.5px;
margin-top: -3.5px;
border: 1px lightgray solid;
border-top: none;
text-align: center;
line-height: 120px;
font-size: 20px;
color: lightgray;
background: url(img/icon-info.jpg) no-repeat 37.5% center;
}
// 上部橙色搜索框左边点击切换文本内容
$.fn.UiSearch = function(){
var ui = $(this);
$('.word',ui).click(function(event) {
$('.list').show();
return false;
});
$('body').click(function(event) {
$('.list').hide();
});
$('.list span',ui).click(function(event) {
$('.word').text( $(this).text() );
$('.list').hide();
return false;
});
}
$(function(){
$('.search').UiSearch();
})
// 获取当前日期
var dt = new Date();
y = dt.getFullYear();
m = dt.getMonth() + 1;
d = dt.getDate();
week = dt.getDay();
if(week == 1){
week = '星期一';
}else if (week == 2) {
week = '星期二';
}else if (week == 3) {
week = '星期三';
}else if (week == 4) {
week = '星期四';
}else if (week == 5) {
week = '星期五';
}else if (week == 6) {
week = '星期六';
}else{
week = '星期日';
}
// 获取下一天的日期
function getNextDate(dayStr){
var dd = new Date(dayStr);
dd.setDate(dd.getDate()+1);
var y = dd.getFullYear();
var m = dd.getMonth()+1;
var d = dd.getDate();
var w = dd.getDay();
if(w == 1){
w = '星期一';
}else if (w == 2) {
w = '星期二';
}else if (w == 3) {
w = '星期三';
}else if (w == 4) {
w = '星期四';
}else if (w == 5) {
w = '星期五';
}else if (w == 6) {
w = '星期六';
}else{
w = '星期日';
}
return w + '<br/>' + y+ "-" + m + "-" + d;
};
var td = document.getElementsByClassName("timer");
td[0].innerHTML = week + '<br/>' + y + '-' + m + '-' + d;
td[1].innerHTML = getNextDate(td[0].innerHTML);
td[2].innerHTML = getNextDate(td[1].innerHTML);
td[3].innerHTML = getNextDate(td[2].innerHTML);
td[4].innerHTML = getNextDate(td[3].innerHTML);
td[5].innerHTML = getNextDate(td[4].innerHTML);
td[6].innerHTML = getNextDate(td[5].innerHTML);
var lastw = document.getElementById("lastw");
var nextw = document.getElementById("nextw");
// 表格第一行右侧图片点击切换下一周的内容
lastw.addEventListener("click",function(event){
var dt1 = new Date(dt);
dt1.setDate(dt.getDate() - 7);
y1 = dt1.getFullYear();
m1 = dt1.getMonth() + 1;
d1 = dt1.getDate();
week1 = dt1.getDay();
if(week1 == 1){
week1 = '星期一';
}else if (week1 == 2) {
week1 = '星期二';
}else if (week1 == 3) {
week1 = '星期三';
}else if (week1 == 4) {
week1 = '星期四';
}else if (week1 == 5) {
week1 = '星期五';
}else if (week1 == 6) {
week1 = '星期六';
}else{
week1 = '星期日';
}
td[0].innerHTML = week1 + '<br/>' + y1 + '-' + m1 + '-' + d1;
td[1].innerHTML = getNextDate(td[0].innerHTML);
td[2].innerHTML = getNextDate(td[1].innerHTML);
td[3].innerHTML = getNextDate(td[2].innerHTML);
td[4].innerHTML = getNextDate(td[3].innerHTML);
td[5].innerHTML = getNextDate(td[4].innerHTML);
td[6].innerHTML = getNextDate(td[5].innerHTML);
dt = dt1;
});
// 表格第一行左侧图片点击切换上一周内容
nextw.addEventListener("click",function(event){
var dt1 = new Date(dt);
dt1.setDate(dt.getDate() + 7);
y1 = dt1.getFullYear();
m1 = dt1.getMonth() + 1;
d1 = dt1.getDate();
week1 = dt1.getDay();
if(week1 == 1){
week1 = '星期一';
}else if (week1 == 2) {
week1 = '星期二';
}else if (week1 == 3) {
week1 = '星期三';
}else if (week1 == 4) {
week1 = '星期四';
}else if (week1 == 5) {
week1 = '星期五';
}else if (week1 == 6) {
week1 = '星期六';
}else{
week1 = '星期日';
}
td[0].innerHTML = week1 + '<br/>' + y1 + '-' + m1 + '-' + d1;
td[1].innerHTML = getNextDate(td[0].innerHTML);
td[2].innerHTML = getNextDate(td[1].innerHTML);
td[3].innerHTML = getNextDate(td[2].innerHTML);
td[4].innerHTML = getNextDate(td[3].innerHTML);
td[5].innerHTML = getNextDate(td[4].innerHTML);
td[6].innerHTML = getNextDate(td[5].innerHTML);
dt = dt1;
});老师，我这个点击已经可以改变日期了，但是怎么做到滑动的效果呢
写回答
1回答
-
樱桃小胖子
2018-09-02
滑动的效果可以参考轮播图的实现，这个与轮播图的实现思路是一样的，点击向右侧按钮，移动一定的距离，点击向左侧的按钮，移动一定的距离。由于你提交的代码没有图片，测试不完整，建议同学直接提交作业，在作业批复中，老师会给出详细的批复建议和修改思路，祝学习愉快！
0
相似问题
滚动图问题
回答 1
为什么要判断没有点击，翻页操作
回答 1