Question

我试图通过鼠标悬停效果或点击鼠标向左或向右滚动div。但是，我不知道出了什么问题。

这是我尝试这样做的原因：

 <head>
    <style>
    #innerscroll{
    margin-right:0px;
    }
    </style>
</head>
<body>
<div id="innerscroll"></div>
<img src="right.jpg" 
onmouseover="document.getElementById('innerscroll').style.marginRight = setInterval(('value' + 1), 100);" />
</body>

现在，尝试这个，我想知道为什么它不起作用。我究竟做错了什么？

我还尝试了一种更复杂的方法，但也失败了。这是代码：

    $('.nav-next').click(function(e) {
        e.preventDefault();
        $('#innerscroll').animate({
            'margin-right' : '100px'    
        });                 
    });
    $('.nav-previous').click(function(e) {
        e.preventDefault();
        $('#innerscroll').animate({
            'margin-right' : '-100px'
        });                 
    });

我的上一个问题已经结束，因为我觉得我不够具体。无论您需要什么细节，请索取，我将编辑问题！

编辑：我可以选择使用jQuery，但我不愿意。

Edit2：我正在使用setInterval来计算鼠标悬停效果。我认为它将通过鼠标悬停移动，或者它将通过点击事件移动。

Answer 1

您应该使用.style.paddingRight代替.style.padding-right。 jsfiddle

修改后的代码：

<img src="right.jpg" 
onmouseover="onmouseoveronImge();" />

由于您使用的是jQuery，因此可以附加鼠标悬停事件，如下所示

<script>
  $('.nav-next').click(function(e) {
    e.preventDefault();
    $('#innerscroll').animate({
        'margin-left' : '+=100px'    
    });                 
});
$('.nav-previous').click(function(e) {
    e.preventDefault();
    $('#innerscroll').animate({
        'margin-left' : '-=100px'
    });                 
});
 function onmouseoveronImge(){
       $('#innerscroll').animate({
          'margin-left': '+=100px'    
      });
}
</script>

注意：我认为你不想使用setInterval的值返回。你应该在你的问题中解释它为什么使用它。

Answer 2

我的解决方案也是使用jquery，如下所示：

使用2个按钮，一个用于左移动，另一个用于右移动

$('#innerscroll').animate({
'marginLeft' : "+=50px"
});

和

$('#innerscroll').animate({
    'marginLeft' : "-=50px"
});

你可以创建一个函数并将值传递给它。

Answer 3

填充不能为负值。反而修改边距。所以你的代码应该是这样的：

 $('.nav-next').click(function(e) {
    e.preventDefault();
    $('#innerscroll').animate({
        'margin-left' : '100px'    
    });                 
});
$('.nav-previous').click(function(e) {
    e.preventDefault();
    $('#innerscroll').animate({
        'margin-left' : '-100px'
    });                 
});

在这里工作jsfiddle：http://jsfiddle.net/vqzrY/

Answer 4

如果您有以下标记：

<div id="container">
    <div id="content">
    </div>
</div>

在padding或#container上设置#content不会使内部div移动。您希望在内部margin上设置div以使其水平滚动，并在外部overlay:hidden上设置div。

Answer 5

首先，您使用的是jQuery UI库吗？你的第二个例子就像你一样。

试试这个，它会做一些类似于你想要完成的事情吗？

<div id="innerscroll">
  Some Content...
</div>

<div class="nav-next>
  Next
</div>

<div class="nav-previous">
  Previous
</div>

<script type="text/javascript">
  $('.nav-next').click(function(e) {
      $('#innerscroll').animate({
          right: 100    
      });                 
  });

  $('.nav-previous').click(function(e) {
      $('#innerscroll').animate({
          left: 100
      });                 
  });
</script>

如果没有，您的示例看起来像是在做几件事：

使用CSS设置填充
在鼠标悬停

这就是你想要做的吗？

向左或向右移动DIV的按钮

5 个答案: