В каталоге запрещено создавать новые темы, т.к. скриптов очень много, а мы стараемся делать хорошую навигацию по разделу и добавлять их упорядоченно.
Скрипты, которых еще нет в этом разделе можно выкладывать в этой теме. и модератор добавит их на форум.
Добавление скриптов и css решений
Сообщений 1 страница 10 из 18
Поделиться111.08.20 19:05
Поделиться231.07.22 23:37
Разбирая загашники, выкопала такую вещичку, вдруг кому пригодится
Генератор таблиц
Usage:
Скрипт представляет из себя функцию, принимающую 3 аргумента:
1)Массив объектов колонок - head
Код:[{ caption : 'колонка 1', //название property : 'column1', //поле, значение которого будет браться из data headerStyle : 'font-family: Arial;font-size:200%', //стиль ячейки заголовка tdStyle: 'background:beige' //стиль для всех ячеек заданной колонки },{ caption : 'колонка 2', property : 'column2', tdStyle: 'background:aliceblue' }]
2) массив объектов-данных в формате propertyName: content - data
Код:[{ column1 : 123, column2 : 'sdfg' }]
3)Объект настроек стилей всей таблицы - options
Код:{ tableStyle: 'background:blue;width:100%;border:1px solid black', //стиль для тега table trStyle: 'min-height:40px', //стиль для всех tr в таблице tdStyle: 'min-width:80px' //стиль для всех ячеек }
Код:function htmlTable(head, data, options){ var tableStyle = options.tableStyle ? (' style="' + options.tableStyle + '"') : ''; var trStyle = options.trStyle ? (' style="' + options.trStyle + '"') : ''; var tdStyle = options.tdStyle ? (' style="' + options.tdStyle + '"') : ''; var headString = '<table' + tableStyle + '><tr' + trStyle + '>'; var dataStrings = [] for (var i=0; i<data.length;i++) dataStrings.push(''); head.forEach(function (elem, index) { var tdStyleBegin = tdStyle ? tdStyle.slice(0, -1) : (elem.headerStyle ? ' style="' : ''); var headStyle = tdStyleBegin; headStyle += elem.headerStyle ? elem.headerStyle : ''; headStyle += headStyle ? '"' : ''; var elStyle = tdStyleBegin; elStyle += elem.tdStyle ? elem.tdStyle : ''; elStyle += elStyle ? '"' : ''; headString += '<td' + headStyle + '><b>' + elem.caption + '</b></td>'; data.forEach(function (dataElem, i) { dataStrings[i] += '<td' + elStyle + '>' + (dataElem[elem.property]?dataElem[elem.property]:'') + '</td>' }) }); headString += '</tr>'; var dataString = '<tr' + trStyle + '>' + dataStrings.reduce(function (prev, cur) { return prev + '</tr><tr' + trStyle + '>' + cur }) + '</tr>'; return headString + dataString + '</table>' }
Код:const head = [ { caption: 'Колонка 1', property: 'col1', headerStyle : 'font-family: Arial;font-size:200%;', tdStyle: 'background:beige;' }, { caption: 'Колонка 2', property: 'col2', tdStyle: 'background:aliceblue;' } ]; const data = [ { col1: 'ололо', col2: 'Азаза' }, { col1: 'ололо1', col2: 'Азаза1' }, { col1: 'ололо2', col2: 'Азаза2' }, { col1: 'ололо3', col2: 'Азаза3' }, { col1: 'ололо4', col2: 'Азаза4' }, ]; const options = { tableStyle: 'background:blue;width:100%;border-collapse:collapse;', trStyle: 'min-height:40px;', tdStyle: 'min-width:80px;border:1px solid black;' } const tableHtml = htmlTable(head, data, options)
как использовать? Ну, например, можно создать div через document.createElement('div'), сделать el.innerHTML = tableHtml и приаппендить el куда-нибудь
Поделиться301.08.22 13:55
Генератор таблиц
А кто автор скрипта не знаешь?
Поделиться401.08.22 15:28
#p171007,Emerael написал(а):Генератор таблиц
А кто автор скрипта не знаешь?
Внезапно мое, писалось когда-то давно для генерации таблиц для отправки в почту, потому что у людей были данные и была большая и светлая лень для генерации разметки руками (=
Поделиться530.08.22 08:54
Я принес вам сияющее градиентное название со звездочками потому что оно миленькое
<style> :root { --purple: rgb(123, 31, 162); --violet: rgb(103, 58, 183); --pink: rgb(244, 143, 177); } @keyframes background-pan { from { background-position: 0% center; } to { background-position: -200% center; } } @keyframes scale { from, to { transform: scale(0); } 50% { transform: scale(1); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } h81 { color: #787195; font-size: clamp(2em, 2vw, 4em); font-weight: 400; margin: 0px; padding: 20px; text-align: center; } h81 > .magic { display: inline-block; position: relative; } h81 > .magic > .magic-star { --size: clamp(20px, 1.5vw, 30px); animation: scale 700ms ease forwards; display: block; height: var(--size); left: var(--star-left); position: absolute; top: var(--star-top); width: var(--size); } h81 > .magic > .magic-star > svg { animation: rotate 1000ms linear infinite; display: block; opacity: 0.7; } h81 > .magic > .magic-star > svg > path { fill: var(--violet); } h81 > .magic > .magic-text { animation: background-pan 3s linear infinite; background: linear-gradient( to right, var(--purple), var(--violet), var(--pink), var(--purple) ); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; } /* -- YouTube Link Styles -- */ #source-link { top: 60px; } #source-link > i { color: rgb(94, 106, 210); } #yt-link { top: 10px; } #yt-link > i { color: rgb(239, 83, 80); } .meta-link { align-items: center; backdrop-filter: blur(3px); background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); cursor: pointer; display: inline-flex; gap: 5px; left: 10px; padding: 10px 20px; position: fixed; text-decoration: none; transition: background-color 600ms, border-color 600ms; z-index: 10000; } .meta-link:hover { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } .meta-link > i, .meta-link > span { height: 20px; line-height: 20px; } .meta-link > span { color: white; transition: color 600ms; } </style> <script> let index = 0, interval = 1000; const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; const animate = star => { star.style.setProperty("--star-left", `${rand(-10, 100)}%`); star.style.setProperty("--star-top", `${rand(-40, 80)}%`); star.style.animation = "none"; star.offsetHeight; star.style.animation = ""; } let timeouts = [], intervals = []; const magic = document.querySelector(".magic"); magic.onmouseenter = () => { let index = 1; for(const star of document.getElementsByClassName("magic-star")) { timeouts.push(setTimeout(() => { animate(star); intervals.push(setInterval(() => animate(star), 1000)); }, index++ * 300)); }; } magic.onmouseleave = onMouseLeave = () => { for(const t of timeouts) clearTimeout(t); for(const i of intervals) clearInterval(i); timeouts = []; intervals = []; } </script> <container style=" height: 65px; display: block; "><h81>Посмотри сюда<br> <span class="magic"> <span class="magic-star"> <svg viewBox="0 0 512 512"> <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" /> </svg> </span> <span class="magic-star"> <svg viewBox="0 0 512 512"> <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" /> </svg> </span> <span class="magic-star"> <svg viewBox="0 0 512 512"> <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" /> </svg> </span> <span class="magic-text">НАЗВАНИЕ</span><br> </span> </h81></container>
Поделиться630.08.22 09:10
Will O The Wisp
Перенесла сюда, потому что во флуде может потеряться. Позже проверю и добавлю.
Поделиться730.08.22 19:58
Will O The Wisp
Скажи, пожалуйста, кто автор этого? Ты?
Поделиться831.08.22 09:18
Automation Baby
нет, конечно
я только начал его править под заголовок
https://youtu.be/yu0Cm4BqQv0
Поделиться931.08.22 09:42
Automation Baby
Раз на то пошло, в скрипте есть возможность сияния без наведения
В скрипте этим заменить и будет без наведения.
let index = 0, interval = 1000; const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; const animate = star => { star.style.setProperty("--star-left", `${rand(-10, 100)}%`); star.style.setProperty("--star-top", `${rand(-40, 80)}%`); star.style.animation = "none"; star.offsetHeight; star.style.animation = ""; } for(const star of document.getElementsByClassName("magic-star")) { setTimeout(() => { animate(star); setInterval(() => animate(star), 1000); }, index++ * (interval / 3)) }
скрипт демонстрационный, так что часть кода с линками можно убрать:
<style> :root { --purple: rgb(123, 31, 162); --violet: rgb(103, 58, 183); --pink: rgb(244, 143, 177); } @keyframes background-pan { from { background-position: 0% center; } to { background-position: -200% center; } } @keyframes scale { from, to { transform: scale(0); } 50% { transform: scale(1); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } h81 { color: #787195; font-size: clamp(2em, 2vw, 4em); font-weight: 400; margin: 0px; padding: 20px; text-align: center; } h81 > .magic { display: inline-block; position: relative; } h81 > .magic > .magic-star { --size: clamp(20px, 1.5vw, 30px); animation: scale 700ms ease forwards; display: block; height: var(--size); left: var(--star-left); position: absolute; top: var(--star-top); width: var(--size); } h81 > .magic > .magic-star > svg { animation: rotate 1000ms linear infinite; display: block; opacity: 0.7; } h81 > .magic > .magic-star > svg > path { fill: var(--violet); } h81 > .magic > .magic-text { animation: background-pan 3s linear infinite; background: linear-gradient( to right, var(--purple), var(--violet), var(--pink), var(--purple) ); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; } </style> <script> /* -- ↓↓↓ on hover ↓↓↓ -- */ let index = 0, interval = 1000; const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; const animate = star => { star.style.setProperty("--star-left", `${rand(-10, 100)}%`); star.style.setProperty("--star-top", `${rand(-40, 80)}%`); star.style.animation = "none"; star.offsetHeight; star.style.animation = ""; } let timeouts = [], intervals = []; const magic = document.querySelector(".magic"); magic.onmouseenter = () => { let index = 1; for(const star of document.getElementsByClassName("magic-star")) { timeouts.push(setTimeout(() => { animate(star); intervals.push(setInterval(() => animate(star), 1000)); }, index++ * 300)); }; } magic.onmouseleave = onMouseLeave = () => { for(const t of timeouts) clearTimeout(t); for(const i of intervals) clearInterval(i); timeouts = []; intervals = []; } /* -- ↓↓↓ NO hover ↓↓↓ -- */ //let index = 0, // interval = 1000; //const rand = (min, max) => // Math.floor(Math.random() * (max - min + 1)) + min; //const animate = star => { // star.style.setProperty("--star-left", `${rand(-10, 100)}%`); // star.style.setProperty("--star-top", `${rand(-40, 80)}%`); // star.style.animation = "none"; // star.offsetHeight; // star.style.animation = ""; //} //for(const star of document.getElementsByClassName("magic-star")) { // setTimeout(() => { // animate(star); // setInterval(() => animate(star), 1000); // }, index++ * (interval / 3)) //} </script> <container style=" height: 65px; display: block; "><h81>Посмотри сюда<br> <span class="magic"> <span class="magic-star"> <svg viewBox="0 0 512 512"> <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" /> </svg> </span> <span class="magic-star"> <svg viewBox="0 0 512 512"> <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" /> </svg> </span> <span class="magic-star"> <svg viewBox="0 0 512 512"> <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" /> </svg> </span> <span class="magic-text">НАЗВАНИЕ</span><br> </span> </h81></container>
и уж конечно ценность не в стилях 81 заголовка или контейнера под него, кастомизировать то можно где угодно
но лучше всего ставить на него скрипт сворачивания магии до полного загруза страницы
<!-- Сворачивание до загрузки by cobaltCorsair --> <style id=dontsee>.magic-star {display:none!important}</style> <script>$(document).ready(function(){$("style.#dontsee").replaceWith("")})</script> <!-- Конец -->
Поделиться1031.08.22 14:30
Раз на то пошло, в скрипте есть возможность сияния без наведения
Спасибо за этот вариант. Обязательно добавлю чуть позже.