妳好，給妳寫了壹個很基礎的例子。參照著自己優化成妳想要的效果吧。
示例是這樣的，鼠標移動到div上，背景圖片會從左往右移動直至最右端。鼠標移出div，背景圖標從右往左直至最左端。
備註：考慮到寬度變化，本例背景圖片使用百分比定位。根據妳的實際情況也可改為使用像素(px)定位。
<style>.bg-div?{
height:?110px;
background:?url(/7Ls0a8Sm1A5BphGlnYG/sys/portrait/item/27267a776a746b7505.jpg)?0%?center?no-repeat?#ccc;
}
</style>
<div?id="J_BgDiv"?class="bg-div"></div>
<script>
(function()?{
var?div?=?document.getElementById('J_BgDiv');
//?背景百分比（從左至右，0%-100%）
var?pos?=?0;
//?背景向右移還是向左移（0：向右，1：向左）
var?dir?=?0;
//?每次移動的百分比，控制速度
var?step?=?3;
div.addEventListener('mouseover',?function()?{
var?node?=?div;
dir?=?0;
if?(!div.mover)?{
div.mover?=?setInterval(function()?{
//?每次移動10%
if?(dir?===?0)?{
pos?+=?step;
}?else?{
pos?-=?step;
}
pos?=?pos?>=?100100?:?pos;
pos?=?pos?<=?00?:?pos;
node.style.backgroundPosition?=?pos?+?'%?center';
},?20);
}
},?false);
div.addEventListener('mouseout',?function()?{
dir?=?1;
},?false);
})();
</script>
希望能幫妳解決問題，如有疑問可以追問。