communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
jquery aucune réponse au clic sur le bouton
为情所困
为情所困 2017-05-18 10:59:07
0
5
508

Le code est le suivant, cliquer sur le bouton n'a aucun effet
<!DOCTYPE html>
<html lang="fr">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<style>
    #cbox{
          background-color:green;
          color:red;
          border:5;
          width:300px;
          height:200px;
          positon:relative;
        }
</style>
<title>Document</title>

</tête>
<corps>

<h1>Jquery 学习</h1>
<button id='btn'>点击</button>

<p id='cbox'>变化的Box</p>
<script>
    jQuery(document).ready(function($){
        $('#btn').click(function(event){
            $('#cbox').animate({
                left:300,
                color:gray,
                width:'400px'
            });
        });
    });


</script>

</body>
</html>

为情所困
为情所困

répondre à tous(5)
Peter_Zhu
Peter_Zhu2017-05-18 11:01:07 5 plancher

animate ne changera pas la couleur, donc ce gris n'a aucun sens. De plus, même si vous souhaitez écrire de la couleur, le gris doit être mis entre guillemets, sinon il deviendra une variable non définie.

Comme +0
Ajouter une réponse
小葫芦
小葫芦2017-05-18 11:01:07 4 plancher

couleur: 'gris'

Comme +0
Ajouter une réponse
给我你的怀抱
给我你的怀抱2017-05-18 11:01:07 3 plancher

Supprimer $ dans la liste des paramètres

Comme +0
Ajouter une réponse
伊谢尔伦
伊谢尔伦2017-05-18 11:01:07 2 plancher

Il ne devrait pas y avoir de $ en fonction.
animate n'a pas de balise de couleur, mais possède une balise d'opacité pour la transformation de la transparence.
De plus, la valeur correspondant au label doit avoir des guillemets simples''.

Comme +0
Ajouter une réponse
为情所困
为情所困2017-05-18 11:01:07 1 plancher

<!DOCTYPE html>
<html lang="fr">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
&lt ;meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/jquer...
<style>

#cbox{
      background-color:green;
      color:red;
      width:300px;
      height:200px;
      position:relative;
    }

</style>
<title>Document</title>
</head><body>

<h1>Jquery 学习</h1>
<button id='btn'>点击</button>

<p id='cbox'>变化的Box</p>
<script>

jQuery(document).ready(function($){
    $('#btn').click(function(event){
        $('#cbox').animate({
            left:300,
            color:"yellow",
            width:'400px'
        });
    });
});

</script>

<script>
/**!

  • @preserve Animation couleur 1.6.0

  • http://www.bitstorm.org/jquer...

  • Copyright 2011, 2013 Edwin Martin

  • Publié sous licences MIT et GPL.
    */

(fonction ($) {
/**

  • Vérifiez si le navigateur prend en charge le mode couleur RGBA.
    *

  • Auteur Mehdi Kabab http://pioupioum.fr

  • @return {boolean} Vrai si le navigateur prend en charge RGBA. Faux sinon.
    */

fonction isRGBACapable() {

var $script = $('script:first'),
    color = $script.css('color'),
    result = false;
if (/^rgba/.test(color)) {
  result = true;
} else {
  try {
    result = ( color != $script.css('color', 'rgba(0, 0, 0, 0.5)').css('color') );
    $script.css('color', color);
  } catch (e) {
  }
}

return result;

}

$.extend(true, $, {

support: {
  'rgba': isRGBACapable()
}

});

var propriétés = ['color', 'backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'outlineColor'];
$.each(propriétés, fonction(i , propriété) {

$.Tween.propHooks[ property ] = {
  get: function(tween) {
    return $(tween.elem).css(property);
  },
  set: function(tween) {
    var style = tween.elem.style;
    var p_begin = parseColor($(tween.elem).css(property));
    var p_end = parseColor(tween.end);
    tween.run = function(progress) {
      style[property] = calculateColor(p_begin, p_end, progress);
    }
  }
}

});

// borderColor ne rentre pas dans le fx.step standard ci-dessus.
$.Tween.propHooks.borderColor = {

set: function(tween) {
  var style = tween.elem.style;
  var p_begin = [];
  var borders = properties.slice(2, 6); // All four border properties
  $.each(borders, function(i, property) {
    p_begin[property] = parseColor($(tween.elem).css(property));
  });
  var p_end = parseColor(tween.end);
  tween.run = function(progress) {
    $.each(borders, function(i, property) {
      style[property] = calculateColor(p_begin[property], p_end, progress);
    });
  }
}

}

// Calcule une couleur intermédiaire. Renvoie une chaîne de type "#aabbcc".
function calculateColor(begin, end, pos) {

var color = 'rgb' + ($.support['rgba'] ? 'a' : '') + '('
    + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ','
    + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ','
    + parseInt((begin[2] + pos * (end[2] - begin[2])), 10);
if ($.support['rgba']) {
  color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1);
}
color += ')';
return color;

}

// Analyse une couleur de syntaxe CSS. Génère un tableau [r, g, b]
function parseColor(color) {

var match, quadruplet;

// Match #aabbcc
if (match = /#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(color)) {
  quadruplet = [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16), 1];

  // Match #abc
} else if (match = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(color)) {
  quadruplet = [parseInt(match[1], 16) * 17, parseInt(match[2], 16) * 17, parseInt(match[3], 16) * 17, 1];

  // Match rgb(n, n, n)
} else if (match = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) {
  quadruplet = [parseInt(match[1]), parseInt(match[2]), parseInt(match[3]), 1];

} else if (match = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9\.]*)\s*\)/.exec(color)) {
  quadruplet = [parseInt(match[1], 10), parseInt(match[2], 10), parseInt(match[3], 10),parseFloat(match[4])];

  // No browser returns rgb(n%, n%, n%), so little reason to support this format.
} else {
  quadruplet = colors[color];
}
return quadruplet;

}

// Quelques couleurs nommées avec lesquelles travailler, ajoutées par Bradley Ayers
// Depuis l'interface de Stefan Petre
// http://interface.eyecon.ro/
var colours = {

'aqua': [0,255,255,1],
'azure': [240,255,255,1],
'beige': [245,245,220,1],
'black': [0,0,0,1],
'blue': [0,0,255,1],
'brown': [165,42,42,1],
'cyan': [0,255,255,1],
'darkblue': [0,0,139,1],
'darkcyan': [0,139,139,1],
'darkgrey': [169,169,169,1],
'darkgreen': [0,100,0,1],
'darkkhaki': [189,183,107,1],
'darkmagenta': [139,0,139,1],
'darkolivegreen': [85,107,47,1],
'darkorange': [255,140,0,1],
'darkorchid': [153,50,204,1],
'darkred': [139,0,0,1],
'darksalmon': [233,150,122,1],
'darkviolet': [148,0,211,1],
'fuchsia': [255,0,255,1],
'gold': [255,215,0,1],
'green': [0,128,0,1],
'indigo': [75,0,130,1],
'khaki': [240,230,140,1],
'lightblue': [173,216,230,1],
'lightcyan': [224,255,255,1],
'lightgreen': [144,238,144,1],
'lightgrey': [211,211,211,1],
'lightpink': [255,182,193,1],
'lightyellow': [255,255,224,1],
'lime': [0,255,0,1],
'magenta': [255,0,255,1],
'maroon': [128,0,0,1],
'navy': [0,0,128,1],
'olive': [128,128,0,1],
'orange': [255,165,0,1],
'pink': [255,192,203,1],
'purple': [128,0,128,1],
'violet': [128,0,128,1],
'red': [255,0,0,1],
'silver': [192,192,192,1],
'white': [255,255,255,1],
'yellow': [255,255,0,1],
'transparent': [255,255,255,0]

};
})(jQuery);
</script>
</body></html>

代码直接运行 即可改变颜色 我是雷锋求采纳

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal