Главная » Файлы » Прочие скрипты » jQuery

Изображение с мигающей границей
24.06.14, 09:00:24



Добрый день.
Блуждая по просторам Интернета, обнаружил довольно не новый, но увлекательный скрипт - мигающие границы, то есть (бордюр), который хорошо подойдёт для украшения ваших картинок, а также текстовых файлов.
Но желательно слишком не увлекаться.



ДЕМО


И так приступим к установки:
Шаг 1:
Для начала в блоках между head /head вставляем скрипт:
Код
<style>  
  <!--  
  .flashgroup{  
  border:3px solid green;  
  }  
  -->  
  </style>


Шаг 2:
Далее в самый низ блока перед закрывающимся /body устанавливаем скрипт:
Код
<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>


Теперь чтобы применить эффект мигающих границ внутри нашего
Добавляем класс ID = "flash0" класс = "flashgroup">

Если вы хотите добавить более одного эффекта то вот пример:
Код
<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">


А также вы можете настроить цвет границы и вспышки, внутри Шаг 1 /и переменные внутри Шаг 2, соответственно.
Ну вроде и вся установка всем удачи.
Материал подготовил: Bizon
Источник:javascriptkit.com
Категория: jQuery | Добавил: Apocalypse | Теги: мигающей, границей, изображение
Просмотров: 392 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: