0

短い質問 - タッチ スクリーン ディスプレイがあまりよくない PC で開いたページ。2 つの大きな矢印を作成しましたが、JS/jQuery を使用してプログラムする方法がわかりません。

最初の試行: onClick->scroll - 機能しますが、ユーザーは記事をスクロールするために何度もタップする必要があります。2番：

     var scrolling = false;
 $("#scUp").mouseup(function(){
  $(this).css("opacity", 0.3);  
  scrolling = false;


 }).mousedown(function(){
  $(this).css("opacity", 1);

  scrolling = true;
  while(scrolling) {   
   $('html, body').stop().animate({ scrollTop: 50 }, 500);
  }
  event.preventDefault();

 });

動作しません ;) 私は実際のブラウザーのスクロール矢印をシミュレートしようとしています - マウス ボタンのページを下 (または上) にスクロールし続けるまで。

4

4 に答える 4

0

その間に私はこのコードを書きました：

     var scrollId = 0;

 $("#scUp").mouseup(function(){
  $(this).css("opacity", 0.3);
  clearInterval(scrollId);

 }).mousedown(function(){
  $(this).css("opacity", 1);
  var scroll = function() { $("html, body").stop().animate({ scrollTop: "-=10px" }, 15); }
  scroll();
  scrollId = setInterval(scroll, 15);          
 });

 $("#scDw").mouseup(function(){
  $(this).css("opacity", 0.3);
  clearInterval(scrollId);

 }).mousedown(function(){
  $(this).css("opacity", 1);
  var scroll = function() { $("html, body").stop().animate({ scrollTop: "+=10px" }, 15); }
  scroll();
  scrollId = setInterval(scroll, 15);          
 });

それはOperaでは動作しません...面白いこと-キオスクはOperaブラウザに基づいているので、解決策はありますか？

ところで。LinuxでFFを使用してキオスク（FFの1.xバージョンでは古くない）を構築するための資料はありますか（Linuxは私にとって問題ありませんが、FFのセキュリティプラグインを探しています）。

于 2011-03-02T03:12:40.280 に答える
0

私はしばらく前にこの質問に答えました...基本的には、マウスが下がっているときにフラグを設定し、マウスが上にあるときにクリアします。次にsetTimeout、フラグがクリアされるまでループします。また、マウスホイールとドラッグアンドドロップ機能があります。

デモをチェックしてください

于 2011-03-02T03:12:48.743 に答える
0

JavaScript はマルチスレッド化されていないため、上記のコードは機能しません。つまり、while ループが CPU を消費しており、他のコードの実行を妨げている可能性があります (つまり、mouseup イベント)。

私は少し前にこのようなことをしました。私のブログ投稿をチェックしてください。

また、これを行っているかどうかはわかりませんが、すべての JavaScript コードを jQuery の ready() 関数に配置してください。そうしないと、jQuery が #scUp 要素を見つけられない可能性があります。

私の古いブログ投稿からの関連コードは次のとおりです。

var scrollTimer;
function scrollContent(amt)
{
    $("#content").scrollTop($("#content").scrollTop()+amt);
    scrollTimer = window.setTimeout("scrollContent(" + amt + ")", 25);
}
$(document).ready(function ()
{
    $("#content").css("overflow", "hidden");
    $("#scrollUp").mousedown(function() {
        window.clearTimeout(scrollTimer); //Not necessary, but just to be sure...
        $("#scrollUp").animate({"opacity": 100}, 'fast');
        scrollContent(-10);
    });
    $("#scrollUp").mouseup(function() {
        window.clearTimeout(scrollTimer);
        $("#scrollUp").animate({"opacity": 0}, 'fast');
    });
    $("#scrollDown").mousedown(function() {
        window.clearTimeout(scrollTimer); //Not necessary, but just to be sure...
        $("#scrollDown").animate({"opacity": 100}, 'fast');
        scrollContent(10);
    });
    $("#scrollDown").mouseup(function() {
        window.clearTimeout(scrollTimer);
        $("#scrollDown").animate({"opacity": 0}, 'fast');
    });
    //$("#scrollUp").css("opacity", 0); //Alternative
    $("#scrollUp").animate({"opacity": 0}, 'slow');
    $("#scrollDown").animate({"opacity": 0}, 'slow');
});

...そしてリンク: http://blake-miner.blogspot.com/2010/08/javascript-sticky-footer-and-scroll.html

お役に立てれば！

于 2011-03-02T02:56:46.553 に答える
0 
<div style="position:fixed">
<a href="javascript://" onmousedown="scrollAs(1);" onmouseup="scrollAs(2);">Up</a>
<a href="javascript://" onmousedown="scrollAs(3);" onmouseup="scrollAs(2);">Down</a>
</div>

<script>
var scrollValue = 2;
function scrollAs(value) {
  if(value) scrollValue = value;
  document.body.scrollTop += (scrollValue - 2)*10;
  if(scrollValue != 2) setTimeout(scrollAs, 100);
}
<script>
于 2012-07-04T09:28:45.110 に答える