1. 首頁
  2. 問答
  3. javascript水平滾動文本

javascript水平滾動文本

2016-07-22 159 views
0

我想在我的應用程序上進行水平滾動。有很多例子，但我找到了一個符合我需要的例子。但是，當我嘗試它時，它只是不工作，因爲它應該。請看看，並告訴我是什麼問題：javascript水平滾動文本

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div.marquee { 
    white-space:no-wrap; 
    overflow:hidden; 
} 
div.marquee > div.marquee-text { 
    white-space:nowrap; 
    display:inline; 
    width:auto; 
} 
</style> 
<script> 
var marquee = $('div.marquee'); 
console.log(marquee); 
marquee.each(function() { 
    var mar = $(this),indent = mar.width(); 
    mar.marquee = function() { 
     indent--; 
     mar.css('text-indent',indent); 
     if (indent < -1 * mar.children('div.marquee-text').width()) { 
      indent = mar.width(); 
     } 
    }; 
    mar.data('interval',setInterval(mar.marquee,1000/60)); 
}); 
</script> 
</head> 
<body> 
<div class='marquee'> 
    <div class='marquee-text'> 
     Testing this marquee function 
    </div> 
</div> 

</body> 
</html>

更新 有一個在控制檯沒有錯誤： enter image description here

來源

2016-07-22 dmx

+0

那麼....你可以使用舊的''標籤。 –

+4

@GavinThomas它不是1998;）是[廢棄]（http://caniuse.com/#search=marquee），不要使用它 –

+0

1）除了與舊的兼容性，不要使用'setInterval'動畫瀏覽器，'requestAnimationFrame'和CSS動畫更可靠。 2）每幀查找和設置屬性如「text-indent」和「width」對性能不利，變換效果更好。 3）你真的需要一個大帳篷嗎？ ;） – gcampbell

回答

4

你忘了，包括jQuery的在您的網站。否則，它按預期工作（至少我是這麼認爲的）。

$(document).ready(function() { 
 
    var marquee = $('div.marquee'); 
 
    console.log(marquee); 
 
    marquee.each(function() { 
 
     var mar = $(this),indent = mar.width(); 
 
     mar.marquee = function() { 
 
      indent--; 
 
      mar.css('text-indent',indent); 
 
      if (indent < -1 * mar.children('div.marquee-text').width()) { 
 
       indent = mar.width(); 
 
      } 
 
     }; 
 
     mar.data('interval',setInterval(mar.marquee,1000/60)); 
 
    }); 
 
});
div.marquee { 
 
    white-space:no-wrap; 
 
    overflow:hidden; 
 
} 
 
div.marquee > div.marquee-text { 
 
    white-space:nowrap; 
 
    display:inline; 
 
    width:auto; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='marquee'> 
 
    <div class='marquee-text'> 
 
     Testing this marquee function 
 
    </div> 
 
</div>

編輯：加入$(document).ready()，以確保元件將被加載。

來源

2016-07-22 13:29:57 Dygestor

1

在執行腳本之前等待頁面加載。

<script> 
$(document).ready(function(){ 
var marquee = $('div.marquee'); 
console.log(marquee); 
marquee.each(function() { 
    var mar = $(this),indent = mar.width(); 
    mar.marquee = function() { 
     indent--; 
     mar.css('text-indent',indent); 
     if (indent < -1 * mar.children('div.marquee-text').width()) { 
      indent = mar.width(); 
     } 
    }; 
    mar.data('interval',setInterval(mar.marquee,1000/60)); 
}); 
}); 
</script>

故見this問題，不要忘記在頭 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 。

來源

2016-07-22 14:20:30 dmx

相關問題

 相關問題