مهدی
3 سال پیش توسط مهدی مطرح شد
0 پاسخ

هماهنگ سازی کد jquery برای اندروید -تاچ صفحه-

سلام خدمت اساتید
این تیکه کد در داخل مرورگر سیستم بدون مشکل اجرا میشه و با موس میتونم تصویر رو جابجا کنم اما با مرورگر اندروید مشکل داره و اجرا نمیشه
اگه امکانش هست راهنمایی کنید برای هماهنگ سازی با اندروید چکار کنم که با تاچ مشکلی نداشته باشه
تشکر


<!DOCTYPE html>
<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>

ثبت پرسش جدید

به همدیگه کمک کنیم

به مهدی کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام