2016-05-25 9 views
0

私は単純なhtmlページを持っています。
私はtyped.jsを使用しています。これは、テキストを入力するためのJqueryプラグインです。

pタグのテキストは、出力時にスタイル指定されていません。
また、pタグのテキストが1つずつ出力されます。

私はそれを一度にタイピングしたいと思います。
これらの問題を解決する方法が不明です。私にとっては、あなたのコードはここにチェックを働いているスタイリングが表示されません。 1つ1つ入力した

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <style type="text/css" media="all"> 
     center { 
      position: relative; 
      margin-top: 10%; 
      line-height: 20px; 
     } 
     p { 
      /*font-family: Monaco, monospace; */ 
      font-family: 'Lucida Console', monospace; 
      font-size: 1.2em; 
      color:#00FF00; 
     } 
    </style> 
    <title>Personal Website</title> 
</head> 
<body bgcolor=""> 
    <center> 
     <div id="typed-strings"> 
      <p>Some text </p> 
      <p>This is some more text.</p> 
      <p>No more text after this.</p> 
     </div> 
     <span id="typed"></span> 
    </center> 
    <script src="jquery.js"></script> 
    <script src="typed.js" type="text/javascript"></script> 
    <script> 
     $(function(){ 
      $("#typed").typed({ 
       stringsElement: $('#typed-strings'), 
       typeSpeed: 0, 
      }); 
     }); 
    </script> 
</body> 
</html> 

答えて

1

変更は、あなたは#はtyped.jsは別のHTML要素にテキストを入力しますので、これは

http://jsfiddle.net/8CbL2/25/

p,#typed { 
      /*font-family: Monaco, monospace; */ 
      font-family: 'Lucida Console', monospace; 
      font-size: 1.2em; 
      color:#00FF00; 
     } 
+0

pを入力した後、#が入力されています。ありがとうございました。私はまだ上書きすることなくすべてのテキストを一度に入力する方法を理解する必要があります。 –

+0

このようなことを意味しますか?http://jsfiddle.net/8CbL2/26/またはhttp://jsfiddle.net/8CbL2/27/ – dev

+0

どちらも良い答えです。ありがとう。 –

1

を入力、のスタイルを与えられていません。あなたのコードでは、それを指定してspanid=typedと入力します。

 
p, #typed { 
    /*font-family: Monaco, monospace; */ 
    font-family: 'Lucida Console', monospace; 
    font-size: 1.2em; 
    color: #00FF00; 
} 

そして、あなたは、同様タイピングカーソルをターゲットだけでなく、あなたの選択リストに.typed-cursorを追加したい場合は:だからあなたのCSSにこのセレクタを追加します。

+0

私は完全に理解していません。あなたは次のようなものを意味します:.typed-cursor、#typed {....}? –

+0

はい、 'typed.js'はクラス" typeed-cursor'のHTML要素でカーソルを描画します。元のテキストにもスタイルを付けるには、 'p、#typed、.typed-cursor {...}'と言ってください。 – geoff

関連する問題