0

简短的问题 - 使用不太好的触摸屏显示在 PC 上打开的页面。我创建了 2 个大箭头，但不知道如何使用 JS/jQuery 对其进行编程。

第一次尝试：onClick->scroll - 它可以工作，但用户必须点击多次才能滚动文章。第二：

     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

您上面的代码不起作用，因为 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

与此同时，我写了这段代码：

     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 上运行……有趣的是 - kiosk 是基于 Opera 浏览器的，所以，有什么解决方案吗？

顺便提一句。是否有任何关于在带有 FF 的 Linux 上构建信息亭（对于 FF 的 1.x 版本没有过时）的材料（Linux 对我来说没问题，但我正在寻找 FF 的安全插件）。

于 2011-03-02T03:12:40.280 回答
0

前段时间我回答了这个问题......基本上它会在鼠标按下时设置一个标志，并在鼠标抬起时清除。然后setTimeout循环直到标志清除。此外，它还具有鼠标滚轮和拖放功能。

查看演示

于 2011-03-02T03:12:48.743 回答
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 回答