Javascript Dessiner une ligne avec jQuery

S'il vous plaît voir mon code ici http://jsbin.com/ijoxa3/edit Javascript Dessiner une ligne avec jQuery

var drawHorizondalLine = function(x1,y1,x2,y2, color) { 

      var width = Math.abs(x1 - x2); 
      var posX = (x1 > x2) ? x1 : x2; 
      var id ='c_'+new Date().getTime() 
      var line = "<div id='"+id+"'class='line'>&nbsp;</div>"; 

      $('body').append(line); 

      $('#'+id).css({ 
      left: posX, 
      top: y1, 
      width: width, 
      position:'absolute', 
      backgroundColor: color 
      }); 

}; 


$(document).ready(function() { 
    drawHorizondalLine(0, 10, 200, 10, '#a00'); 
    drawHorizondalLine(0, 50, 100, 50, '#0a0'); 
}); 
<style> 

.line{ 
    padding;1px; 
    } 
</style> 
<body> 
    <p id="hello">Hello World</p> 
</body> 
</html>

L'appel de fonction drawHorizondalLine(0, 10, 200, 10, '#a00'); est supposé tracer une ligne former le coin supérieur gauche de la page, 100px de longueur, mais la ligne semble commencer à partir de la dernière div du corps.

Où est l'erreur?

Source

2010-07-01 Mithun Sreedharan

Juste testé dans FF 3.6 et semble fonctionner très bien. –

@Artem Barger, je viens d'éditer la question, S'il vous plaît voir la partie HTML aussi –

var posX = (x1 > x2) ? x1 : x2;

devrait être

var posX = (x1 < x2) ? x1 : x2;

démonstration de travail est here

Source

2010-07-01 11:07:30 Kai

Javascript Dessiner une ligne avec jQuery

Répondre

Questions connexes