Jump to content
  • 0

Всплывающие подсказки tooltip на javascript, работа с кукисами, библиотека эффектов

prototype

Asked by prototype,

 Share

Question

prototype Explorer

prototype

Posted
Posted (edited)

Всплывающие подсказки tooltip на javascript:

Все началось с того что я решил найти готовый движок всплывающих подсказок tooltip.

Не найдя того что мне нужно, я был вынужден написать свой движок.

Тщательно протестировал его на старых браузерах, так что можете быть уверенными что код работает во всех браузерах, а в браузере IE аж начиная с версии 5,5

Теперь разберем как работает код!

Подробное описание:

В чем вообще преимущество данного движка?

В том что не нужно ничего программировать и разбираться в коде

Давайте сразу разберем пример:

Допустим у вас есть html код в котором есть теги у которых есть id


<br /><br /><br /><br /><br />
<div id="lololo">наведи сюда мышь 1</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="lololox">наведи сюда мышь 2</div>
<br /><br /><br /><br /><br />

Как сделать так чтобы при навидении на div-ы с id равными lololo и lololox всплывали подсказки причем для каждого id своя подсказка?

Для начала подключите код движка желательно перед тегом </head>

Можете поместить этот движок в отдельный файл, например tooltip.js без тегов и подключать его к своему сайту:


var tooltip = {
	create:function (args) {
		args = args || {};
		var default_args = {
			'img':true,
			'border':'1px solid #000000',
			'bg_img_1':'imgtool/tooltip-1.png',
			'bg_img_2':'imgtool/tooltip-2.png',
			'bg_img_3':'imgtool/tooltip-3.png',
			'bg_img_4':'imgtool/tooltip-4.png',
			'bg_img_5':'imgtool/tooltip-5.png',
			'bg_img_6':'imgtool/tooltip-6.png',
			'bg_img_7':'imgtool/tooltip-7.png',
			'bg_img_8':'imgtool/tooltip-8.png',
			'bg_color':'#ffffff',
			'width':19,
			'height':15,
			'font':12,
			'font_color':'#000000',
			'id_el':[],
			'id_txt':[],
			'pos':'bottomright',
			't':10,
			'l':15,
			'timer_on':30,
			'speed_on':5,
			'timer_off':30,
			'speed_off':5,
			'alpha_end':100
		}

		for(var index in default_args) {
			if(typeof args[index] == "undefined") args[index] = default_args[index];
		}

		var ie = window.navigator.appName=='Microsoft Internet Explorer' ? true : false;

		var el;
		el= document.createElement('div');
		el.setAttribute('id', 'tooltip_panel');
		el.style.position='absolute';
		el.style.zIndex=30;
		el.style.top='0px';
		el.style.left='0px';
		el.style.visibility='hidden';
		el.style.display='none';
		document.body.appendChild(el);

		var el_m=[];
		for(var i=0;i<8;i++) {
			if(args['img']) {
				if(ie && args['bg_img_'+(i+1)].toLowerCase().indexOf('.png')!= -1) {
					switch(i) {
						case 0:
							el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_1']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
						break;
						case 1:
							el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_2']+'\',sizingMethod=\'scale\'); height:'+args['height']+'px; font-size:1px;';
						break;
						case 2:
							el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_3']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
						break;
						case 3:
							el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_4']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; font-size:1px;';
						break;
						case 4:
							el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_5']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; font-size:1px;';
						break;
						case 5:
							el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_6']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
						break;
						case 6:
							el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_7']+'\',sizingMethod=\'scale\'); height:'+args['height']+'px; font-size:1px;';
						break;
						case 7:
							el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_8']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
						break;
					}
				}
				else {
					switch(i) {
						case 0:
							el_m[i]='background-image:url('+args['bg_img_1']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
						break;
						case 1:
							el_m[i]='background-image:url('+args['bg_img_2']+'); height:'+args['height']+'px; font-size:1px;';
						break;
						case 2:
							el_m[i]='background-image:url('+args['bg_img_3']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
						break;
						case 3:
							el_m[i]='background-image:url('+args['bg_img_4']+'); width:'+args['width']+'px; font-size:1px;';
						break;
						case 4:
							el_m[i]='background-image:url('+args['bg_img_5']+'); width:'+args['width']+'px; font-size:1px;';
						break;
						case 5:
							el_m[i]='background-image:url('+args['bg_img_6']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
						break;
						case 6:
							el_m[i]='background-image:url('+args['bg_img_7']+'); height:'+args['height']+'px; font-size:1px;';
						break;
						case 7:
							el_m[i]='background-image:url('+args['bg_img_8']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
						break;
					}
				}
			}
			else {
				switch(i) {
					case 0:
						el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
					break;
					case 1:
						el_m[i]='background-color:'+args['bg_color']+'; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
					break;
					case 2:
						el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
					break;
					case 3:
						el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; font-size:1px; overflow:hidden;';
					break;
					case 4:
						el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; font-size:1px; overflow:hidden;';
					break;
					case 5:
						el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
					break;
					case 6:
						el_m[i]='background-color:'+args['bg_color']+'; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
					break;
					case 7:
						el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
					break;
				}
				el.style.border=args['border'];
			}
		}

		el.innerHTML=''+
		'<table border="0" cellpadding="0" cellspacing="0">'+
		'<tr>'+
		'<td><div style="'+el_m[0]+'"></div></td>'+
		'<td><div style="'+el_m[1]+'"></div></td>'+
		'<td><div style="'+el_m[2]+'"></div></td>'+
		'</tr>'+
		'<tr>'+
		'<td style="'+el_m[3]+'"></td>'+
		'<td style="font-family:Tahoma,Verdana,Arial,Times New Roman,Helvetica,sans-serif; font-size:'+args['font']+'px; color:'+args['font_color']+'; background-color:'+args['bg_color']+'; white-space:nowrap;" id="td_tooltip_txt"></td>'+
		'<td style="'+el_m[4]+'"></td>'+
		'</tr>'+
		'<tr>'+
		'<td><div style="'+el_m[5]+'"></div></td>'+
		'<td><div style="'+el_m[6]+'"></div></td>'+
		'<td><div style="'+el_m[7]+'"></div></td>'+
		'</tr>'+
		'</table>';

		this.param.pos=args['pos'];
		this.param.l=args['l'];
		this.param.t=args['t'];
		this.param.timer_on=args['timer_on'];
		this.param.speed_on=args['speed_on'];
		this.param.timer_off=args['timer_off'];
		this.param.speed_off=args['speed_off'];
		this.param.alpha_end=args['alpha_end'];
		this.param.id_el=args['id_el'];
		this.param.id_txt=args['id_txt'];

		this.param.start();
	},
	get_elm:function (n) {
		switch(n) {
			case 1:
				return document.getElementById('tooltip_panel');
			break;
			case 2:
				return document.getElementById('td_tooltip_txt');
			break;
		}
	},
	param: {
		pos:'auto',
		t:0,
		l:0,
		timer_on:0,
		speed_on:0,
		timer_off:0,
		speed_off:0,
		alpha:0,
		alpha_end:0,
		id_el:[],
		id_txt:[],
		get_tiou:0,
		start: function () {
			var tooltip_el;
			window.onload = function() {
				for(var i=0;i<tooltip.param.id_el.length;i++) {
					tooltip_el=document.getElementById(tooltip.param.id_el[i]);
					tooltip_el.onmousemove=function (e) {
						tooltip.onmmo(e);
					}
					tooltip_el.onmouseover=function (e) {
						tooltip.onmov(e,this.id);
						//tooltip.onmov(e,this.getAttribute('id'));
					}
					tooltip_el.onmouseout=function () {
						tooltip.onmou();
					}
				}
			}
		}
	},
	onmmo: function (e) {
		var xy = this.getp(e);
		var p = this.param.pos;
		var cxy = this.getc();
		//this.get_elm(1).clientWidth
		if(p=='auto') {
			if(xy.x>cxy.x && xy.y<cxy.y) {//topright —> bottomleft
				this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px';
				this.get_elm(1).style.top=xy.y+this.param.t+'px';
			}
			else if(xy.x>cxy.x && xy.y>cxy.y) {//bottomright —> topleft
				this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px';
				this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px';
			}
			else if(xy.x<cxy.x && xy.y>cxy.y) {//bottomleft —> topright
				this.get_elm(1).style.left=xy.x+this.param.l+'px';
				this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px';
			}
			else if(xy.x<=cxy.x && xy.y<=cxy.y) {//topleft —> bottomright
				this.get_elm(1).style.left=xy.x+this.param.l+'px';
				this.get_elm(1).style.top=xy.y+this.param.t+'px';
			}
		}
		else if(p=='topleft' || p=='lefttop') {
			this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px';
			this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px';
		}
		else if(p=='topright' || p=='righttop') {
			this.get_elm(1).style.left=xy.x+this.param.l+'px';
			this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px';
		}
		else if(p=='bottomleft' || p=='leftbottom') {
			this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px';
			this.get_elm(1).style.top=xy.y+this.param.t+'px';
		}
		else if(p=='bottomright' || p=='rightbottom') {
			this.get_elm(1).style.left=xy.x+this.param.l+'px';
			this.get_elm(1).style.top=xy.y+this.param.t+'px';
		}
	},
	onmov: function (e,atr) {
		this.noerr();
		this.get_elm(1).style.visibility='visible';
		this.get_elm(1).style.display='block';
		this.settxt(atr);
		this.param.alpha=0;
		tooltip.show();
		this.onmmo(e);
	},
	onmou: function () {
		this.noerr();
		tooltip.hide();
	},
	settxt: function (atr) {
		for(var x in tooltip.param.id_el) {
			if(tooltip.param.id_el[x]===atr) {
				this.get_elm(2).innerHTML=tooltip.param.id_txt[x];
			}
		}
	},
	show: function () {
		this.get_elm(1).style.opacity=this.param.alpha*.01;
		this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha+')';
		this.param.alpha=this.param.alpha+this.param.speed_on;
		if(this.param.alpha<this.param.alpha_end) {
			this.param.get_tiou=setTimeout('tooltip.show();',this.param.timer_on);
		}
		else {
			this.get_elm(1).style.opacity=this.param.alpha_end*.01;
			this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha_end+')';
			this.param.alpha=this.param.alpha_end;
		}
	},
	hide: function () {
		this.get_elm(1).style.opacity=this.param.alpha*.01;
		this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha+')';
		this.param.alpha=this.param.alpha-this.param.speed_off;
		if(this.param.alpha>0) {
			this.param.get_tiou=setTimeout('tooltip.hide();',this.param.timer_off);
		}
		else {
			this.get_elm(1).style.opacity=this.param.alpha_end*.01;
			this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha_end+')';
			this.param.alpha=0;
			this.get_elm(1).style.visibility='hidden';
			this.get_elm(1).style.display='none';
		}
	},
	noerr: function () {
		clearTimeout(this.param.get_tiou);
	},
	getp: function (e) {
		var x=0, y=0;
		if(!e) {e = window.event;}
		if(e.pageX || e.pageY) {
			x=e.pageX;
	  		y=e.pageY;
		}
		else if(e.clientX || e.clientY) {
			x=e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft)-document.documentElement.clientLeft;
	  		y=e.clientY+(document.documentElement.scrollTop || document.body.scrollTop)-document.documentElement.clientTop;
		}
		return {"x":x, "y":y};
	},
	getc: function () {
		function getClientWidth() {
			return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
		}
		function getClientHeight() {
			return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
		}
		function getBodyScrollTop() {
			return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
		}
		function getBodyScrollLeft() {
			return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || (document.body && document.body.scrollLeft);
		}
		function getClientCenterX() {
			return parseInt(getClientWidth()/2)+getBodyScrollLeft();
		}
		function getClientCenterY() {
			return parseInt(getClientHeight()/2)+getBodyScrollTop();
		}
		var x=0, y=0;
		x=getClientCenterX();
		y=getClientCenterY();
		return {"x":x, "y":y};
	}
};

Дальше после подключенного движка можно его запускать с помощью следующего кода:


<script type="text/javascript">
		tooltip.create({
			'img':true,
			'border':'1px solid #000000',
			'bg_img_1':'imgtool/tooltip-1.png',
			'bg_img_2':'imgtool/tooltip-2.png',
			'bg_img_3':'imgtool/tooltip-3.png',
			'bg_img_4':'imgtool/tooltip-4.png',
			'bg_img_5':'imgtool/tooltip-5.png',
			'bg_img_6':'imgtool/tooltip-6.png',
			'bg_img_7':'imgtool/tooltip-7.png',
			'bg_img_8':'imgtool/tooltip-8.png',
			'bg_color':'#ffffff',
			'width':19,
			'height':15,
			'font':12,
			'font_color':'#000000',
			'id_el':[
					'lololo',
					'lololox'
				],
			'id_txt':[
					'Это всплывающая подсказка<br />новая строка в ней',
					'Еще одна подсказка!!!!!!!'
				]
			'pos':'bottomright',
			't':10,
			'l':15,
			'timer_on':30,
			'speed_on':5,
			'timer_off':30,
			'speed_off':5,
			'alpha_end':100
					});
</script>

Давайте теперь посмотрим для чего нужен какой параметр:


'img' - может принимать значение как true так и false
при установке true рамка подсказок формируется из изображений, при false из обычного бордюра

'border' - если img установлен false то здесь пишутся параметры толщина цвет бордюра рамки всплывающей подсказки аналогично как в css

Если параметр img установлен true, то для формирования рамки всплывающих подсказок будут использованы следующие изображение
'bg_img_1' - изображение левого верхнего угла рамки
'bg_img_2' - изображение верхнего центр рамки
'bg_img_3' - изображение правого верхнего угла рамки
'bg_img_4' - изображение левого центра рамки
'bg_img_5' - изображение правого центра рамки
'bg_img_6' - изображение левого нижнего угла рамки
'bg_img_7' - изображение нижнего центра рамки
'bg_img_8' - изображение правого нижнего угла рамки

'bg_color' - цвет фона рамки

Если параметр img установлен true, то размеры угловых картинок рамки будут устанавливаться в свойстве width и height, если параметр img установлен false то параметры width и height будут отступом между текстом и рамкой, соответственно width слева и справа, height сверху и снизу рамки.
'width' - ширина угловых изображений рамки, либо отступ слева и справа от рамки, в зависимости от установок параметра img
'height' - высота угловых изображений рамки, либо отступ сверху и снизу от рамки, в зависимости от установок параметра img

'font' - размер шрифта подсказки в пикселях

'font_color' - цвет текста подсказки

'id_el' - массив идентификаторов id для которых устанавливается подсказка

'id_txt' - массив текста подсказок, для каждого id из параметра id_el своя подсказка в той же последовательности.

Подсказка может всплывать слева внизу от курсора, справа внизу, слева сверху, справа сверху, либо автоматически будет вычисляться оптимальное положение подсказки.
'pos' - Подсказка позиционируется автоматически - 'auto', всплывает слева вверху от курсора - 'topleft' либо 'lefttop', всплывает справа сверху от курсора - 'topright' либо 'righttop', всплывает слева внизу от курсора - 'bottomleft' либо 'leftbottom', всплывает справа внизу от курсора - 'bottomright' либо 'rightbottom'

't' - отступ рамки подсказки от курсора в пикселях слева либо справа в зависимости от установок параметра pos

'l' - отступ рамки подсказки от курсора в пикселях сверху либо снизу в зависимости от установок параметра pos

'timer_on' - скорость появления подсказки в миллисекундах

'speed_on' - скорость появления подсказки от 1 - до значения параметра alpha_end

'timer_off' - скорость исчезновения подсказки в миллисекундах

'speed_off' - скорость исчезновения подсказки от значения параметра alpha_end - до 1

'alpha_end' - прозрачность отображаемой подсказки от 0 до 100, где 0 полная прозрачность

Большинство параметров не требуют установки, поэтому можно упростить наш скрипт и написать его так:


<script type="text/javascript">
		tooltip.create({
			'id_el':[
					'lololo',
					'lololox'
				],
			'id_txt':[
					'Это всплывающая подсказка<br />новая строка в ней',
					'Еще одна подсказка!!!!!!!'
				]
			'pos':'auto'
					});
</script>

можно написать и так, обратите внимание что подсказка представляет собой изображение!


<script type="text/javascript">
		tooltip.create({
			'img':false,
			'border':'1px solid #000000',
			'id_el':[
					'lololo',
					'lololox'
				],
			'id_txt':[
					'<img src="http://nagon.net/uploads/images/26/26-bfig739m1.jpg" border="0" />',
					'Еще одна подсказка!!!!!!!'
				]
			'pos':'bottomright',
					});
</script>

Работа с cookie:

Скрипт работает во всех браузерах включая IE начиная с версии 5.5

Для начала подключите код движка желательно перед тегом </head>

Можете поместить этот движок в отдельный файл, например cooker.js без тегов и подключать его к своему сайту:


var cooker = {
	set: function(cookie_name, cookie_value, cookie_expires, cookie_path, cookie_domain, cookie_secure) {
		if(cookie_name!==undefined) {
			cookie_expires=cookie_expires || 0;
			var expire_date = new Date;
			expire_date.setTime(expire_date.getTime() + (cookie_expires*1000));
			document.cookie = cookie_name + "=" + escape(cookie_value)+'; ' + 
			((cookie_expires === undefined) ? '' : 'expires=' + expire_date.toGMTString()+'; ') +
			((cookie_path === undefined) ? 'path=/;' : 'path='+cookie_path+'; ') +
			((cookie_domain === undefined) ? '' : 'domain='+cookie_domain+'; ') +
			((cookie_secure === true) ? 'secure; ' : '');
		}
	},
	get: function(cookie_name) {
		var cookie = document.cookie, length = cookie.length;
		if(length) {
			var cookie_start = cookie.indexOf(cookie_name + '=');
			if(cookie_start != -1) {
				var cookie_end = cookie.indexOf(';', cookie_start);
				if(cookie_end == -1) {
					cookie_end = length;
				}
				cookie_start += cookie_name.length + 1;
				return unescape(cookie.substring(cookie_start, cookie_end));
			}
		}
	},
	erase: function(cookie_name) {
		cooker.set(cookie_name, '', -1);
	},
	test: function() {
		cooker.set('test_cookie', 'test', 10);
		var work = (cooker.get('test_cookie') === 'test') ? true : false;
		cooker.erase('test_cookie');
		return work;
	}
};

Создание cookie:


cooker.set('name', 'value', 60); //устанавливаю кукисы с именем name, значением value на 60 секунд

Устанавливать cookie можно с большем числом параметров, например так:


cooker.set('name', 'value', 60, '/', 'nagon.net');

Или так:


cooker.set('name', 'value', 60, '/', 'nagon.net', true);

Получение параметра из cookie:


var cookie_value;
cookie_value = cooker.get('name');
alert(cookie_value);

Можно и так:


alert(cooker.get('name'));

Удаление cookie:


cooker.erase('name');

Проверяем включены ли в браузере cookie:


var cookie_test;
cookie_test = cooker.test();
if(cookie_test) {
alert('Все нормально, в вашем браузере кукисы работают');
}
else {
alert('Плохо, в вашем браузоре кукисы отключены');
}

Или и так:


if(cooker.test()) {
alert('Все нормально, в вашем браузере кукисы работают');
}
else {
alert('Плохо, в вашем браузоре кукисы отключены');
}

Описание параметров при создании cookie:

Имя

Произвольное имя параметра, определенного в cookie. Здесь вы можете использовать любую строку, лишь бы в ней не было пробелов, запятых и двоеточий. В том случае, когда имя должно содержать перечисленные выше символы, используйте кодировку URL

Значение

Текстовая строка значений параметров. В этой строке не должно быть пробелов, запятых и двоеточий, поэтому вы должны использовать для нее кодировку URL

expires

Дата автоматического удаления cookie по Гринвичу. Если эта дата не указана, а параметр expires отсутствует, cookie будет удалено сразу после того, как браузер закончит сеанс связи с сервером Web

path

Часть адреса URL, задающая путь к документу HTML, для которой действует данный cookie. Если этот параметр не указан, то по умолчанию используется адрес URL документа HTML, где был установлен cookie

domain

Доменная часть адреса URL, для которой действует данный cookie. Если этот параметр не указан, то по умолчанию используется доменный адрес URL документа HTML, где был установлен cookie

secure

Если указано это поле, данные cookie необходимо предавать только с использованием защищенного протокола SSL. Такой протокол используется серверами HTTPS

NRMSLib - библиотека скриптовых эффектов

- эффект снега (снег на сайт)

- эффект дождя на javascript (дождь на сайт)

- эффект пузырей на javascript (пузыри на сайт)

- эффект сквозь вселенную на javascript

- эффект печатающегося текста как в матрице на javascript

- эффект матрицы на javascript

- предварительная загрузка сайта на javascript

- раздвижная панель на javascript

- выезжающая панель на javascript

- панель вверху на javascript

- панели аккордеон на javascript

- прогресс бар на javascript

- показ картинок на javascript

- работа с кукиесами на javascript

- свой чат на javascript

- звук на сайт на javascript

- готовые функции на javascript

и т.д.

Все описанные выше скрипты с примерами собраны в архив:

Скачать архив с примерами

Скачать архив с примерами (зеркало)

Скачать архив с примерами (зеркало)

Edited by prototype
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0
Vlad Explorer

Vlad

Posted
Posted

Вы привели слишком много кода, разбираться в котором нет никакого желания. Если хотите чтобы вам помогли, сделайте работающую страницу и укажите ссылку на неё.

Link to comment
Share on other sites
  • 0
Nekromancer Explorer

Nekromancer

Posted
Posted (edited)

Вы привели слишком много кода, разбираться в котором нет никакого желания. Если хотите чтобы вам помогли, сделайте работающую страницу и укажите ссылку на неё.

Я так понимаю человек сам пытается предложить свои скрипты для пользования, обозвав их "лучшими", к сожалению пролистав страницу, я таковых не заметил.

Edited by Nekromancer
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept