Эффект искр при движении курсора на Javascript

Разместил: Apocalypse
4 июня 2015

Интересный эффект некого подобия искр при движении вашего курсора Для начала посмотрите ДЕМО Установка: На нужных страницах после /head вставляйте:

<script language="JavaScript">
//Comment trail script- By Kurt (kurt.grigg@virgin.net)
//Script featured on Dynamic Drive
//Visit http://www.dynamicdrive.com for this script and more

colours=new Array('#ff0000','#00ff00','#ffffff','#ff00ff','#ffa500','#ffff00','#00ff00','#ffffff','ff00ff')
n = 10;
y = 0;
x = 0;
n6=(document.getElementById&&!document.all);
ns=(document.layers);
ie=(document.all);
d=(ns||ie)?'document.':'document.getElementById("';
a=(ns||n6)?'':'all.';
n6r=(n6)?'")':'';
s=(ns)?'':'.style';
if (ns){
for (i = 0; i < n; i++)
document.write('<layer name="dots'+i+'" top=0 left=0 width='+i/2+' height='+i/2+' bgcolor=#ff0000></layer>');
}
if (ie)
document.write('<div id="con" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
if (ie||n6){
for (i = 0; i < n; i++)
document.write('<div id="dots'+i+'" style="position:absolute;top:0px;left:0px;width:'+i/2+'px;height:'+i/2+'px;background:#ff0000;font-size:'+i/2+'"></div>');
}
if (ie)
document.write('</div></div>');
(ns||n6)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
y = (ns||n6)?evnt.pageY+4 - window.pageYOffset:event.y+4;
x = (ns||n6)?evnt.pageX+1:event.x+1;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function animate(){
o=(ns||n6)?window.pageYOffset:0;
if (ie)con.style.top=document.body.scrollTop;
for (i = 0; i < n; i++){
var temp1 = eval(d+a+"dots"+i+n6r+s);

randcolours = colours[Math.floor(Math.random()*colours.length)];
(ns)?temp1.bgColor = randcolours:temp1.background = randcolours;
if (i < n-1){
var temp2 = eval(d+a+"dots"+(i+1)+n6r+s);
temp1.top = parseInt(temp2.top);
temp1.left = parseInt(temp2.left);
}
else{
temp1.top = y+o;
temp1.left = x;
}
}
setTimeout("animate()",10);
}
animate();
// -->
</script>

//Comment trail script- By Kurt (kurt.grigg@virgin.net)

//Script featured on Dynamic Drive

//Visit http://www.dynamicdrive.com for this script and more

colours=new Array('#ff0000','#00ff00','#ffffff','#ff00ff','#ffa500','#ffff00','#00ff00','#ffffff','ff00ff')

n = 10;

y = 0;

x = 0;

n6=(document.getElementById&&!document.all);

ns=(document.layers);

ie=(document.all);

d=(ns||ie)?'document.':'document.getElementById("';

a=(ns||n6)?'':'all.';

n6r=(n6)?'")':'';

s=(ns)?'':'.style';

if (ns){

for (i = 0; i < n; i++)

document.write('<layer name="dots'+i+'" top=0 left=0 width='+i/2+' height='+i/2+' bgcolor=#ff0000></layer>');

}

if (ie)

document.write('<div id="con" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

if (ie||n6){

for (i = 0; i < n; i++)

document.write('<div id="dots'+i+'" style="position:absolute;top:0px;left:0px;width:'+i/2+'px;height:'+i/2+'px;background:#ff0000;font-size:'+i/2+'"></div>');

}

if (ie)

document.write('</div></div>');

(ns||n6)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){

y = (ns||n6)?evnt.pageY+4 - window.pageYOffset:event.y+4;

x = (ns||n6)?evnt.pageX+1:event.x+1;

}

(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;

function animate(){

o=(ns||n6)?window.pageYOffset:0;

if (ie)con.style.top=document.body.scrollTop;

for (i = 0; i < n; i++){

var temp1 = eval(d+a+"dots"+i+n6r+s);

randcolours = colours[Math.floor(Math.random()*colours.length)];

(ns)?temp1.bgColor = randcolours:temp1.background = randcolours;

if (i < n-1){

var temp2 = eval(d+a+"dots"+(i+1)+n6r+s);

temp1.top = parseInt(temp2.top);

temp1.left = parseInt(temp2.left);

}

else{

temp1.top = y+o;

temp1.left = x;

}

setTimeout("animate()",10);

}

animate();

// -->

</script>

Всё. Материал подготовлен Apocalypse

Метки: Javascript Искры Курсор Эффект

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Читайте также:

Вы точно не робот?

3 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

Гость

Vlad

3 лет назад

Какой-то очень старый код, судя по виду

Ответить

Редактор

truenerins

3 лет назад

Ответить на Vlad

Просто он на чистом js в основном написан. Сейчас все больше по библиотекам разным...
Но код действительно с 2015 года как минимум.

Ответить

Гость

Vlad

3 лет назад

Какой-то старый js

Ответить

Apocalypse

Убрал снег

2023-03-12 12:00:44

topka

@Apocalypse, теперь сайт летает на моб устройствах.

2023-03-12 12:15:01

Всевидящее око

Новый комментарий от пользователя Apocalypse: «Внёс изменения в скрипт. Теперь сообщения добавляются от группы "Пользователи". Чтобы отправка заработала, изучи новый пункт 5 в описании к материалу. Прикреплённый архив также был перезалит» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-12 14:28:57

Всевидящее око

Новый комментарий от пользователя Apocalypse: «Скрипт доработан. Архив перезалит. В описание внесён новый 5-й пункт, исправляющий проблему с отправкой у группы "Пользователи"» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-12 14:30:05

Всевидящее око

Новый комментарий от пользователя topka: «Ещё заметил что что там кнопка смайлики не реагирует, не открывается модаль окно.😀
Спасибо за исправления.» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-12 15:23:20

Всевидящее око

Новый комментарий от пользователя Apocalypse: «Я щас немного поломал голову с PDA версией. Там хоть и есть оператор, отвечающий за модер панель, но он не работает. Хотел использовать родной скрипт удаления материалов от uCoz, так он работает через ID материала, а в PDA версии даже нет нужного оператора 😐» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-12 18:30:51

Всевидящее око

Новый комментарий от пользователя Apocalypse: «Пожалуйста!» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-12 18:31:02

Всевидящее око

Новый комментарий от пользователя Apocalypse: «Переписал часть скрипта и смог победить. Теперь работает как редактирование, так и удаление материалов как в обычной, так и в PDA версии» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-12 20:27:24

Всевидящее око

Новый комментарий от пользователя topka: «Работает) еще раз спасибо вам =)

А можно ли как-то сделать так чтобы каждый автор своего материала смог удалить свои комментарии или редактировать, а то только админ или модер может) это очень большой минус» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-12 21:52:40

Всевидящее око

Новый комментарий от пользователя Apocalypse: «К сожалению, такие права не позволяет выдать система uCoz... Для Гостевой книги нет возможности редактирования и удаления сообщений для обычных пользователей. На то она и Гостевая книга» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-13 11:00:12

......

Для публикации сообщений в чате необходимо авторизоваться

Эффект искр при движении курсора на Javascript

Читайте также:

Посетители сайта

Панель управления

Март 2023
Пн	Вт	Ср	Чт	Пт	Сб	Вс
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Эффект искр при движении курсора на Javascript

Читайте также:

Шикарная кнопочка с градиентом, который реагирует на курсор мышки с использованием CSS3 и Javascript

Необычная хаотичная галерея на HTML5 Canvas

Листья, кружащиеся в 3D на чистом CSS3

Посетители сайта

Панель управления