Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Плавное переливание
 
 автор: DelbI4   (30.04.2006 в 07:00)   письмо автору
 
 

Как сделать, при наведение на сылку, что бы она не сразу цвет меняла, а плавненько переливалась в другой цвет? :)

   
 
 автор: codexomega   (30.04.2006 в 07:16)   письмо автору
 
   для: DelbI4   (30.04.2006 в 07:00)
 

пример можно увидеть?

   
 
 автор: ruark   (30.04.2006 в 07:39)   письмо автору
 
   для: codexomega   (30.04.2006 в 07:16)
 

Ну, к примеру, это реализовано вот тут: http://vivasvat.ru/

   
 
 автор: DelbI4   (30.04.2006 в 08:36)   письмо автору
 
   для: ruark   (30.04.2006 в 07:39)
 

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

   
 
 автор: elenaki   (30.04.2006 в 16:17)   письмо автору
 
   для: DelbI4   (30.04.2006 в 08:36)
 


col = new Array()
col[0]="111111"
col[1]="111111"
col[2]="222222"
col[3]="333333"
col[4]="444444"
col[5]="555555"
col[6]="666666"
col[7]="777777"
col[8]="888888"
col[9]="999999"
col[10]="AAAAAA"
col[11]="BBBBBB"
col[12]="CCCCCC"
col[13]="DDDDDD"
col[14]="EEEEEE"
col[15]="FFFFFF"
col[16]="FFFFFF"
col[17]="DDDDDD"
col[18]="CCCCCC"
col[19]="BBBBBB"
col[20]="AAAAAA"
col[21]="999999"
col[22]="888888"
col[23]="777777"
col[24]="666666"
col[25]="555555"
col[26]="444444"
col[27]="333333"
col[28]="222222"
col[29]="111111"
col[30]="111111"
i_col=0
doani=1
var timer
var thislink
function animatelink() {
if (document.all) {
if (doani==1) {
if (i_col<=col.length-1) {
thislink.color=col[i_col]
i_col++
timer=setTimeout("animatelink()",50)
}
else {
i_col=0
timer=setTimeout("animatelink()",50)
}
}
else {
clearTimeout(timer)
}
}
}
function stopanimation() {
clearTimeout(timer)
thislink.color="#dadada"
doani=0

function startanimation(mylink) {
clearTimeout(timer)
thislink=eval("document.all."+mylink+".style")
doani=1
animatelink()



цвета можно менять

   
 
 автор: kaoz   (03.05.2006 в 12:58)   письмо автору
2.6 Кб
 
   для: DelbI4   (30.04.2006 в 07:00)
 

несовсем в тему но есть интересное решение на ксс для графических ссылок и меню:

вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>МУ “ЦЕНТРАЛИЗОВАННАЯ БУХГАЛТЕРИЯ КУЛЬТУРЫ МО ТУАПСИНСКИЙ РАЙОН”</title>
<style type="text/css">
<!--
body
  {
    font-family         : Verdana, Arial, Helvetica, sans-serif;
    font-size           : 10px;
    color               : #363636;
    margin-left         : 0px;
    margin-top          : 0px;
    margin-right        : 0px;
    margin-bottom       : 0px;
    background-image    : url(_images/bg.png);
  }
a:link, a:visited, a:active, a:hover
  {
    text-decoration     : none;
  }
a:hover
  {
    text-decoration     : underline;
  }
#menu
  {
    width               : 755px;
    height              : 33px;
    position            : relative;
    top                 : 8px;
    bottom              : 0px;
    left                : 1px;
    right               : 1px;
    background-image    : url(_images/btn.gif);
  }
#nav
  {
    height              : 33px;
    margin              : 0;
    padding             : 0;
    list-style          : none;
    overflow            : hidden;
    display             : inline;
  }
#nav li
  {
    margin              : 0; 
    padding             : 0;
    list-style          : none;
    display             : inline;
  }
#nav a
  {
    height              : 0px !important; 
    height /**/         : 33px; /* for IE5/Win only */
    padding             : 33px 0 0 0;
    float               : left;
    overflow            : hidden;
  }
#nav a:hover, #nav a:active
  {
    background-position : 0 -33px;
    text-decoration     : none;
  }
#nav a.selected
  {
    background-position : 0 -66px;
  }
#tlink-empty a, #tlink1 a, #tlink2 a
  {
    padding-right       : 1px;
    background          : url(btn.gif) top left repeat-x;
    display             : block;
  }
#tlink-empty a
  {
    width               : 754px;
  }
#tlink1 a
  {
    width               : 192px;
  }
#tlink2 a
  {
    width               : 204px;
  }
#blank a
  {
    width               : 1px;
    background-color    : #363636;
    display             : block;
  }
#nav_txt
  {
    font-weight         : bold;
    color               : #FFFFFF;
    margin-left         : 35px;
    margin-top          : -18px;
    position            : absolute;
    z-index             : 3;
  }
-->
</style>
</head>

<body>
  <div id="menu">
    <ul id="nav">
      <li id="tlink1"><a class="selected"><span id="nav_txt">ГЛАВНАЯ СТРАНИЦА</span></a></li>
      <li id="blank"><a></a></li>
      <li id="tlink2"><a href="#" style="cursor:pointer;"><span id="nav_txt">ИЗМЕНИТЬ РЕКВИЗИТЫ</span></a></li>
    </ul>
  </div>
</body>
</html>


и картинка в аттаче

для поставленной задачи картинку необходимо модернизировать так чтобы полоска с анимацией переходила из серого цвета в зеленый.

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования