jQuery的 - 拖动DIV + CSS背景 [英] jQuery - drag div css background
本文介绍了jQuery的 - 拖动DIV + CSS背景的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望能够点击握住我的鼠标一个div内移动它的背景。搜索对谷歌有很多,并没有找到我想要的东西。
I'd like to be able to click hold my mouse inside a div and move it's background. Searched a lot on google and didn't found what I wanted.
下面是目标(显示的地图是拖动对象): http://pontografico.net/pvt/gamemap/一>
Here's the target (the map displayed is the object to drag) : http://pontografico.net/pvt/gamemap/
任何提示吗?
干杯!
推荐答案
好了,得到这个工作;我想我得到了所有的琐碎的问题:
Alright, got this to work; I think I got all the kinks out:
最后的jQuery与边界限制的
Final jQuery with Bounding Limits
$(document).ready(function(){
var $bg = $('.bg-img'),
elbounds = {
w: parseInt($bg.width()),
h: parseInt($bg.height())
},
bounds = {w: 2350 - elbounds.w, h: 1750 - elbounds.h},
origin = {x: 0, y: 0},
start = {x: 0, y: 0},
movecontinue = false;
function move (e){
var inbounds = {x: false, y: false},
offset = {
x: start.x - (origin.x - e.clientX),
y: start.y - (origin.y - e.clientY)
};
inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w;
inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h;
if (movecontinue && inbounds.x && inbounds.y) {
start.x = offset.x;
start.y = offset.y;
$(this).css('background-position', start.x + 'px ' + start.y + 'px');
}
origin.x = e.clientX;
origin.y = e.clientY;
e.stopPropagation();
return false;
}
function handle (e){
movecontinue = false;
$bg.unbind('mousemove', move);
if (e.type == 'mousedown') {
origin.x = e.clientX;
origin.y = e.clientY;
movecontinue = true;
$bg.bind('mousemove', move);
} else {
$(document.body).focus();
}
e.stopPropagation();
return false;
}
function reset (){
start = {x: 0, y: 0};
$(this).css('backgroundPosition', '0 0');
}
$bg.bind('mousedown mouseup mouseleave', handle);
$bg.bind('dblclick', reset);
});
http://jsfiddle.net/userdude/q6r8f/4/
的原来的答案的
HTML
<div class="bg-img"></div>
CSS
div.bg-img {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/9/91/Flexopecten_ponticus_2008_G1.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-color: blue;
border: 1px solid #aaa;
width: 250px;
height: 250px;
margin: 25px auto;
}
的jQuery
$(document).ready(function(){
var $bg = $('.bg-img'),
origin = {x: 0, y: 0},
start = {x: 0, y: 0},
movecontinue = false;
function move (e){
var moveby = {
x: origin.x - e.clientX,
y: origin.y - e.clientY
};
if (movecontinue === true) {
start.x = start.x - moveby.x;
start.y = start.y - moveby.y;
$(this).css('background-position', start.x + 'px ' + start.y + 'px');
}
origin.x = e.clientX;
origin.y = e.clientY;
e.stopPropagation();
return false;
}
function handle (e){
movecontinue = false;
$bg.unbind('mousemove', move);
if (e.type == 'mousedown') {
origin.x = e.clientX;
origin.y = e.clientY;
movecontinue = true;
$bg.bind('mousemove', move);
} else {
$(document.body).focus();
}
e.stopPropagation();
return false;
}
function reset (){
start = {x: 0, y: 0};
$(this).css('backgroundPosition', '0 0');
}
$bg.bind('mousedown mouseup mouseleave', handle);
$bg.bind('dblclick', reset);
});
http://jsfiddle.net/userdude/q6r8f/2/
这篇关于jQuery的 - 拖动DIV + CSS背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文