Шлейфы курсора мышки на Blogger
Предлагаю несколько интересных идей, которые не сильно повредят блогу в плане дизайна, но немного добавят ему цвета и изюминки.
Радужные ссылки
При наведении мышкой на ссылку, она будет менять цвета.
Для тех, кто не любит совать нос в шаблон блога. Выручит HTML/JavaScript - гаджет. Вставляем в него код радуги:
<script src='//ledikovaleva.narod.ru/file/rainbow.js'/>Второй способ
Заходим в шаблон Тема/Изменить HTML. В шаблоне ищем строку код </head> с помощью сочетания клавиш Ctrl+F и перед ним устанавливаем скрипт тот же, что и в первом способе.
Третий способ
Третий способ
Вставляем код, предложенный ниже, в шаблон блога, перед тегом </head>:
Заходим в Панель инструментов/Тема/Изменить HTML. Ищем строчку ]]></b:skin>
И перед ним добавляем:
<script type='text/javascript'>
//<![CDATA[
function makeColor(){if(elmS==0){elmR=elmV;elmG=elmV;elmB=elmV}else{t1=elmV;t2=(255-elmS)*elmV/255;t3=elmH%60;t3=(t1-t2)*t3/60;if(elmH<60){elmR=t1;elmB=t2;elmG=t2+t3}else if(elmH<120){elmG=t1;elmB=t2;elmR=t1-t3}else if(elmH<180){elmG=t1;elmR=t2;elmB=t2+t3}else if(elmH<240){elmB=t1;elmR=t2;elmG=t1-t3}else if(elmH<300){elmB=t1;elmG=t2;elmR=t2+t3}else if(elmH<360){elmR=t1;elmG=t2;elmB=t1-t3}else{elmR=0;elmG=0;elmB=0}}elmR=Math.floor(elmR).toString(16);elmG=Math.floor(elmG).toString(16);elmB=Math.floor(elmB).toString(16);if(elmR.length==1)elmR="0"+elmR;if(elmG.length==1)elmG="0"+elmG;if(elmB.length==1)elmB="0"+elmB;elmH=elmH+rate;if(elmH>=360)elmH=0;return"#"+elmR+elmG+elmB}function ChangeColor(){objActive.style.color=makeColor()}function Mozilla_stopRainbowAnchor(a){if(act){if(objActive.nodeName=="A"){objActive.style.color=clrOrg;clearInterval(TimerID);act=0}}}function Mozilla_doRainbowAnchor(a){if(act==0){obj=a.target;while(obj.nodeName!="A"&&obj.nodeName!="BODY"){obj=obj.parentNode;if(obj.nodeName=="A"||obj.nodeName=="BODY")break}if(obj.nodeName=="A"&&obj.href!=""){objActive=obj;act=1;clrOrg=obj.style.color;TimerID=setInterval("ChangeColor()",100)}}}function stopRainbowAnchor(){if(act){if(objActive.tagName=="A"){objActive.style.color=clrOrg;clearInterval(TimerID);act=0}}}function doRainbowAnchor(){if(act==0){var a=event.srcElement;while(a.tagName!="A"&&a.tagName!="BODY"){a=a.parentElement;if(a.tagName=="A"||a.tagName=="BODY")break}if(a.tagName=="A"&&a.href!=""){objActive=a;act=1;clrOrg=objActive.style.color;TimerID=setInterval("ChangeColor()",100)}}}function stopRainbow(){if(act){objActive.style.color=clrOrg;clearInterval(TimerID);act=0}}function doRainbow(a){if(act==0){act=1;if(a)objActive=a;else objActive=event.srcElement;clrOrg=objActive.style.color;TimerID=setInterval("ChangeColor()",100)}}var rate=20;if(document.getElementById)window.onerror=new Function("return true");var objActive;var act=0;var elmH=0;var elmS=128;var elmV=255;var clrOrg;var TimerID;if(document.all){document.onmouseover=doRainbowAnchor;document.onmouseout=stopRainbowAnchor}else if(document.getElementById){document.captureEvents(Event.MOUSEOVER|Event.MOUSEOUT);document.onmouseover=Mozilla_doRainbowAnchor;document.onmouseout=Mozilla_stopRainbowAnchor}
//]]>
</script>
Как поменять курсор мышки на сайте
Вариант 1Заходим в Панель инструментов/Тема/Изменить HTML. Ищем строчку ]]></b:skin>
И перед ним добавляем:
body, a, a:hover {cursor: url(ссылка на картинку курсора), progress;}Сохраняем шаблон.
Картинка для курсора нужна небольшая.
1. На сайте www.cursors-4u.com можно найти огромное количество курсоров и шлейфов к ним с кодами, есть и для Blogger:
2. Сайт http://www.blog-switch.com/ предлагает установить на свой блог или сайт падающие предметы — цветы, бабочки и многое другое, причём с выключателем. Надоело посетителю блога это мелькающие яркое "безобразие" и вуаля - отключает.
Нажимаем на серую кнопку, переходим в режим просмотра, там же находится код. Коды добавляются на блог через: Дизайн-Добавить гаджет-HTML/JavaScript.
3. Сайт, тоже японский http://www.cursor-switch.com только здесь можно подыскать шлейфы курсора.
Нажимаем жёлтую кнопку и видим код.
Вариант 2
Заходим в Панель инструментов/Тема/Изменить HTML. Ищем строчку </head> и над ней вставляем код курсора.
Заходим в Панель инструментов/Тема/Изменить HTML. Ищем строчку </head> и над ней вставляем код курсора.
<style type="text/css">body, a, a:hover {cursor: url(ваша ссылка тут), progress;}</style>
Картинка так же должна быть маленькой.
Ресурсы с украшениями
3. Сайт, тоже японский http://www.cursor-switch.com только здесь можно подыскать шлейфы курсора.
Хвостики курсора мыши
Все коды вставляются через Дизайн-Добавить гаджет-HTML/JavaScript - вставляем, сохраняем.Звёздная пыль
<!-- Magic dust BEGIN -->
<script type='text/javascript'>
// <![CDATA[
var colour="#13baf1";
var sparkles=50;
/****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
<!-- Magic dust END -->
Красным выделила в коде цвет снега.Белый снежок
<script type="text/javascript" src="http://uguide.ru/js/script/snowcursor.min.js"></script>
Белый снег со снежинкой-курсором
<script type="text/javascript" src="http://uguide.ru/js/script/snowcursor.min.js"> </script> <style type="text/css"> body, a:hover {cursor: url(http://uguide.ru/js/script/snowcurser.cur), url(http://uguide.ru/js/script/snowcurser.png), auto !important;} </style>
Текст за курсором
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #9B1750;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style><br />
<script type="text/javascript">
;(function(){
var msg = "Доброго дня";
var size = 22;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.3;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>
В коде можно поменять цвет букв – выделила красным цветом.Оранжевым – шрифт
Синим – текст меняем на свой.
Синим – текст меняем на свой.
Не всем посетителям нравятся шлейфы, иногда они сильно мешают, например когда копируешь код, шлейф мешает аккуратно скопировать
ОтветитьУдалитьСогласна, но можно установить их только на время какого либо праздника.
Удалить