Мигающие рамки на Javascript by Bizon
1 2 3 |
.flashgroup{ border:3px solid green; } |
2#: Далее в самый низ блока перед закрывающимся /body устанавливаем скрипт:
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<script language="JavaScript1.2"> /* Flashing Border image script (credit must stay enclosed) By javascriptkit.com For this and over 400+ JavaScripts, Visit http://www.javascriptkit.com */ //specify color of flash var flashcolor="yellow" //specify speed (less is faster ie: 50) var speed=150 /////No need to edit below here//// var curborder=new Array() var increment=0 var flashobject=new Array() if (document.all||document.getElementById){ while (document.getElementById("flash"+increment)!=null){ flashobject[increment]=document.getElementById? document.getElementById("flash"+increment).style : eval("document.all.flash"+increment+".style") curborder[increment]=0 increment++ } } function flash(which){ if (curborder[which]==1){ flashobject[which].borderLeftColor=flashcolor flashobject[which].borderBottomColor=flashobject[which].borderRightColor } else if (curborder[which]==2){ flashobject[which].borderTopColor=flashcolor flashobject[which].borderLeftColor=flashobject[which].borderBottomColor } else if (curborder[which]==3){ flashobject[which].borderRightColor=flashcolor flashobject[which].borderTopColor=flashobject[which].borderLeftColor } else if (curborder[which]==4){ flashobject[which].borderBottomColor=flashcolor flashobject[which].borderRightColor=flashobject[which].borderTopColor } if (curborder[which]<=3) curborder[which]++ else curborder[which]=1 } if (document.all||document.getElementById){ for (z=0;z<flashobject.length;z++){ var temp='setInterval("flash('+z+')",'+speed+')' eval(temp) } } </script> |
3#: Теперь чтобы применить эффект мигающих границ внутри нашего блока, добавляем ID = "flash0" и класс = "flashgroup"> P.S. Если вы хотите добавить более одного эффекта то вот пример:
1 2 3 4 |
<img src="table.gif" id="flash0" class="flashgroup"> <img src="desk.gif" id="flash1" class="flashgroup"> <img src="table.gif" id="flash2" class="flashgroup"> <img src="desk.gif" id="flash3" class="flashgroup"> |