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

Posted 2023-03-06

【中文标题】如何在 Jquery 中更改图像的位置？

【英文标题】：How can i change the position of an image in Jquery?

【发布时间】：2013-08-26 21:36:10

【问题描述】：

我有这样的图像：

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

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

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

我的 html

 <ul class="icons">
                    <li id="trasklogo"><img src="img/icons/nav-se1aec3ccea.png"   /></li>
                    <li><img src="img/icons/sprite_about.png"   /></li>
                    <li><img src="img/icons/sprite_genetics.png"   /></li>
                    <li><img src="img/icons/sprite_innovation.png"   /></li>
                    <li><img src="img/icons/sprite_media.png"   /></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 可能是你想要的。

【参考方案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/