微博上看到@過氣網(wǎng)紅一絲 發(fā)的,特地收集。
預(yù)覽
html
css
.btn-group { position: relative; display: inline-block; } .btn-group .btn { cursor: pointer; float: left; height: 10px; width: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); margin-left: 6px; margin-top: 1px; } .btn-group .btn:first-child { margin-left: 3px; } .btn-group svg { z-index: -1; top: 0; left: 0; position: absolute; width: 100%; height: 100%; overflow: visible; } .btn-group path { fill: none; stroke: #eee; stroke-dasharray: 39, 99999; transition: all 1s ease-in-out; stroke-width: 2; } .slides { transition: left 1s ease-in-out; height: 100vh; position: absolute; } .slides .slide { height: 100vh; width: 100vw; float: left; } .slides .slide:nth-child(1) { background: #c66; } .slides .slide:nth-child(2) { background: #acac39; } .slides .slide:nth-child(3) { background: #39ac39; } .slides .slide:nth-child(4) { background: #40bfbf; } .slides .slide:nth-child(5) { background: #8c8cd9; } body { overflow: hidden; margin: 0; padding: 0; } .nav { text-align: center; position: absolute; width: 100%; bottom: 5%; transform: translateY(-50%); }
js
const pathLength = 39; const BtnGroup = class BtnGroup { constructor(group) { this.buttonSpacing = 20; this.group = group; this.buttons = Array.prototype.slice.call(this.group.querySelectorAll(".btn")); this.slides = Array.prototype.slice.call(document.querySelectorAll(".slide")); this.slideContainer = document.querySelector(".slides"); this.slideContainer.style.width = this.slides.length + "00vw"; this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); this.svg.setAttribute("viewbox", "0 0 " + (this.buttonSpacing * this.buttons.length) + " 16"); this.path = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.path.classList.add("line"); this.currentPath = "M " + (-this.buttonSpacing / 2) + ", 14"; this.currentIndex = -1; this.activateIndex(this.buttons.indexOf(this.group.querySelector(".active"))); this.group.appendChild(this.svg); this.svg.appendChild(this.path); this.refreshPath(); this.initButtons(); for (const button of this.buttons) { button.addEventListener("click", e => this.onClick(e)); } } initButtons() { for (var i = 0; i < this.buttons.length; i++) { const center = this.center(i); const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); let pathStr = ""; pathStr += "M" + (center ) + ", 14 "; pathStr += "C" + (center + 3) + ", 14 "; pathStr += (center + 6) + ", 11 "; pathStr += (center + 6) + ", 8 "; pathStr += "C" + (center + 6) + ", 5 "; pathStr += (center + 3) + ", 2 "; pathStr += (center ) + ", 2 "; pathStr += "C" + (center - 3) + ", 2 "; pathStr += (center - 6) + ", 5 "; pathStr += (center - 6) + ", 8 "; pathStr += "C" + (center - 6) + ", 11 "; pathStr += (center - 3) + ", 14 "; pathStr += (center ) + ", 14 "; path.setAttributeNS(null, "d", pathStr); path.classList.add("circle"); } } onClick(e) { const index = this.buttons.indexOf(e.srcElement || e.target); this.activateIndex(index); } refreshPath() { this.path.setAttributeNS(null, "d", this.currentPath); this.path.style.strokeDashoffset = (-this.path.getTotalLength() + pathLength) * 0.9965; } center(index) { return index * this.buttonSpacing + (this.buttonSpacing / 2); } removeClass(str) { if (this.buttons[this.currentIndex]) { this.buttons[this.currentIndex].classList.remove(str); } } addClass(str) { if (this.buttons[this.currentIndex]) { this.buttons[this.currentIndex].classList.add(str); } } activateIndex(index) { this.slideContainer.style.left = -index + "00vw"; const lastCenter = this.center(this.currentIndex); const nextCenter = this.center(index); const offset = 0; const sign = index < this.currentIndex ? -1 : 1; this.currentPath += "C" + (lastCenter + sign * 3) + ", 14 "; this.currentPath += (lastCenter + sign * 6) + ", 11 "; this.currentPath += (lastCenter + sign * 6) + ", 8 "; this.currentPath += "C" + (lastCenter + sign * 6) + ", 5 "; this.currentPath += (lastCenter + sign * 3) + ", 2 "; this.currentPath += (lastCenter ) + ", 2 "; this.currentPath += "C" + (lastCenter - sign * 3) + ", 2 "; this.currentPath += (lastCenter - sign * 6) + ", 5 "; this.currentPath += (lastCenter - sign * 6) + ", 8 "; this.currentPath += "C" + (lastCenter - sign * 6) + ", 11 "; this.currentPath += (lastCenter - sign * 3) + ", 14 "; this.currentPath += (lastCenter ) + ", 14 "; this.currentPath += "L" + (nextCenter ) + ", 14 "; this.currentPath += "C" + (nextCenter + sign * 3) + ", 14 "; this.currentPath += (nextCenter + sign * 6) + ", 11 "; this.currentPath += (nextCenter + sign * 6) + ", 8 "; this.currentPath += "C" + (nextCenter + sign * 6) + ", 5 "; this.currentPath += (nextCenter + sign * 3) + ", 2 "; this.currentPath += (nextCenter ) + ", 2 "; this.currentPath += "C" + (nextCenter - sign * 3) + ", 2 "; this.currentPath += (nextCenter - sign * 6) + ", 5 "; this.currentPath += (nextCenter - sign * 6) + ", 8 "; this.currentPath += "C" + (nextCenter - sign * 6) + ", 11 "; this.currentPath += (nextCenter - sign * 3) + ", 14 "; this.currentPath += (nextCenter ) + ", 14 "; this.removeClass("active"); this.currentIndex = index; this.addClass("active"); this.refreshPath(); } } const groups = Array.prototype.slice.call(document.querySelectorAll(".btn-group")); for (const group of groups) { console.log(new BtnGroup(group)); }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/79302.html
摘要:小練習(xí)輪播圖組件任務(wù)描述在和上一任務(wù)同一目錄下面創(chuàng)建一個(gè)文件,在目錄中創(chuàng)建,并在其中編碼,實(shí)現(xiàn)一個(gè)輪播圖的功能。實(shí)現(xiàn)思路考察對(duì)節(jié)點(diǎn),定時(shí)器,事件的處理。 小練習(xí)3:輪播圖組件 任務(wù)描述在和上一任務(wù)同一目錄下面創(chuàng)建一個(gè)task0002_3.html文件,在js目錄中創(chuàng)建task0002_3.js,并在其中編碼,實(shí)現(xiàn)一個(gè)輪播圖的功能。 圖片數(shù)量及URL均在HTML中寫好 可以配置輪播的順...
摘要:網(wǎng)上的淡入淡出效果大多是依照中和的方法使用來控制元素的透明度達(dá)到目的,但缺點(diǎn)是有輕微的卡頓感,并且運(yùn)行效率一般。思路是將淡入,淡出的效果做成預(yù)先定義好的樣式類,然后用改變?cè)氐念悂磉_(dá)到圖片輪播。 網(wǎng)上的淡入淡出效果大多是依照jquery中fadeIn和fadeOut的方法使用js來控制元素的透明度達(dá)到目的,但缺點(diǎn)是有輕微的卡頓感,并且運(yùn)行效率一般。 這里提供另外一個(gè)思路,即通過預(yù)先定義...
摘要:輪播圖插件的任務(wù)已經(jīng)接近尾聲,在書寫輪播圖期間確實(shí)有一些小的感觸的。 輪播圖插件的任務(wù)已經(jīng)接近尾聲,在書寫輪播圖期間確實(shí)有一些小的感觸的。感興趣的可以訪問我的輪播圖的線上地址:輪播圖 首先,輪播圖插件其實(shí)并不是我第一次寫,之前也寫過,不過那時(shí)候是按照別人的思路寫下來的,算起來大概有一年了,這次又一次開始輪播圖是因?yàn)榘葑x了《單頁面Web應(yīng)用 JavaScript從前端到后端》的這本書的1...
摘要:輪播圖插件的任務(wù)已經(jīng)接近尾聲,在書寫輪播圖期間確實(shí)有一些小的感觸的。 輪播圖插件的任務(wù)已經(jīng)接近尾聲,在書寫輪播圖期間確實(shí)有一些小的感觸的。感興趣的可以訪問我的輪播圖的線上地址:輪播圖 首先,輪播圖插件其實(shí)并不是我第一次寫,之前也寫過,不過那時(shí)候是按照別人的思路寫下來的,算起來大概有一年了,這次又一次開始輪播圖是因?yàn)榘葑x了《單頁面Web應(yīng)用 JavaScript從前端到后端》的這本書的1...
閱讀 2142·2023-04-26 00:00
閱讀 3240·2021-09-24 10:37
閱讀 3529·2021-09-07 09:58
閱讀 1518·2019-08-30 15:56
閱讀 2218·2019-08-30 13:11
閱讀 2311·2019-08-29 16:38
閱讀 960·2019-08-29 12:58
閱讀 1876·2019-08-27 10:54