INPUT смена CSS (fade)

Тема в разделе "Другие языки", создана пользователем katrukhin, 28 июл 2010.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. katrukhin

    katrukhin

    Регистр.:
    6 июн 2010
    Сообщения:
    168
    Симпатии:
    22
    При наведении на инпут плавная смена background
    Желательно JS прописаный в теге <input>
     
  2. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    с jquery
    HTML:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $("input").hover(
                function() {
                    $(this).stop().animate({ "background-color": "#FF0000"}, 1000);
                },
                function() {
                    $(this).stop().animate({ "background-color": "#FFFFFF" }, 1000);
                }
            );
        });
        </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
    
    <form action="" method="get">
        <input name="test" type="text">
        <input name="test" type="text">
        <input name="" type="submit">
    </form>
    
    </body>
    </html>
    
     
    katrukhin нравится это.
  3. katrukhin

    katrukhin

    Регистр.:
    6 июн 2010
    Сообщения:
    168
    Симпатии:
    22
    Спасибо...но не выходит тоже реализовать с картинкой.:(
    Вроде как фун-я animate в jQuery не реализует смену фона(картинки)
     
  4. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Просто JS

    Код:
    <html> 
    <head> 
    
    <style type="text/css"> 
      #fadeBtn {background-color:white; padding: 30px;} 
    </style> 
    
    <script>
    var sFadeStartColor = "#FFFFFF";  [COLOR="Gray"]      //начальный цвет (белый) [/COLOR]
    var sFadeFinishColor = "#FF4500"; [COLOR="#808080"]  //конечный цвет (оранжево-красный)[/COLOR]
    
    [COLOR="#808080"]//разбиваем RGB-триплеты на красный, зеленый и синий в виде массива[/COLOR]
    var aRGBStart = sFadeStartColor.replace("#","").match(/.{2}/g); 
    var aRGBFinish = sFadeFinishColor.replace("#","").match(/.{2}/g);
    
    var t=10; [COLOR="#808080"]//t - время задержки в миллисекундах [/COLOR]
    [COLOR="#808080"]
    /* n - количество промежуточных цветов, включая конечный 
    (т.е. между начальным и конечным цветами будет n-1 цвет) */[/COLOR]
    
    var n = 50;
    
    var i = 0; [COLOR="#808080"]//индекс текущего промежуточного цвета [/COLOR]
    
    function fade()
    {
      i++; [COLOR="#808080"]//изменяем индекс промежуточного цвета[/COLOR]
      
      [COLOR="#808080"]//присвоить в качестве фонового цвета кнопки i-тый цвет[/COLOR]
      document.getElementById('fadeBtn').style.backgroundColor = getFadeMiddleColor();
      
    [COLOR="#808080"]  /* если ещё не перебраны все промежуточные цвета,
      то вызвать fade() через t миллисекунд опять */[/COLOR]
      if ( i < n ) setTimeout(fade, t);  
    } 
    
    function getFadeMiddleColor() 
    {
      /*процент содержания конечного цвета в текущем промежуточном цвете;
      изменяется от 0 (не включая 0) до 1 (1 = 100%)*/
      var finishPercent = i/n;
    [COLOR="#808080"]  /*процент содержания начального цвета в текущем промежуточном цвете;
      изменяется от 1 до 0 (1 = 100%) */[/COLOR]
      var startPercent = 1 - finishPercent;
      
      var R,G,B;
      
    [COLOR="#808080"]  //вычисляем значения красного, зеленого, синего промежуточного цвета[/COLOR]
      R = Math.floor( ('0x'+aRGBStart[0]) * startPercent + ('0x'+aRGBFinish[0]) * finishPercent );
      G = Math.floor( ('0x'+aRGBStart[1]) * startPercent + ('0x'+aRGBFinish[1]) * finishPercent );
      B = Math.floor( ('0x'+aRGBStart[2]) * startPercent + ('0x'+aRGBFinish[2]) * finishPercent );
      
      return 'rgb('+R+ ',' + G + ',' + B +')'; 
    }
    
    </script> 
    </head>
    
    <body> 
    
    
    
    [B]<p><input type="text" id="fadeBtn"  onClick="fade()" size="20"></p>[/B]
    
    </body> 
    </html>
    
     
    katrukhin нравится это.
  5. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    если фон поля картинка, тогда можно взять две картинки, подставить их под поле ввода и менять их прозрачность при наведении на поле ввода.
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>jQuery</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $("#form .hover input").hover(
                function() {
                    $(this).parent().children(".image1").stop().animate({opacity:1},1000);
                    $(this).parent().children(".image2").stop().animate({opacity:0},1000);
                },
                function() {
                    $(this).parent().children(".image1").stop().animate({opacity:0},1000);
                    $(this).parent().children(".image2").stop().animate({opacity:1},1000);
                }
            );
        });
        </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    <!--
    .back{
        position: absolute;
        top: 0;
        left: 0;
        width:300px;
        height:100px;
    }
    .image1{
        background:url(http://www.google.com/intl/en_com/images/srpr/logo1w.png) left top no-repeat;
    }
    .image2{
        background:url(http://www.google.com/logos/canadaday10-hp.gif) left top no-repeat;
    }
    .hover input{
        background:none;
        height:100px;
        font-size:50px;
        width:300px;
        opacity:1;
        position: relative;
    }
    .hover{
        position: relative;
    }
    -->
    </style>
    </head>
    <body>
    
    <form action="" method="get" id="form">
        <div class="hover"><div class="back image1"></div><div class="back image2"></div><input name="test" type="text" /></div>
        <input name="" type="submit" />
    </form>
    
    </body>
    </html>
    
     
    katrukhin нравится это.
Статус темы:
Закрыта.