50projects50days/index.html
2024-06-09 15:18:01 +08:00

339 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./index/css/style.css">
<link rel="stylesheet" type="text/css" href="./index/css/font.css">
<!-- FontAwesome -->
<link rel="stylesheet" href="./index/css/all.min.css">
<!--引入Swiper-->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js">
</script>
<!--<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<script src="./js/swiper-bundle.min.js"> </script>-->
</head>
<body>
<div class="main">
<div class="left">
<!--Logo-->
<div class="main-img">
<!--<img src="./index/img/icon/logo.png" alt="img">-->
<div class="img-title">
<span class="img-title"><a href="https://study.jonylee.top/50+js-css-html/">Web 50+</a></span>
</div>
</div>
<div class="message cards" id="switchmore">
<div class="des" id="des">
<i class="fa-solid fa-quote-left"></i>
<div class="des-title"><span id="change">Hello&nbsp;World&nbsp;!</span><br><span id="change1">50+web练习小项目 HTML, CSS & JS</span></div>
<i class="fa-solid fa-quote-right"></i>
</div>
</div>
</div>
<div class="right">
<div class="father swiper">
<div class="swiper-wrapper">
<!-- 第一页 -->
<div class="swiper-slide">
<!-- 第一行 -->
<div class="son">
<div class="second" onclick="window.open('./expanding-cards/','_self')">
<img src="./index/images/1.png">
<span>01 扩展卡片</span>
</div>
<div class="second" onclick="window.open('./progress-steps/','_self')">
<img src="./index/images/2.png">
<span>02 进度条</span>
</div>
<div class="second" onclick="window.open('./rotating-nav-animation/','_self')">
<img src="./index/images/3.png">
<span>03 旋转导航动画</span>
</div>
<div class="second" onclick="window.open('./hidden-search/','_self')">
<img src="./index/images/4.png">
<span>04 隐藏搜索框</span>
</div>
</div>
<!-- 第二行 -->
<div class="son">
<div class="second" onclick="window.open('./blurry-loading/','_self')">
<img src="./index/images/6.png">
<span>05 模糊加载</span>
</div>
<div class="second" onclick="window.open('./scroll-animation/','_self')">
<img src="./index/images/7.png">
<span>06 滚动动画</span>
</div>
<div class="second" onclick="window.open('./split-landing-page/','_self')">
<img src="./index/images/8.png">
<span>07 拆分登陆页面</span>
</div>
<div class="second" onclick="window.open('./form-input-wave/','_self')">
<img src="./index/images/9.png">
<span>08 表单输入波浪</span>
</div>
</div>
<!-- 第三行 -->
<div class="son">
<div class="second" onclick="window.open('./sound-board/','_self')">
<img src="./index/images/6.png">
<span>09 声音卡</span>
</div>
<div class="second" onclick="window.open('./dad-jokes/','_self')">
<img src="./index/images/7.png">
<span>10 爸爸的笑话</span>
</div>
<div class="second" onclick="window.open('./event-keycodes/','_self')">
<img src="./index/images/8.png">
<span>11 事件键码</span>
</div>
<div class="second" onclick="window.open('./faq-collapse/','_self')">
<img src="./index/images/9.png">
<span>12 常见问题折叠</span>
</div>
</div>
</div>
<!-- 第二页 -->
<div class="swiper-slide">
<!-- 第四行 -->
<div class="son">
<div class="second" onclick="window.open('./random-choice-picker/','_self')">
<img src="./index/images/6.png">
<span>13 随机选择器</span>
</div>
<div class="second" onclick="window.open('./animated-navigation/','_self')">
<img src="./index/images/7.png">
<span>14 导航动画</span>
</div>
<div class="second" onclick="window.open('./incrementing-counter/','_self')">
<img src="./index/images/8.png">
<span>15 递增计数器</span>
</div>
<div class="second" onclick="window.open('./drink-water/','_self')">
<img src="./index/images/9.png">
<span>16 喝水</span>
</div>
</div>
<!-- 第五行 -->
<div class="son">
<div class="second" onclick="window.open('./movie-app/','_self')">
<img src="./index/images/6.png">
<span>17 movie-app</span>
</div>
<div class="second" onclick="window.open('./background-slider/','_self')">
<img src="./index/images/7.png">
<span>18 背景滑块</span>
</div>
<div class="second" onclick="window.open('./theme-clock/','_self')">
<img src="./index/images/8.png">
<span>19 主题时钟</span>
</div>
<div class="second" onclick="window.open('./button-ripple-effect/','_self')">
<img src="./index/images/9.png">
<span>20 按钮涟漪效果</span>
</div>
</div>
<!-- 第六行 -->
<div class="son">
<div class="second" onclick="window.open('./drag-n-drop/','_self')">
<img src="./index/images/1.png">
<span>21 拖放</span>
</div>
<div class="second" onclick="window.open('./drawing-app/','_self')">
<img src="./index/images/2.png">
<span>22 画图APP</span>
</div>
<div class="second" onclick="window.open('./kinetic-loader/','_self')">
<img src="./index/images/3.png">
<span>23 加载动画</span>
</div>
<div class="second" onclick="window.open('./content-placeholder/','_self')">
<img src="./index/images/4.png">
<span>24 内容占位符</span>
</div>
</div>
</div>
<!-- 第三页 -->
<div class="swiper-slide">
<!-- 第七行 -->
<div class="son">
<div class="second" onclick="window.open('./sticky-navigation/','_self')">
<img src="./index/images/6.png">
<span>25 粘性导航栏</span>
</div>
<div class="second" onclick="window.open('./double-vertical-slider/','_self')">
<img src="./index/images/7.png">
<span>26 双垂直滑块</span>
</div>
<div class="second" onclick="window.open('./toast-notification/','_self')">
<img src="./index/images/8.png">
<span>27 Toast通知</span>
</div>
<div class="second" onclick="window.open('./github-profiles/','_self')">
<img src="./index/images/9.png">
<span>28 Github 配置文件</span>
</div>
</div>
<!-- 第八行 -->
<div class="son">
<div class="second" onclick="window.open('./double-click-heart/','_self')">
<img src="./index/images/6.png">
<span>29 双击加心点赞</span>
</div>
<div class="second" onclick="window.open('./auto-text-effect/','_self')">
<img src="./index/images/7.png">
<span>30 自动文本效果</span>
</div>
<div class="second" onclick="window.open('./password-generator/','_self')">
<img src="./index/images/8.png">
<span>31 密码生成器</span>
</div>
<div class="second" onclick="window.open('./good-cheap-fast/','_self')">
<img src="./index/images/9.png">
<span>32 多快好省</span>
</div>
</div>
<!-- 第九行 -->
<div class="son">
<div class="second" onclick="window.open('./notes-app/','_self')">
<img src="./index/images/6.png">
<span>33 便签</span>
</div>
<div class="second" onclick="window.open('./animated-countdown/','_self')">
<img src="./index/images/7.png">
<span>34 动画倒计时</span>
</div>
<div class="second" onclick="window.open('./image-carousel/','_self')">
<img src="./index/images/8.png">
<span>35 图片轮播</span>
</div>
<div class="second" onclick="window.open('./hoverboard/','_self')">
<img src="./index/images/9.png">
<span>36 彩色悬停效果</span>
</div>
</div>
</div>
<!-- 第四页 -->
<div class="swiper-slide">
<!-- 第十行 -->
<div class="son">
<div class="second" onclick="window.open('./pokedex/','_self')">
<img src="./index/images/6.png">
<span>37 口袋妖怪</span>
</div>
<div class="second" onclick="window.open('./mobile-tab-navigation/','_self')">
<img src="./index/images/7.png">
<span>38 移动选项卡导航</span>
</div>
<div class="second" onclick="window.open('./password-strength-background/','_self')">
<img src="./index/images/8.png">
<span>39 密码强度背景</span>
</div>
<div class="second" onclick="window.open('./3d-boxes-background/','_self')">
<img src="./index/images/9.png">
<span>40 3D盒子背景</span>
</div>
</div>
<!-- 第十一行 -->
<div class="son">
<div class="second" onclick="window.open('./verify-account-ui/','_self')">
<img src="./index/images/6.png">
<span>41 验证账户UI</span>
</div>
<div class="second" onclick="window.open('./live-user-filter/','_self')">
<img src="./index/images/7.png">
<span>42 实时用户筛选器</span>
</div>
<div class="second" onclick="window.open('./feedback-ui-design/','_self')">
<img src="./index/images/8.png">
<span>43 反馈UI设计</span>
</div>
<div class="second" onclick="window.open('./custom-range-slider/','_self')">
<img src="./index/images/9.png">
<span>44 自定义范围滑块</span>
</div>
</div>
<!-- 第十二行 -->
<div class="son">
<div class="second" onclick="window.open('./netflix-mobile-navigation/','_self')">
<img src="./index/images/6.png">
<span>45 Netflix移动导航</span>
</div>
<div class="second" onclick="window.open('./quiz-app/','_self')">
<img src="./index/images/7.png">
<span>46 测验APP</span>
</div>
<div class="second" onclick="window.open('./testimonial-box-switcher/','_self')">
<img src="./index/images/8.png">
<span>47 推荐式换盒器</span>
</div>
<div class="second" onclick="window.open('./random-image-generator/','_self')">
<img src="./index/images/9.png">
<span>48 随机图像生成器</span>
</div>
</div>
</div>
<!-- 第五页 -->
<div class="swiper-slide">
<!-- 第十三行 -->
<div class="son">
<div class="second" onclick="window.open('./todo-list/','_self')">
<img src="./index/images/6.png">
<span>49 todo列表</span>
</div>
<div class="second" onclick="window.open('./insect-catch-game/','_self')">
<img src="./index/images/7.png">
<span>50 捉虫游戏</span>
</div>
<div class="second" onclick="window.open('./simple-timer/','_self')">
<img src="./index/images/8.png">
<span>51 简单计时器</span>
</div>
<div class="second" onclick="window.open('./3d-boxes-background/','_self')">
<img src="./index/images/9.png">
<span>52 待添加</span>
</div>
</div>
</div>
</div>
<div class="swiper-pagination" style="position: static;margin-top: 4px;"></div>
</div>
</div>
</div>
<!--Swiper初始化设置-->
<script>
var mySwiper = new Swiper('.swiper', {
direction: 'horizontal', // 垂直切换选项,水平horizontal垂直vertical
loop: false, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 鼠标滚轮控制Swiper切换
mousewheel: true, // 开启鼠标滚轮控制Swiper切换
mousewheelDirectionNormalize: true, // 如果需要可以设置鼠标滚轮的方向true 为向下或向右表示“后”false 为向上或向左表示“后”
mousewheelSensitivity: 1, // 鼠标滚轮的滚动行为表示每次滚动多少个slide默认为1
mousewheelSpeed: 2000, // 表示滚动的速度默认为1000ms即1秒
mousewheelPropagation: true // 表示滚动的反弹效果默认为100ms
// 如果需要前进后退按钮
/* navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},*/
// 如果需要滚动条
/*scrollbar: {
el: '.swiper-scrollbar',
},*/
})
</script>
</body>
</html>