将鼠标悬停在适当的图像按钮上时，左/右自动滚动表？ [英] Auto scroll table left/right when hovering over appropriate image buttons?

问题描述

我还有最后一件事要做我的网页，但我需要一些帮助。我有两个看起来像（<）和（>）的按钮。当您将鼠标光标悬停在右侧按钮（>）上时，它应向右滚动我的表格，直到您将光标移离按钮，然后左侧按钮将其向左滚动，直到您将光标移离按钮。



这是按钮的HTML：

I have one last thing to do for my webpage, but I need some help. I have two buttons that look like (<) and (>). When you hover your mouse cursor over the right button (>) it should scroll my table to the right until you move the cursor off the button, and the left button scrolls it back to the left until you move the cursor off the button.

Here is my HTML for the buttons:

<img id="ScrollLeft" class="scrollbuttons" src="images/Left_Button.png" width="40px;" ></img> <img id="ScrollRight" class="scrollbuttons" src="images/Right_Button.png" width="40px;" ></img>

我计划基本上制作两次相同的javascript函数，一次用于向左滚动，向右滚动一个。以下是我目前使用的javascript：

I was planning on essentially making the same javascript function twice, once for scrolling left, and one for the right. Here is what I have currently for my javascript:

function ScrollMeRight() {
$('ScrollRight').each(function () {
  var hovered = false;
  var loop = window.setInterval(function () {
    if (hovered) {
      window.scrollBy(150, 0);
    }
  }, 250);

  $(this).hover(
    function () {
      hovered = true;
    },
    function () {
      hovered = false;
    }
  );
});
}

我知道使用window.scrollBy（），它会一次将页面移动到块上。当你将鼠标悬停在按钮上时，我想让滚动变得平滑和一致。我可以控制它滚动的速度/速度。



任何帮助非常感谢。





杰罗姆

I know that with the window.scrollBy() it will move the page over chunks at a time. I'd like to have the scrolling be smooth and consistent when you hover over the buttons with the ability for me to control how fast/slow it scrolls.

Any assistance would be greatly appreciated.


Jerome

推荐答案

（' ScrollRight'）。each（ function （） {
var hovered = false ;
var loop = window .setInterval（ function （）{
< span class =code-keyword> if （hovered）{
window .scrollBy（ 150 ， 0 ）;
}
}， 250 ） ;

('ScrollRight').each(function () { var hovered = false; var loop = window.setInterval(function () { if (hovered) { window.scrollBy(150, 0); } }, 250);

（ this ）。hover（
function （）{
hovered = 真;
}，
function （）{
hovered = false ;
}
）;
}）;
}

(this).hover( function () { hovered = true; }, function () { hovered = false; } ); }); }

我知道使用window.scrollBy（），它会一次将页面移动到块上。当你将鼠标悬停在按钮上时，我想让滚动变得平滑和一致。我可以控制它滚动的速度/速度。



任何帮助非常感谢。





Jerome

I know that with the window.scrollBy() it will move the page over chunks at a time. I'd like to have the scrolling be smooth and consistent when you hover over the buttons with the ability for me to control how fast/slow it scrolls.

Any assistance would be greatly appreciated.


Jerome

您需要的解决方案如下所示

Your required solutions will be like below

There should be one function scrolls this should scroll your table one time only one time
function ScrollMeRight() 

There should be one global variable to hold set interval reference
var scrollWithInterval; 

关于鼠标悬停事件，您应该在下面添加

On mouse hover event you should add below

 var scrollWithInterval = setInterval(function(){ ScrollMeRight(); }, 2000);
// here instead  of 2000 you can give what ever time interval you want 

鼠标停止活动

On mouse out event

// need to stop the scrolling. 
     clearInterval(scrollWithInterval);

这篇关于将鼠标悬停在适当的图像按钮上时，左/右自动滚动表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！