提交

2 years ago · 6e6f89a0d1
commit 6e6f89a0d1
13 changed files with 540 additions and 0 deletions
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@ -0,0 +1,5 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
--- a/.idea/main.iml
+++ b/.idea/main.iml
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/main.iml" filepath="$PROJECT_DIR$/.idea/main.iml" />
+    </modules>
+  </component>
+</project>
--- a/images/blog.jpg
+++ b/images/blog.jpg
--- a/images/gitea.jpg
+++ b/images/gitea.jpg
--- a/images/linux.jpg
+++ b/images/linux.jpg
--- a/images/nextcloud.jpg
+++ b/images/nextcloud.jpg
--- a/images/oa.jpg
+++ b/images/oa.jpg
--- a/index.html
+++ b/index.html
@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+<meta charset="UTF-8">
+<title>导航</title>
+<meta name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+<link rel='stylesheet' href='swiper.min.css'>
+<link rel="stylesheet" href="style.css">
+  <style type="text/css">
+    a{
+      text-decoration: none; /* 去除默认的下划线 */
+      color: #000;    /* 去除默认的颜色和点击后变化的颜色 */
+    }
+  </style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="background"></div>
+  <div class="item-bg"></div>
+  <div class="news-slider">
+    <div class="news-slider__wrp swiper-wrapper">
+      <div class="news-slider__item swiper-slide"> <a href="https://pan.beyourself.org.cn" class="news__item" target="_blank">
+        <div class="news-date"> <span class="news-date__title">我的网盘</span> <span class="news-date__txt">学习资料</span> </div>
+        <div class="news__title">学习资料下载/上传/分享</div>
+        <p class="news__txt">基于docker环境部署的NextCloud服务，主要用于分享学习资料，需要的可自行注册，部分资料会在账号中共享，欢迎交流沟通</p>
+        <div class="news__img"> <img src="./images/nextcloud.jpg" alt="news"> </div>
+        </a> </div>
+      <div class="news-slider__item swiper-slide"> <a href="https://blog.beyourself.org.cn" class="news__item" target="_blank">
+        <div class="news-date"> <span class="news-date__title">我的博客</span> <span class="news-date__txt">学习文档记录</span> </div>
+        <div class="news__title">工作过程中记录的文档</div>
+        <p class="news__txt">基于LNMP部署的Wordpress记录文章，主要涉及云计算、python运维开发、云原生及各种面试及优化内容</p>
+        <div class="news__img"> <img src="./images/blog.jpg" alt="news"> </div>
+      </a> </div>
+      <div class="news-slider__item swiper-slide"> <a href="https://sign.beyourself.org.cn" class="news__item" target="_blank">
+        <div class="news-date"> <span class="news-date__title">oa系统</span> <span class="news-date__txt">个人开发</span> </div>
+        <div class="news__title">开发与学习</div>
+        <p class="news__txt">基于docker环境部署，自己用django框架开发的一个oa系统，主要用于方便共享工作中的学习资料和文章，以及资料的收集</p>
+        <div class="news__img"> <img src="./images/oa.jpg" alt="news"> </div>
+      </a> </div>
+      <div class="news-slider__item swiper-slide"> <a href="https://gitea.beyourself.org.cn/newrain001" class="news__item" target="_blank">
+        <div class="news-date"> <span class="news-date__title">代码仓库</span> <span class="news-date__txt">个人开发</span> </div>
+        <div class="news__title">开发与学习</div>
+        <p class="news__txt">基于docker环境部署，部署的gitea，用于管理自己平时开发的一些内容，你也可以加入一起学习<br></p>
+        <div class="news__img"> <img src="./images/gitea.jpg" alt="news"> </div>
+      </a> </div>
+      <div class="news-slider__item swiper-slide"> <a href="http://download.beyourself.org.cn" class="news__item" target="_blank">
+        <div class="news-date"> <span class="news-date__title">常用脚本</span> <span class="news-date__txt">个人开发</span> </div>
+        <div class="news__title">基于各种环境初始化脚本</div>
+        <p class="news__txt">平时在工作中经常会使用到的脚本，通过nginx管理可以方便下载及运行 <br><br></p>
+        <div class="news__img"> <img src="./images/linux.jpg" alt="news"> </div>
+      </a> </div>
+    </div>
+    <div class="news-slider__ctr">
+      <div class="news-slider__arrows">
+        <button class="news-slider__arrow news-slider-prev"> <span class="icon-font">
+        <svg class="icon icon-arrow-left">
+          <use xlink:href="#icon-arrow-left"></use>
+        </svg>
+        </span> </button>
+        <button class="news-slider__arrow news-slider-next"> <span class="icon-font">
+        <svg class="icon icon-arrow-right">
+          <use xlink:href="#icon-arrow-right"></use>
+        </svg>
+        </span> </button>
+      </div>
+      <div class="news-slider__pagination"></div>
+    </div>
+  </div>
+</div>
+<svg hidden="hidden">
+  <defs>
+    <symbol id="icon-arrow-left" viewBox="0 0 32 32">
+      <title>arrow-left</title>
+      <path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path>
+    </symbol>
+    <symbol id="icon-arrow-right" viewBox="0 0 32 32">
+      <title>arrow-right</title>
+      <path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path>
+    </symbol>
+  </defs>
+</svg>
+
+<script src='https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js'></script>
+<script src='swiper.min.js'></script>
+<script  src="script.js"></script>
+</body>
+</html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,123 @@
+var bg = document.querySelector('.item-bg');
+var items = document.querySelectorAll('.news__item');
+var item = document.querySelector('.news__item');
+
+function cLog(content) {
+    console.log(content)
+}
+
+if($(window).width() > 800) {
+    $(document).on("mouseover", ".news__item", function (_event, _element) {
+
+        var newsItem = document.querySelectorAll('.news__item');
+        newsItem.forEach(function (element, index) {
+            element.addEventListener('mouseover', function () {
+                var x = this.getBoundingClientRect().left;
+                var y = this.getBoundingClientRect().top;
+                var width = this.getBoundingClientRect().width;
+                var height = this.getBoundingClientRect().height;
+
+                $('.item-bg').addClass('active');
+                $('.news__item').removeClass('active');
+                // $('.news__item').removeClass('active');
+
+
+                bg.style.width = width + 'px';
+                bg.style.height = height + 'px';
+                bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)';
+            });
+
+            element.addEventListener('mouseleave', function () {
+                $('.item-bg').removeClass('active');
+                $('.news__item').removeClass('active');
+            });
+
+        });
+
+    });
+}
+
+
+var swiper = new Swiper('.news-slider', {
+    effect: 'coverflow',
+    grabCursor: true,
+    loop: true,
+    centeredSlides: true,
+    keyboard: true,
+    spaceBetween: 0,
+    slidesPerView: 'auto',
+    speed: 300,
+    coverflowEffect: {
+        rotate: 0,
+        stretch: 0,
+        depth: 0,
+        modifier: 3,
+        slideShadows: false
+    },
+    breakpoints: {
+        480: {
+            spaceBetween: 0,
+            centeredSlides: true
+        }
+    },
+    simulateTouch: true,
+    navigation: {
+        nextEl: '.news-slider-next',
+        prevEl: '.news-slider-prev'
+    },
+    pagination: {
+        el: '.news-slider__pagination',
+        clickable: true
+    },
+    on: {
+        init: function () {
+            var activeItem = document.querySelector('.swiper-slide-active');
+
+            var sliderItem = activeItem.querySelector('.news__item');
+
+            $('.swiper-slide-active .news__item').addClass('active');
+
+            var x = sliderItem.getBoundingClientRect().left;
+            var y = sliderItem.getBoundingClientRect().top;
+            var width = sliderItem.getBoundingClientRect().width;
+            var height = sliderItem.getBoundingClientRect().height;
+
+
+            $('.item-bg').addClass('active');
+
+            bg.style.width = width + 'px';
+            bg.style.height = height + 'px';
+            bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)';
+        }
+    }
+});
+
+swiper.on('touchEnd', function () {
+    $('.news__item').removeClass('active');
+    $('.swiper-slide-active .news__item').addClass('active');
+});
+
+swiper.on('slideChange', function () {
+    $('.news__item').removeClass('active');
+});
+
+swiper.on('slideChangeTransitionEnd', function () {
+    $('.news__item').removeClass('active');
+    var activeItem = document.querySelector('.swiper-slide-active');
+
+    var sliderItem = activeItem.querySelector('.news__item');
+
+    $('.swiper-slide-active .news__item').addClass('active');
+
+    var x = sliderItem.getBoundingClientRect().left;
+    var y = sliderItem.getBoundingClientRect().top;
+    var width = sliderItem.getBoundingClientRect().width;
+    var height = sliderItem.getBoundingClientRect().height;
+
+
+    $('.item-bg').addClass('active');
+
+    bg.style.width = width + 'px';
+    bg.style.height = height + 'px';
+    bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)';
+});
--- a/style.css
+++ b/style.css
@ -0,0 +1,278 @@
+@import url("https://fonts.googleapis.com/css?family=Quicksand:400,500,700&subset=latin-ext");
+html {
+  position: relative;
+  overflow-x: hidden !important;
+}
+
+body {
+  font-family: "Quicksand", sans-serif;
+}
+
+a, a:hover {
+  text-decoration: none;
+}
+
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+}
+
+.background {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.background:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(45deg, rgba(209, 0, 42, 0.6) 0%, #0E5DC4 100%);
+  opacity: 0.9;
+}
+.background img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+  user-select: none;
+}
+
+.item-bg {
+  width: 300px;
+  height: 500px;
+  position: absolute;
+  top: 30px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);
+  opacity: 0;
+  transition: all 0.3s;
+  left: -30px;
+}
+.item-bg.active {
+  left: 0;
+  top: 0;
+  opacity: 1;
+}
+
+.news-slider {
+  z-index: 2;
+  max-width: 1300px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 60px;
+}
+@media screen and (max-width: 1300px) {
+  .news-slider {
+    max-width: 1000px;
+  }
+}
+@media screen and (max-width: 576px) {
+  .news-slider {
+    margin-top: 45px;
+  }
+}
+.news-slider__wrp {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  z-index: 2;
+}
+.news-slider__item {
+  width: 400px;
+  flex-shrink: 0;
+}
+@media screen and (max-width: 992px) {
+  .news-slider__item {
+    width: 340px;
+  }
+}
+.news-slider__item.swiper-slide {
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.3s;
+}
+.news-slider__item.swiper-slide-active, .news-slider__item.swiper-slide-prev, .news-slider__item.swiper-slide-next {
+  opacity: 1;
+  pointer-events: auto;
+}
+.news-slider__ctr {
+  position: relative;
+  z-index: 12;
+}
+.news-slider__arrow {
+  background: #fff;
+  border: none;
+  display: inline-flex;
+  width: 50px;
+  height: 50px;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  z-index: 12;
+  cursor: pointer;
+  outline: none !important;
+}
+.news-slider__arrow:focus {
+  outline: none !important;
+}
+.news-slider__arrow .icon-font {
+  display: inline-flex;
+}
+.news-slider__arrow.news-slider-prev {
+  left: 15px;
+  transform: translateY(-50%);
+}
+.news-slider__arrow.news-slider-next {
+  right: 15px;
+  transform: translateY(-50%);
+}
+.news-slider__pagination {
+  text-align: center;
+  margin-top: 50px;
+}
+.news-slider__pagination .swiper-pagination-bullet {
+  width: 13px;
+  height: 10px;
+  display: inline-block;
+  background: #fff;
+  opacity: 0.2;
+  margin: 0 5px;
+  border-radius: 20px;
+  transition: opacity 0.5s, background-color 0.5s, width 0.5s;
+  transition-delay: 0.5s, 0.5s, 0s;
+}
+.news-slider__pagination .swiper-pagination-bullet-active {
+  opacity: 1;
+  background: #ffffff;
+  width: 100px;
+  transition-delay: 0s;
+}
+@media screen and (max-width: 576px) {
+  .news-slider__pagination .swiper-pagination-bullet-active {
+    width: 70px;
+  }
+}
+.news__item {
+  padding: 40px;
+  color: #fff;
+  border-radius: 10px;
+  display: block;
+  transition: all 0.3s;
+}
+@media screen and (min-width: 800px) {
+  .news__item:hover {
+    color: #222222;
+    transition-delay: 0.1s;
+  }
+  .news__item:hover .news-date, .news__item:hover .news__title, .news__item:hover .news__txt {
+    opacity: 1;
+    transition-delay: 0.1s;
+  }
+  .news__item:hover .news__img {
+    box-shadow: none;
+  }
+}
+.news__item.active {
+  color: #222222;
+}
+.news__item.active .news-date, .news__item.active .news__title, .news__item.active .news__txt {
+  opacity: 1;
+}
+.news__item.active .news__img {
+  box-shadow: none;
+}
+@media screen and (max-width: 992px) {
+  .news__item {
+    padding: 30px;
+  }
+}
+@media screen and (max-width: 576px) {
+  .news__item {
+    padding: 20px;
+  }
+}
+.news-date {
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  border-bottom: 2px solid;
+  display: inline-block;
+  opacity: 0.7;
+  transition: opacity 0.3s;
+}
+@media screen and (max-width: 576px) {
+  .news-date {
+    margin-bottom: 10px;
+    display: inline-flex;
+    align-items: center;
+    padding-bottom: 0;
+  }
+}
+.news-date__title {
+  display: block;
+  font-size: 32px;
+  margin-bottom: 10px;
+  font-weight: 500;
+}
+@media screen and (max-width: 576px) {
+  .news-date__title {
+    margin-right: 10px;
+  }
+}
+.news-date__txt {
+  font-size: 16px;
+}
+.news__title {
+  font-size: 25px;
+  font-weight: 500;
+  opacity: 0.7;
+  margin-top: 10px;
+  margin-bottom: 15px;
+  transition: opacity 0.3s;
+}
+@media screen and (max-width: 576px) {
+  .news__title {
+    font-size: 22px;
+    margin-bottom: 10px;
+  }
+}
+.news__txt {
+  margin: 10px 0;
+  line-height: 1.6em;
+  font-size: 15px;
+  opacity: 0.7;
+  transition: opacity 0.3s;
+}
+.news__img {
+  border-radius: 10px;
+  box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);
+  height: 200px;
+  margin-top: 30px;
+  width: 100%;
+  transition: all 0.3s;
+  transform-origin: 0% 0%;
+}
+@media screen and (max-width: 576px) {
+  .news__img {
+    height: 180px;
+    margin-top: 20px;
+  }
+}
+.news__img img {
+  max-width: 100%;
+  border-radius: 10px;
+  height: 100%;
+  width: 100%;
+}
--- a/swiper.min.css
+++ b/swiper.min.css
--- a/swiper.min.js
+++ b/swiper.min.js