ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Javascript, Jquery и CSS решения » Добавление скриптов и css решений
Мы стараемся поддерживать порядок в нашем каталоге, поэтому обычные пользователи не могут создавать новые темы в свободном каталоге скриптов и кодов. У нас уже очень много скриптов, и они размещены удобно в соответствующих разделах.
Если вы хотите добавить скрипт или код, которого еще нет в нашем каталоге, пожалуйста, разместите его в этой теме, и наш модератор опубликует его и начислит баллы за пополнение каталога. Мы ценим ваше участие и вклад в обогащение нашего ресурса! Спасибо большое!
Разбирая загашники, выкопала такую вещичку, вдруг кому пригодится
Генератор таблиц
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 куда-нибудь
Генератор таблиц
А кто автор скрипта не знаешь?
#p171007,Emerael написал(а):Генератор таблиц
А кто автор скрипта не знаешь?
Внезапно мое, писалось когда-то давно для генерации таблиц для отправки в почту, потому что у людей были данные и была большая и светлая лень для генерации разметки руками (=
Я принес вам сияющее градиентное название со звездочками потому что оно миленькое
<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>Will O The Wisp
Перенесла сюда, потому что во флуде может потеряться. Позже проверю и добавлю.
Will O The Wisp
Скажи, пожалуйста, кто автор этого? Ты?
Automation Baby
нет, конечно
я только начал его править под заголовок
https://youtu.be/yu0Cm4BqQv0
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>
<!-- Конец -->Раз на то пошло, в скрипте есть возможность сияния без наведения
Спасибо за этот вариант. 
Обязательно добавлю чуть позже.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Javascript, Jquery и CSS решения » Добавление скриптов и css решений
