jQueryで動画上に文字を流して、一時停止させるコードを探しています。
文字を流すだけのコードはウェブで見つけることができました。そのコードを使って作ったのが以下です。
http://onlinelanguage.info/?page_id=3841
動画下の空欄に文字を入力して、「追加」すると動画上に文字を流すことができます。コードは以下です。
<script type="text/javascript"> // コメントの場所を指定 function setPosition(id) { var top = $('#nicoscreen').offset(); var itemHeight = $(id).height(); var bottom = top.top + $('#nicoscreen').height() - itemHeight; var length = bottom - top.top; return bottom - length * Math.random(); } var commentNum = 0; function addComment() { var comment = $("#comment_text").val(); commentNum++; var commentPos = $('#nicoscreen').offset(); var nico_comment = $('<div id="item" style="font-size: 18px; color: white; font-weight: bold; text-shadow: black 1px 1px 1px; width: 100px; white-space: nowrap; position: absolute;">' + comment + '</li>').appendTo('#nicoscreen'); var offset = nico_comment.offset({top:setPosition('#item'),left:commentPos.left + $('#nicoscreen').width()}); var animation = offset.animate({left:-$(window).width()}, { duration: 100000, easing: 'linear', queue: false, complete: function () { animation.hide(); } }); // リスト表示 if (commentNum % 2) { $('<div id="list_item" style="background-color: #121212; color:white">' + comment + '</div>').prependTo('#list'); } else { $('<div id="list_item" style="background-color: #1e1e1e; color:white">' + comment + '</div>').prependTo('#list'); } $("#comment_text").val(""); } }); </script><div id="nicoscreen" style="overflow: hidden; height: 315px; width: 560px; position: relative;"> <iframe width="560" height="315" src="https://appear.in/kidohdes" frameborder="0" allowfullscreen></iframe> </div> <div id="comment_list"> <ul id="list"> </ul> </div> <input id="comment_text" name="comment" type="text" /><input type="button" onclick="addComment()" value="追加" />
これを、以下に修正するためには、どうすれば良いでしょうか?
1)流れる文字をクリックして停止、更にクリックして終了させる
2)流れる文字の高さは一定にする
どなたかご教示いただけましたら幸甚です。どうぞ、よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/04/09 03:45
2015/04/10 00:22
2015/04/10 09:19
2015/12/13 15:35 編集
2015/12/14 07:23
2015/12/14 12:42