html+css+js:制作米游社·原神wiki专栏日历点击事件

效果图：

html部分：

 <div class="calender-wrap"><div class="calender"><div class="icon-title"><h3><img src="./img/日历.png" alt=""><span>日历</span></h3><div class="more-right"><a href=""><span>更多内容</span></a></div></div><div class="calender-content"><div class="calender-top"><div class="calender-top-today"><img src="./img/calender-icon.png" alt="">2022年7月29日 星期五</div><div class="cal"><ul class="calender-time"><li class="month">8月</li><li><div class="day">一</div><div class="date">1</div></li><li><div class="day">二</div><div class="date">2</div></li><li><div class="day">三</div><div class="date">3</div></li><li><div class="day">四</div><div class="date">4</div></li><li><div class="day">五</div><div class="date">5</div></li><li><div class="day">六</div><div class="date">6</div></li><li><div class="day">日</div><div class="date">7</div></li></ul></div></div><div class="calender-bottom"><ul><li><div class="cal-left">天赋培养</div><div class="cal-right"><div class="cal-prev" onclick="prev1()"></div><div class="cal-ID-Photo-wrap"><ol class="cal-ID-Photo" id="cal-ID-Photo1"><li><a href="#"><img src="./img/神子证件照.jpg" alt=""><div class="name">八重神子</div></a></li><li><a href="#"><img src="./img/啊影证件照.png" alt=""><div class="name">啊影</div></a></li><li><a href=""><img src="./img/钟离证件照.png" alt=""><div class="name">钟离</div></a></li><li><a href="#"><img src="./img/巴巴托斯证件照.png" alt=""><div class="name">巴巴托斯</div></a></li><li><a href="#"><img src="./img/阿贝多证件照.png" alt=""><div class="name">阿贝多</div></a></li><li><a href="#"><img src="./img/五郎证件照.png" alt=""><div class="name">五郎</div></a></li><li><a href="#"><img src="./img/早柚证件照.png" alt=""><div class="name">早柚</div></a></li><li><a href="#"><img src="./img/行秋证件照.png" alt=""><div class="name">二小姐</div></a></li><li><a href="#"><img src="./img/皇女证件照.png" alt=""><div class="name">皇女</div></a></li><li><a href="#"><img src="./img/烟绯证件照.png" alt=""><div class="name">烟绯</div></a></li><li><a href="#"><img src="./img/班尼特证件照.png" alt=""><div class="name">班尼特</div></a></li><li><a href="#"><img src="./img/辛焱证件照.png" alt=""><div class="name">辛焱</div></a></li><li><a href=""><img src="./img/云堇证件照.png" alt=""><div class="name">云堇</div></a></li></ol></div><div class="cal-next" onclick="next1()"></div></div></li><li><div class="cal-left">武器突破</div><div class="cal-right"><div class="cal-prev" onclick="prev2()"></div><div class="cal-ID-Photo-wrap"><ol class="cal-ID-Photo" id="cal-ID-Photo2"><li><a href="#"><img src="./img/神乐之真意.png" alt=""><div class="name">神乐之真意</div></a></li><li><a href="#"><img src="./img/阿莫斯.png" alt=""><div class="name">阿莫斯之弓</div></a></li><li><a href=""><img src="./img/苍古自由之誓.png" alt=""><div class="name">苍古自由之誓</div></a></li><li><a href="#"><img src="./img/薙草之稻光.png" alt=""><div class="name">薙草之稻光</div></a></li><li><a href="#"><img src="./img/护摩之杖.png" alt=""><div class="name">护摩之杖</div></a></li><li><a href="#"><img src="./img/冬极白星.png" alt=""><div class="name">冬极白星</div></a></li><li><a href="#"><img src="./img/尘世之锁.png" alt=""><div class="name">尘世之锁</div></a></li><li><a href="#"><img src="./img/天空之脊.png" alt=""><div class="name">天空之脊</div></a></li><li><a href="#"><img src="./img/狼的末路.png" alt=""><div class="name">狼的末路</div></a></li><li><a href="#"><img src="./img/若水.png" alt=""><div class="name">若水</div></a></li><li><a href="#"><img src="./img/雾切之回光.png" alt=""><div class="name">雾切之回光</div></a></li><li><a href="#"><img src="./img/不灭月华.png" alt=""><div class="name">不灭月华</div></a></li><li><a href="#"><img src="./img/松籁响起之时.png" alt=""><div class="name">松籁响起之时</div></a></li><li><a href="#"><img src="./img/和璞鸢.png" alt=""><div class="name">和璞鸢</div></a></li></ol></div><div class="cal-next" onclick="next2()"></div></div></li><li style="height: auto;"><div class="cal-left">限时活动</div><ol class="activity"><li><a href=""><img src="./img/远海诗夏游记.png" alt=""><div class="introduce"><div class="title">「远海诗夏游纪」活动</div><div class="time">2022.07.15 10:00 - 2022.08.23 23:59</div></div></a></li><li><a href=""><img src="./img/幻影留声.png" alt=""><div class="introduce"><div class="title">「幻声留形」活动</div><div class="time">2022.07.15 10:00 - 2022.08.23 23:59</div></div></a></li><li><a href=""><img src="./img/残像暗战.png" alt=""><div class="introduce"><div class="title">「残像暗战」活动</div><div class="time">2022.07.15 10:00 - 2022.08.23 23:59</div></div></a></li></ol></li></ul></div></div></div></div>

css部分：

.calender-top-today {padding: 0 12px 0 10px;height: 40px;line-height: 40px;background: #fbfbfb;border-radius: 3px;border: 1px solid #f4f4f4;font-size: 14px;box-sizing: border-box;
}
.calender-top-today img {width: 24px;height: 24px;vertical-align: middle;margin-top: -4px;
}
.calender-top .cal {margin-top: 10px;
}
.calender-time {display: flex;justify-content: space-between;height: 60px;
}
.month {background: url(../img/month背景图.png) center/cover no-repeat;font-size: 24px;font-weight: bold;color: #b59b90;width: 101px;text-align: center;line-height: 60px;cursor: pointer;
}
.calender-time li {margin-right: 5px;
}/* 选中后面所有兄弟 */
.month ~ li {background: #f4f4f4;height: 60px;width: 0px;flex-grow: 1;text-align: center;cursor: pointer;
}
.calender-time li:nth-of-type(6){background: url(../img/day背景图.png) center/contain no-repeat;
}
.calender-time .day {margin-top: 8px;font-size: 12px;color: #a9a9a9;line-height: 16px;
}
.calender-time .date {font-weight: bold;margin-top: 6px;line-height: 22px;color: #a9a9a9;font-size: 17px;
}
.calender-bottom > ul > li {margin: 5px -5px 0 0;height: 125px;display: flex;
}
.calender-bottom .cal-left {font-size: 14px;color: #333;border: 1px solid #f4f4f4;background: #fbfbfb;width: 100px;border-radius: 3px;margin-right: 5px;flex-shrink: 0;display: flex;align-items: center;justify-content: center;
}
.cal-right {display: flex;align-items: center;
}
.cal-prev,
.cal-next {margin: 0 5px 0 1px;width: 28px;height: 28px;background-size: cover;background-position: center center;background-repeat: no-repeat;flex-shrink: 0;cursor: pointer;
}
.cal-prev {background-image: url(../img/cal-toleft.png);
}
.cal-next {background-image: url(../img/cal-toright.png);
}
/* 日历证件照部分 */
.cal-ID-Photo-wrap{overflow: hidden;
}
.cal-ID-Photo {align-items: center;display: flex;flex-grow: 0;width: 607px;position: relative;transition: all .5s;
}
.cal-ID-Photo > li {margin-left: 10px;width: 60px;
}
.cal-ID-Photo > li:nth-of-type(1) {margin-left: 0px;
}
.cal-ID-Photo a img {width: 60px;height: 60px;border-radius: 3px;background: #f5f5f5;
}
.cal-ID-Photo a .name {margin-top: 5px;font-size: 12px;color: #333;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;
}
/* 限时活动 */
.activity {display: flex;flex-grow: 1;flex-direction: column;justify-content: flex-end;
}
.activity li > a {height: 60px;display: block;margin: 5px 10px 0 0;padding: 0 10px;display: flex;align-items: center;border-radius: 4px;
}
.activity li:nth-of-type(1) > a {background: rgb(197, 243, 255) none repeat scroll 0% 0%;color: rgb(16, 63, 86);margin-top: 0;
}.activity li:nth-of-type(2) > a {background: rgb(214, 175, 237) none repeat scroll 0% 0%;color: rgb(43, 7, 75);
}
.activity li:nth-of-type(3) > a {float: right;background: #fbd2d2;color: #880c0c;width: 70%;
}
.activity a img {height: 40px;margin-right: 9px;
}
.activity .introduce .title {font-size: 14px;font-weight: bold;line-height: 14px;
}
.activity .introduce .time {font-size: 12px;line-height: 14px;margin-top: 8px;

js部分：

function prev1() {var Photo = document.getElementById("cal-ID-Photo1");Photo.style.right = "0px";
}function next1() {let Photo = document.getElementById("cal-ID-Photo1");Photo.style.right = "295px";
}function prev2() {var Photo = document.getElementById("cal-ID-Photo2");Photo.style.right = "0px";
}function next2() {let Photo = document.getElementById("cal-ID-Photo2");Photo.style.right = "365px";
}

代码奉上，感谢大家支持！

html+css+js:制作米游社·原神wiki专栏日历点击事件相关推荐

html+css+js:简单制作米游社原神观测枢·攻略专栏
忙忙碌碌了五六天总算是整出来了这个项目,老规矩先给大家看看我的效果图. 目录效果图: 一.背景的固定二.分页器(小点)形状的改变三.运用js监听滑轮使导航背景色发生改变四.js书写点击回到顶部 ...
原神社区-米游社网站开发--上导航栏
仿照原神社区-米游社做一个网页之前做个优品购的项目,换汤不换药打开页面,猜测上面导航因为是用fix固定做,下面部分,放在版心下做结尾都是这个,那么就可以把头部尾部写在commend公共模块里面. ...
【星穹铁道抢码-首发】并优化原神抢码米游社抢崩坏抢码扫码自动及分析脚本程序
在之前的文章中我有发布关于原神抢码的分析介绍,之前的文章我发现有很多朋友不会分析和使用,无法重现我发布的抢码py文件的功能最近米忽悠最新的星穹铁道上线又有很多朋友让我分析一下星穹铁道,是否能实现和 ...
原神米游社自动签到教程
一.打开视频观看米游社自动签到教程私聊up主,并提供需要签到的原神角色的uid: 二.等待up主的回复 up会给你生成一条初始数据(会给你一条专属的链接http://47.107.61.80/ys ...
c语言lol战绩查询系统,原神：米游社开启战绩查询，玩家：建议开放体力查询，免得登游戏...
电子游戏近几年经历了一番市场下沉,迎来了一波增量市场. 时至2021年,游戏玩家基本已经接近了饱和,即便是曾经视游戏为糟粕的中老年,玩游戏也已经成为了稀松平常之事. 在游戏市场变化的同时,游戏的本质也 ...
原神抢码，米游社抢码-首发
本文章仅供学习使用-侵权请联系删除_2023年3月14日08:17:06 本来在深渊12层打不过的我偶然在刷到了一个dy的直播间,看到主播在抢码上号帮忙打深渊还号称痛苦号打不满不送原石的旗号我就决定扫 ...
#3使用html+css+js制作网页制作登录网页
#3使用html+css+js制作网页制作登录网页本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...
html中各种js效果图,HTML+CSS+JS制作一个漂亮的橙子动态时钟
HTML+CSS+JS制作一个漂亮的橙子动态时钟 1. 效果图: 2. 背景产生: 利用四块与圆同高的矩形转一定的角度将圆切分成八块形成橙子内里,利用径向渐变形成橙皮. background: rad ...
七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追 ...

html+css+js:制作米游社·原神wiki专栏日历点击事件

html+css+js:制作米游社·原神wiki专栏日历点击事件相关推荐

最新文章

热门文章