<head>
<title>jquery或JS拖动DIV左右移动</title>
<script src="jquery-1.7.1.min.js"></script>
<style type="text/css">
body {background-color: #fff }
.win {position: absolute top: 0px left: 0pxwidth: 300pxheight: 222px}
.title {height: 20pxwidth: 300px position: absolutebackground-color: #0094ff float: inherit top: 0px left: 0px }
.winCon { height: 200pxwidth: 298px position: absolute border: solid
border-width: 1px border-color: #0094ff border-top: none float: inherit left: 0px top: 20px }
</style>
</head>
<body onload="showDiv(this,'test1')">
</body>
<script type="text/javascript">
function showDiv(element, str) {
$(document.body).append("<div class='win' id='win" + str + "'><div class='title' id='" + str + "'></div><div class='winCon'> 清新自在</div></div>")
$("#" + str).mousedown(function (event) {
var offset = $(this).offset()
_x = event.clientX - offset.left
_y = event.clientY + 20 - offset.top
$("#win" + str).css({ "top": offset.top - 20 + "px" })
$("#win" + str).mousemove(function (event) {
_xx = event.clientX - _x
_yy = event.clientY - _y
this.style.left = _xx + "px"
this.style.top = _yy + "px"
this.style.zIndex = "100"
return false
})
return false
})
$("#win" + str).mouseup(function () {
$(this).unbind("mousemove")
$(this).css({ "z-index": "-1" })
return false
})
}
</script>
</html>
<!DOCTYPE HTML><html>
<head>
<meta charset=utf-8 />
<title>UFO来了</title>
<script>
window.onload = function() {
var i = 10
var j = 0
var e = target
var win = document.documentElement || document.body
function intern() {
var width = e.clientWidth
var height = e.clientHeight
var left = parseFloat(e.style.left)
var top = parseFloat(e.style.top)
var windowWidth = win.clientWidth
var windowHeight = win.clientHeight
if (windowWidth - width < (left + i)) {
i = -i
} else if ((left + i) < 0) {
i = -i
}
if (windowHeight - height < (top + j)) {
j = -j
} else if ((top + j) < 0) {
j = -j
}
e.style.left = left + i + "px"
e.style.top = top + j + "px"
}
setInterval(intern, 30)
}
</script>
</head>
<body>
<div id="target" style="border-radius:90pxbackground-color: red width: 30px height: 30px position: absolute top:100px left: 0px"></div>
</body>
</html>
你好，给你写了一个很基础的例子。参照着自己优化成你想要的效果吧。
示例是这样的，鼠标移动到div上，背景图片会从左往右移动直至最右端。鼠标移出div，背景图标从右往左直至最左端。
备注：考虑到宽度变化，本例背景图片使用百分比定位。根据你的实际情况也可改为使用像素(px)定位。
<style>.bg-div {
height: 110px
background: url(https://gss0.bdstatic.com/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 >= 100 ? 100 : pos
pos = pos <= 0 ? 0 : pos
node.style.backgroundPosition = pos + '% center'
}, 20)
}
}, false)
div.addEventListener('mouseout', function() {
dir = 1
}, false)
})()
</script>
希望能帮你解决问题，如有疑问可以追问。
