INPUT смена CSS (fade)

katrukhin · 28 Июл 2010

При наведении на инпут плавная смена background
Желательно JS прописаный в теге <input>

polyetilen · 29 Июл 2010

с 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 · 29 Июл 2010

Спасибо...но не выходит тоже реализовать с картинкой.

Вроде как фун-я animate в jQuery не реализует смену фона(картинки)

bork75 · 29 Июл 2010

Просто 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>

polyetilen · 29 Июл 2010

если фон поля картинка, тогда можно взять две картинки, подставить их под поле ввода и менять их прозрачность при наведении на поле ввода.

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>

INPUT смена CSS (fade)

katrukhin

Местный житель

polyetilen

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

katrukhin

Местный житель

bork75

The Team

polyetilen

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