-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.json
1 lines (1 loc) · 14.8 KB
/
search.json
1
[{"title":"Hello World","url":"/2023/03/14/hello-world/","content":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.\nQuick StartCreate a new post$ hexo new "My New Post"\n\nMore info: Writing\nRun server$ hexo server\n\nMore info: Server\nGenerate static files$ hexo generate\n\nMore info: Generating\nDeploy to remote sites$ hexo deploy\n\nMore info: Deployment\n"},{"title":"真·轮播视频实现，附加缩略图功能","url":"/2023/03/15/%E7%9C%9F%C2%B7%E8%BD%AE%E6%92%AD%E8%A7%86%E9%A2%91%E5%AE%9E%E7%8E%B0%EF%BC%8C%E9%99%84%E5%8A%A0%E7%BC%A9%E7%95%A5%E5%9B%BE%E5%8A%9F%E8%83%BD/","content":"轮播视频的概念极其适用场景和实现方法你真的需要轮播视频吗\n\n\n \n\n不懂了吧 网上的轮播视频粗略看一圈下来，基本都是把轮播图的img图片位置换成了video视频，这种时间一到就直接下一张的轮播并不符合我们的需求我们需要的是可以获取到视频播放长度，在视频彻底播放完之后才轮播到下一个视频的真轮播视频。这个时候就需要用到我们深厚且扎实的js功底，以我自己的轮播视频为例，先简单写一下基础的HTML和css布局 \n以下是HTML的部分<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>轮播视频</title> <link rel="stylesheet" href="banner.css"></head><body><!-- 2. banner start --><section id="banner"> <div class="videos-loop"> <div class="vp-area"> <video muted autoplay> <source src="supreme.mp4" type="video/mp4"> </video> </div> <div class="thumbnails"> <div class="video-item playing"> <video muted> <source src="supreme.mp4" type="video/mp4"> </video> <div class="video-item-content"> <h3>There are birds that only land once in a lifetime.</h3> <p>Do you want to know why? The time it landed was when it died.</p> </div> </div> <div class="video-item"> <video muted> <source src="nike.mp4" type="video/mp4"> </video> <div class="video-item-content"> <h3>There are birds that only land once in a lifetime.</h3> <p>Do you want to know why? The time it landed was when it died.Do you want to know why? The time it landed was when it died.Do you want to know why? The time it landed was when it died.Do you want to know why? The time it landed was when it died.Do you want to know why? The time it landed was when it died.</p> </div> </div> <div class="video-item"> <video muted> <source src="adidas.mp4" type="video/mp4"> </video> <div class="video-item-content"> <h3>There are birds that only land once in a lifetime.</h3> <p>Do you want to know why? The time it landed was when it died.</p> </div> </div> </div> </div></section><!-- 2. banner end --></body><script src="banner.js"></script></html>\n\n以下是CSS的部分可以按需删减 ，此处的css随便写了几坨\n/*banner start*/#banner { margin-top: 100px; width: 100%; background-color: #000; box-sizing: border-box;}#banner .videos-loop { width: 1460px; display: flex; justify-content: space-between; margin: 0 auto;}#banner .videos-loop .vp-area { width: 1100px; height: calc(1100px * 9 / 16); background-color: #161616;}#banner .videos-loop .vp-area video { width: 1100px; height: calc(1100px * 9 / 16);}#banner .videos-loop .thumbnails { width: calc(100% - 1100px); height: calc(1100px * 9 / 16); overflow: hidden; display: flex; flex-direction: column; align-items: center; background-color: #1e1e1e;}#banner .videos-loop .thumbnails .video-item { width: 320px; height: calc(120px); padding: 10px; display: flex; transition: 0.5s ease-in-out; border-radius: 4px; cursor: pointer;}#banner .videos-loop .thumbnails .video-item video { width: calc(320px * 0.4); height: calc(calc(320px * 0.4) * 9 / 16); object-fit: cover; margin-right: 15px; margin-top: 20px;}#banner .videos-loop .thumbnails .video-item .video-item-content { flex: 1; width: calc(calc(320px - calc(320px * 0.4)) - 15px);}#banner .videos-loop .thumbnails .video-item .video-item-content h3 { width: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; color: rgba(255, 255, 255, 0.6); margin-bottom: 12px; transition: 0.2s ease-in-out;}#banner .videos-loop .thumbnails .video-item .video-item-content p { width: inherit; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 16px; color: #ccc; transition: 0.2s ease-in-out;}#banner .videos-loop .thumbnails .video-item:hover { background-color: #363636;}#banner .videos-loop .thumbnails .video-item:hover .video-item-content h3 { color: #ffffff;}#banner .videos-loop .thumbnails .video-item:hover .video-item-content p { color: #ccc;}#banner .videos-loop .thumbnails .video-item.playing { background-color: #363636;}#banner .videos-loop .thumbnails .video-item.playing .video-item-content h3 { color: #ffffff;}#banner .videos-loop .thumbnails .video-item.playing .video-item-content p { color: #ccc;}@media (min-width: 992px) and (max-width: 1200px) { #banner .videos-loop { width: 1160px; display: flex; justify-content: space-between; margin: 0 auto; } #banner .videos-loop .vp-area { width: 800px; height: calc(800px * 9 / 16); background-color: #161616; } #banner .videos-loop .vp-area video { width: 800px; height: calc(800px * 9 / 16); } #banner .videos-loop .thumbnails { width: calc(100% - 800px); height: calc(800px * 9 / 16); overflow: hidden; display: flex; flex-direction: column; align-items: center; background-color: #1e1e1e; }}@media (min-width: 700px) and (max-width: 992px) { #banner .videos-loop { width: 860px; display: flex; justify-content: space-between; margin: 0 auto; } #banner .videos-loop .thumbnails { width: calc(100% - 500px); height: calc(650px * 9 / 16); overflow: hidden; display: flex; flex-direction: column; align-items: center; background-color: #1e1e1e; } #banner .videos-loop .vp-area { width: 500px; height: calc(500px * 9 / 16); background-color: #161616; } #banner .videos-loop .vp-area video { width: 500px; height: calc(500px * 9 / 16); margin-top: 50px; }}@media (max-width: 700px) { #banner .videos-loop { width: 480px; display: flex; flex-direction: column; justify-content: space-between; margin: 0 auto; } #banner .videos-loop .vp-area { width: 480px; height: calc(500px * 9 / 16); background-color: #161616; } #banner .videos-loop .vp-area video { width: 480px; height: calc(600px * 9 / 16); } #banner .videos-loop .thumbnails { width: calc(100% - 500px); height: calc(500px * 9 / 16); overflow: hidden; display: flex; flex-direction: column; align-items: center; background-color: #1e1e1e; } #banner .videos-loop .thumbnails .video-item { width: 500px; height: calc(120px); padding: 10px; display: flex; transition: 0.5s ease-in-out; border-radius: 4px; cursor: pointer; margin-bottom: 0; } #banner .videos-loop .thumbnails { width: 480px; height: calc(670px * 9 / 16); overflow: hidden; display: flex; flex-direction: column; align-items: center; background-color: #1e1e1e; }}/*banner end*/\n\n然后，把功能拆分，先实现轮播功能，这里就不细说了，直接上内容\nlet currIndex = 0; let playA = document.querySelector(".vp-area"); let thumb = [...document.querySelectorAll(".thumbnails > .video-item > video")]; let playTime = null; let smWindow = undefined; // 轮播视频的主视频播放区域 const bannerVideo = function (event) { playA.children[0].removeEventListener("ended",bannerVideo); document.querySelector(".playing").classList.remove("playing"); if (event.type != "click") currIndex = ++currIndex % thumb.length; let videoDom = `<video muted autoplay> <source src="${thumb[currIndex].children[0].getAttribute("src")}" type="video/mp4"> </video>`; playA.innerHTML=videoDom; thumb[currIndex].parentElement.classList.add("playing"); playA.children[0].addEventListener("ended",bannerVideo); }\n\n然后就是缩略图功能，当鼠标移到缩略图范围内时，主视频区的视频暂停，开始播放缩略图视频，鼠标移开缩略图时，主视频继续播放，如果点击了指定的视频，则播放指定的视频\n// 缩略图 const smallVideo = function () { let videos = document.querySelectorAll(".video-item"); videos.forEach((el,index) => { el.addEventListener("click", (event) => { if (smWindow != undefined) { thumb[smWindow].pause(); thumb[smWindow].currentTime = 0; playA.children[0].play(); } if (currIndex == index) return; currIndex = index; bannerVideo(event); }); el.addEventListener("mouseover",() => { playTime = setTimeout(() =>{ smWindow = index; playA.children[0].pause(); thumb[index].play(); },100); }); el.addEventListener("mouseleave", () => { clearTimeout(playTime); setTimeout(()=>{ smWindow = undefined; thumb[index].pause(); thumb[index].currentTime = 0; playA.children[0].play(); },100); }); }); }\n\n\n完整的js内容如下(function () { let currIndex = 0; let playA = document.querySelector(".vp-area"); let thumb = [...document.querySelectorAll(".thumbnails > .video-item > video")]; let playTime = null; let smWindow = undefined;// 轮播视频的主视频播放区域 const bannerVideo = function (event) { playA.children[0].removeEventListener("ended",bannerVideo); document.querySelector(".playing").classList.remove("playing"); if (event.type != "click") currIndex = ++currIndex % thumb.length; let videoDom = `<video muted autoplay> <source src="${thumb[currIndex].children[0].getAttribute("src")}" type="video/mp4"> </video>`; playA.innerHTML=videoDom; thumb[currIndex].parentElement.classList.add("playing"); playA.children[0].addEventListener("ended",bannerVideo); } // 缩略图 const smallVideo = function () { let videos = document.querySelectorAll(".video-item"); videos.forEach((el,index) => { el.addEventListener("click", (event) => { if (smWindow != undefined) { thumb[smWindow].pause(); thumb[smWindow].currentTime = 0; playA.children[0].play(); } if (currIndex == index) return; currIndex = index; bannerVideo(event); }); el.addEventListener("mouseover",() => { playTime = setTimeout(() =>{ smWindow = index; playA.children[0].pause(); thumb[index].play(); },100); }); el.addEventListener("mouseleave", () => { clearTimeout(playTime); setTimeout(()=>{ smWindow = undefined; thumb[index].pause(); thumb[index].currentTime = 0; playA.children[0].play(); },100); }); }); } const run = function () { let videoELem = playA.children[0]; videoELem.addEventListener("ended", bannerVideo); smallVideo(); } run();})();\n\n小结那么到此为止，一套完整的轮播视频＋缩略图就这么点了 虽然细节没有说到位，但是反复看两遍源码，逻辑还是很简单的，点到为止，下播\n","categories":["Web的日常经验分享"],"tags":["javascript"]},{"title":"Js模拟惯性滑动插件","url":"/2023/03/15/Js%E6%A8%A1%E6%8B%9F%E6%83%AF%E6%80%A7%E6%BB%91%E5%8A%A8%E6%8F%92%E4%BB%B6/","content":"\n\n你小子，看到有标题就点啊，没了，晚点再更\n","categories":["Web的日常经验分享"],"tags":["javascript"]}]