2013-01-05 8 views
0

Я использовал код, отправленный Tats на JSFiddle. Он работает на JSFiddle: http://jsfiddle.net/FWWEn/397/ , но не на моей странице html. Я вставил функцию между этими тегами сценария:Smooth marquee not working

script type='text/javascript' src='http://code.jquery.com/jquery.min.js' 

и вставил его в конце моего файла .asp до того /html тега. Тег h1, где бы я ни вставал, не работал. Почему нет?

<body> 
<h1 align="center" bgcolor="#FFFFCC" width="800" class="style33" > Hours next week are 8:30am - 6:30pm. </h1> 
</body> 

<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'> 
function($) { 
    $.fn.textWidth = function(){ 
     var calc = '<span style="display:none">' + $(this).text() + '</span>'; 
     $('body').append(calc); 
     var width = $('body').find('span:last').width(); 
     $('body').find('span:last').remove(); 
     return width; 
    }; 
    $.fn.marquee = function(args) { 
     var that = $(this); 
     var textWidth = that.textWidth(), 
      offset = that.width(), 
      width = offset, 
      css = { 
       'text-indent' : that.css('text-indent'), 
       'overflow' : that.css('overflow'), 
       'white-space' : that.css('white-space') 
      }, 
      marqueeCss = { 
       'text-indent' : width, 
       'overflow' : 'hidden', 
       'white-space' : 'nowrap' 
      }, 
      args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args), 
      i = 0, 
      stop = textWidth*-1, 
      dfd = $.Deferred(); 

     function go() { 
      if(!that.length) return dfd.reject(); 
      if(width == stop) { 
       i++; 
       if(i == args.count) { 
        that.css(css); 
        return dfd.resolve(); 
       } 
       if(args.leftToRight) { 
        width = textWidth*-1; 
       } else { 
        width = offset; 
       } 
      } 
      that.css('text-indent', width + 'px'); 
      if(args.leftToRight) { 
       width++; 
      } else { 
       width--; 
      } 
      setTimeout(go, args.speed); 
     }; 
     if(args.leftToRight) { 
      width = textWidth*-1; 
      width++; 
      stop = offset; 
     } else { 
      width--;    
     } 
     that.css(marqueeCss); 
     go(); 
     return dfd.promise(); 
    }; 
      $('h1').marquee(); 
})(jQuery); 
</script> 

ответ

0

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

Так просто включить JQuery, как это:

<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script> 

И затем использовать новый тег сценария включить код:

<script> 
function($) { 
    $.fn.textWidth = function(){ 
     var calc = '<span style="display:none">' + $(this).text() + '</span>'; 
     $('body').append(calc); 
     var width = $('body').find('span:last').width(); 
     $('body').find('span:last').remove(); 
     return width; 
    }; 

    $.fn.marquee = function(args) { 
     var that = $(this); 
     var textWidth = that.textWidth(), 
      offset = that.width(), 
      width = offset, 
      css = { 
       'text-indent' : that.css('text-indent'), 
       'overflow' : that.css('overflow'), 
       'white-space' : that.css('white-space') 
      }, 
      marqueeCss = { 
       'text-indent' : width, 
       'overflow' : 'hidden', 
       'white-space' : 'nowrap' 
      }, 
      args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args), 
      i = 0, 
      stop = textWidth*-1, 
      dfd = $.Deferred(); 

     function go() { 
      if(!that.length) return dfd.reject(); 
      if(width == stop) { 
       i++; 
       if(i == args.count) { 
        that.css(css); 
        return dfd.resolve(); 
       } 
       if(args.leftToRight) { 
        width = textWidth*-1; 
       } else { 
        width = offset; 
       } 
      } 
      that.css('text-indent', width + 'px'); 
      if(args.leftToRight) { 
       width++; 
      } else { 
       width--; 
      } 
      setTimeout(go, args.speed); 
     }; 
     if(args.leftToRight) { 
      width = textWidth*-1; 
      width++; 
      stop = offset; 
     } else { 
      width--;    
     } 
     that.css(marqueeCss); 
     go(); 
     return dfd.promise(); 
    }; 
      $('h1').marquee(); 
})(jQuery); 
</script> 
+0

Спасибо Roasted. Отлично работает! – user1951308

+0

Шатер проходит по экрану. Как отредактировать jquery, чтобы центрировать текст и ограничить ширину до 1000 с выбранным цветом bckground? – user1951308