javascript - 向左或向右移动 DIV 的按钮

标签 javascript jquery animation

我试图通过鼠标悬停效果或单击来使 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 来计时鼠标悬停效果。我认为它将通过鼠标悬停移动或通过单击事件移动。

最佳答案

我的解决方案也是使用jquery,如下所示:

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

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

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

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

关于javascript - 向左或向右移动 DIV 的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12845015/

相关文章:

javascript - Angular : Access scope from within &lt;script&gt; tag

jquery - 炫耀 - 漂亮的 jQuery 插件

css - 反向重用 CSS 动画(通过重置状态?)

iphone - 如何在单个 animateWithDuration 调用期间缩放和旋转

swift - 画线动画

javascript - 单击显示确认框

javascript - 在 AngularUI 路由器中嵌套 URI 但不嵌套 Controller 或 View

javascript - Node.js - 错误 : Cannot find module 'config/chgpass'

jquery - 为什么 <div> 的高度不同?

jquery - 使用 jquery 发送 json 对象,但在 compojure 中接收 nil