1

I have an image like this:

enter image description here

and i want to change the position in jquery on hover to make it look the the image is changing.

I dont want to use the .animate function to shift the image but, to basically have the image scroll to each frame.

right now i have a width set, and my overflow to hidden so you can only see one image at a time.

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

my 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;
}
4

2 回答 2

1

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

如果您试图使这个精灵成为动画，请查看Spritely。此 javascript 将自动移动精灵以模拟关键帧动画。您只需提供一个宽度以及精灵应该移动的速度，剩下的就交给它了。

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

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

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

于 2013-08-23T18:39:27.630 回答
1

您可以使用 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/

于 2013-08-23T18:58:26.970 回答