如何在 Jquery 中更改图像的位置？答案

【问题标题】：How can i change the position of an image in Jquery?如何在 Jquery 中更改图像的位置？
【发布时间】：2013-08-26 21:36:10
【问题描述】：

我有这样的图像：

我想在悬停时更改 jquery 中的位置，使其看起来图像正在更改。

我不想使用 .animate 函数来移动图像，但是，基本上让图像滚动到每一帧。

现在我设置了宽度，并将溢出设置为隐藏，因此您一次只能看到一个图像。

我的 HTML

 <ul class="icons">
                    <li id="trasklogo"><img src="img/icons/nav-se1aec3ccea.png" width="75" height="823" /></li>
                    <li><img src="img/icons/sprite_about.png" width="1050" height="70" /></li>
                    <li><img src="img/icons/sprite_genetics.png" width="1050" height="70" /></li>
                    <li><img src="img/icons/sprite_innovation.png" width="1050" height="70" /></li>
                    <li><img src="img/icons/sprite_media.png" width="1050" height="70" /></li>
                </ul>

我的 CSS

ul li, {
list-style: none;
}

li {
display: list-item;
text-align: -webkit-match-parent;
}
.menu .icons #trasklogo {
height: 87px;
overflow: hidden;
}
.container .menu .icons {
width: 75px;
overflow: hidden;
}

【问题讨论】：

请贴出你目前尝试过的代码。
Spritely 可能是你想要的。

标签： jquery css image animation scroll

【解决方案1】：

目前还不完全清楚您要完成什么。

如果您想将此精灵制作成动画，请查看Spritely。此 javascript 将自动移动精灵以模拟关键帧动画。您只需提供一个宽度以及精灵应该移动的速度，然后它会完成剩下的工作。

如果您尝试在图像上缓慢平移并停止，您最好的选择是在背景 x 位置上使用动画。根据您提供的精灵以及您要求不使用动画的事实，我怀疑这是您的意图。

您还可以使用 @keyframes 使用 CSS 模拟此动画。看到这个小提琴：http://jsfiddle.net/ZLyrN/

注意：没有polyfill，CSS 动画不能跨浏览器兼容。

【讨论】：

我猜我对 animate 函数的使用是错误的。抱歉，英语不是我的母语，但你所描述的听起来像是我打算做的。当用户将鼠标悬停在列表项上时，我想平移图像并停在关键帧上以模拟动画。

【解决方案2】：

您可以使用 JQuery 在 Javascript 中轻松创建该效果。

setInterval(function() {
    // parse the current margin to an integer and substract the with of one frame
    var nr=parseInt($("#sw").css("margin-left")) - 70; 
    // reset margin to 0 if margin > last frame
    if(nr<=-1050) {
        nr=0;
    }
    // set the new margin
    $("#sw").css("margin-left", nr+"px");
}, 50);

CSS：

#wr {
    width:70px;
    overflow:hidden;
}

HTML：

<div id="wr">
    <img id="sw" src="http://i.stack.imgur.com/hCX5s.png" />
</div>

工作示例：http://jsfiddle.net/U2MrB/

【讨论】：