使用Jquery拖动带有背景图片的Div层。

发布网友发布时间：2022-04-21 07:29

共1个回答

热心网友时间：2022-04-21 08:59

没人回答，我自己回答吧……

css 样式：
#divOuter
{
width: 288px;
height: 335px;
border: 1px solid #797979;
margin: 20px 23px 0 35px;
overflow: hidden;
}
#divInner
{
width: 1440px;
height: 900px;
background-image: url( '../img/view.jpg' );
}

js 代码
var mouseDown = false;
$(document).ready(function(){
$("#divInner").mousedown(function(){
mouseDown=true;
offsetX = event.offsetX;
offsetY = event.offsetY;
$(this).css('cursor','move');
});
$("#divInner").mouseup(function(){
mouseDown = false;
});
$("#divInner").mousemove(function(){
if(!mouseDown)
return;
var x = event.clientX-offsetX;
var y = event.clientY-offsetY;
$("#divInner").offset({left:x,top:y});
$("#divInner").css('cursor','move');
});
$("#divOuter").mouseout(function(){
mouseDown = false;
});
});