مهدی
4 سال پیش توسط مهدی مطرح شد
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>