i_plus_plus
Registered User
- تاریخ عضویت
- 8 ژانویه 2013
- نوشتهها
- 156
- لایکها
- 19
سلام خدمت اساتید
این تیکه کد در داخل مرورگر سیستم بدون مشکل اجرا میشه و با موس میشه تصویر رو حرکت داد اما با مرورگر اندروید مشکل داره و اجرا نمیشه
اگه امکانش هست راهنمایی کنید برای هماهنگ سازی با اندروید چکار کنم که با تاچ مشکلی نداشته باشه
تشکر
این تیکه کد در داخل مرورگر سیستم بدون مشکل اجرا میشه و با موس میشه تصویر رو حرکت داد اما با مرورگر اندروید مشکل داره و اجرا نمیشه
اگه امکانش هست راهنمایی کنید برای هماهنگ سازی با اندروید چکار کنم که با تاچ مشکلی نداشته باشه
تشکر
HTML:
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
></script>
<style id="compiled-css" type="text/css">
div.bg-img {
background-image: url(new.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-color: blue;
border: 1px solid #aaa;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
}
/* EOS */
</style>
</head>
<body>
<div class="bg-img"></div>
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
var $bg = $('.bg-img'),
//data = $('#data')[0],
elbounds = {
w: parseInt($bg.width()),
h: parseInt($bg.height())
},
bounds = {w: 1728 - elbounds.w, h: 1296 - 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)
};
//data.value = 'X: ' + offset.x + ', Y: ' + offset.y;
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);
}); //]]></script>
</body>
</html>