	Покупка	Продажа	Межбанк	НБУ
USD	42.400	42.483	42.085 / 42.095	41.940
EUR	44.200	44.411	43.920 / 43.940	43.748
GBP	53.050	53.154	---	52.656

Для Сайта
Slide Show JavaScript

Slide Show JavaScript

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

&lt;SCRIPT&gt;
var slideShowSpeed = 3000
var crossFadeDuration = 3
var Pic = new Array() 
Pic[0] = '/img/site/java_slideshow/1.jpg'
Pic[1] = '/img/site/java_slideshow/2.jpg'
Pic[2] = '/img/site/java_slideshow/3.jpg'
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i &lt; p; i++){
 preLoad[i] = new Image()
 preLoad[i].src = Pic[i]
}
function runSlideShow(){
 if (document.all){
 document.images.SlideShow.style.filter="blendTrans(duration=2)"
 document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
 document.images.SlideShow.filters.blendTrans.Apply() 
 }
 document.images.SlideShow.src = preLoad[j].src
 if (document.all){
 document.images.SlideShow.filters.blendTrans.Play()
 }
 j = j + 1
 if (j &gt; (p-1)) j=0
 t = setTimeout('runSlideShow()', slideShowSpeed)
}
&lt;/SCRIPT&gt;

Здесь
1.jpg, 2.jpg, 3.jpg - последовательно выводящиеся картинки из папки /img/site/java_slideshow/
var slideShowSpeed = 3000 время задержки вывода картинок.
blendTrans(duration =.. crossFadeDuration = изменение яркости при выводе картинок, что устанавливает параметр задержки и яркости.

Чтобы активизировать ваше слайдшоу в тег <Body> вставьте следующий параметр <BODY.. onload = runSlideShow() а в том месте где будут непосредственно выводиться картинки нужно вставить: <IMG class=img name=SlideShow src="/img/site/java_slideshow/1.jpg">

Далее я приведу пример Java скрипта который меняет яркость картинки при наведении на неё курсора мыши:

&lt;SCRIPT&gt; 
nereidFadeObjects = new Object(); 
nereidFadeTimers = new Object(); 
function nereidFade(object, destOp, rate, delta){ 
if (!document.all) 
return 
if (object != "[object]"){ 
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); 
return; 
} 
clearTimeout(nereidFadeTimers[object.sourceIndex]); 
diff = destOp-object.filters.alpha.opacity; 
direction = 1; 
if (object.filters.alpha.opacity &gt; destOp){ 
direction = -1; 
} 
delta=Math.min(direction*diff,delta); 
object.filters.alpha.opacity+=direction*delta; 
if (object.filters.alpha.opacity != destOp){ 
nereidFadeObjects[object.sourceIndex]=object; 
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate); 
 } } 
&lt;/SCRIPT&gt;

Чтобы применить скрипт к конкретной картинке необходимо вставить следующий код:

Чисел много, но всё просто - исходная прозрачность картинки здесь - alpha(opacity=60) , параметры изменения яркости задаются конечной и начальной прозрачностью альфа фильтра в %: nereidFade(this,100,30,10) , а третье число это шаг её изменения ( чем больше шаг - тем быстрее изменение, здесь при наведении прозрачность будет расти с 30 до 100 % с шагом +10 при наведении:onmouseover и после наведения мыши: onmouseout будет падать с 50 до 25 % )

Теперь дело только за выбором картинок, и ваши посетители будут приятно удивлены как вам удалось так оригинально оформить веб страничку..

Следующий скрипт плавно изменяет цвет ссылки при наведении на неё курсора:

<script>document.onmouseover = domouseover;
document.onmouseout = domouseout;
function domouseover() {
 if(document.all){
 srcElement = window.event.srcElement;
 if (srcElement.className.indexOf("fade") > -1) {
 var linkName = srcElement.name;
 fadein(linkName);
 } } 
}
function domouseout() {
 if (document.all){
 srcElement = window.event.srcElement;
 if (srcElement.className.indexOf("fade") > -1) {
 var linkName = srcElement.name;
 fadeout(linkName);
 } }
}
function makearray(n) {
 this.length = n;
 for(var i = 1; i <= n; i++)
 this[i] = 0;
 return this;
}
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
 hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
function hex(i) {
 if (i < 0)
 return "00";
 else if (i > 255)
 return "ff";
 else
 return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
function setbgColor(r, g, b, element) {
 var hr = hex(r); var hg = hex(g); var hb = hex(b);
 element.style.color = "#"+hr+hg+hb;
}
function fade(sr, sg, sb, er, eg, eb, step, direction, element){
 for(var i = 0; i <= step; i++) {
setTimeout("setbgColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+ ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
 }
}
function fadeout(element) {
 fade(255,0,0, 0,0,255, 20, 1, element);
}
function fadein(element) {
 fade(0,0,255, 255,0,0, 20, 1, element);
}
</script>

Цвет задаётся в конце скрипта в RGB формате:
function fadeout(element) { fade(255,0,0, 0,0,255, 20, 1, element); }
function fadein(element) { fade(0,0,255, 255,0,0, 20, 1, element); }

После вызова скрипта для изменения цвета ссылки в её тег следует вставить параметр:
<b><a href="http:" name="fading_link1" class="fade"> Ссылка 1</a><br>
<a href="http:" name="fading_link2" class="fade"> Ссылка 2</a></b>

Created/Updated: 25.05.2018

☕ Якщо ви вважаєте ці поради українською корисними, можете підтримати автора і, звичайно, отримуйте задоволення!

PayPal Donate

📩 Шановні, якщо хочете додати або відредагувати, надішліть повідомлення через форму контакту.

Back