2

I am attempting to make a div scroll left or right either with a mouseover effect or on-click. However, I am at a loss as to what is going wrong.

Here was my attempt to do this simply:

 <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>

Now, trying this, I'm wondering why it doesn't work. What am I doing wrong?

I also tried a more complex approach that also failed. Here's the code for that: 

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

My last question was closed because I guess I was not specific enough. Whatever details you need please ask for and I'll edit the question!

Edit: I have the option of using jQuery but I would rather not.

Edit2: I am using setInterval to time the mouseover effect. I am thinking that it will move via mouseover or it will move via a click event.

4

5 回答 5

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 的值返回。你应该在你的问题中解释你为什么使用它。

于 2012-10-11T17:24:59.490 回答
1

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

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

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

和

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

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

于 2012-10-11T17:25:53.277 回答
0

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

 $('.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/

于 2012-10-11T17:27:21.050 回答
0

如果您有如下标记：

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

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

于 2012-10-11T17:29:15.760 回答
0

首先，您使用的是 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 设置填充
  • 在鼠标悬停时设置填充

那是你想做的吗？

于 2012-10-11T17:30:02.177 回答