请问一下关于javascript动态调整背景图片位置的代码

来源：百度知道 编辑：UC知道 时间：2024/06/02 18:25:33
我想做出一种鼠标滑过效果，划过的时候背景会移动，而不是在显示与消失间变换。我的方案是（简化了）：鼠标滑过时获得当前块背景图像的纵向坐标位置，然后把这个位置加1像素再赋值给背景图像的纵向坐标，使其向下移动一个像素，每隔一段时间进行一次，这样形成一种鼠标滑过背景图片向下移动的效果。
核心问题是：如何获得背景图像纵向坐标位置，如何为这个位置赋值？
我用过document.getElementById("xx").style.backgroundPosition,用它获得位置时显示为空
呵呵，一楼的朋友还是忽略了我的问题很重要的一方面，我只想获得某一个方向的位置，或者是x值或者是y值

大概是看明白了你的意思

要获取背景的位置需要在CSS中先定义位置,然后获取坐标---操作数据---回写.就是这么个流程.

我给你写了段代码,你看看是不是这个效果,获取坐标的方法你应该能看懂,很简单

<script type="text/javascript">
function bdgo(){
position = document.getElementById('divs').style.backgroundPosition.replace(/px/g,"");
xy = position.split(" ");
x = xy[0];
y = xy[1];
y = y - 1;
document.getElementById('divs').style.backgroundPosition = x + "px " + y + "px";
window.setTimeout('bdgo()',30);
}
</script>
<div id="divs" style=" width:500px; height:200px; border:#333 1px solid; background:url(b.jpg) repeat-y; background-position:0px 0px" onmouseover="bdgo()"></div>

好像是：document.getElementById("xx").style.background-position
或者：document.getElementById("xx").style.background.position