Question

我正在制作横幅，你可以调整大小并拖动图像。我在jsfiddle工作得很好。但由于某些原因，它不适用于我的网页。

以下是jsfiddle中的示例：
http://jsfiddle.net/DennisBetman/tnaGA/

以下是我在网页上的显示方式：
http://jewelbeast.com/posts/imgreplace.html

所以，如果你能看到。滑块不起作用。而且可拖动的图像很奇怪。

我在脚本中调用了脚本jquery和jquery ui。

他是我用于网页的代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Draggable - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style>
    div {
        width:370px;
        height:204px;
        position:relative;
        overflow:hidden;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
    }

    #box{
        background:black;
        cursor: move;
        border: 1px solid black;
    }


    #hidden-img{
        display:none;
    }
    </style>
</head>

<body>
    <div id="box">
        <img src="http://www.hdwallpapersarena.com/wp-content/uploads/2013/04/high-resolution-fantasy-woman.jpg" id="hidden-img" />
        <img src="http://www.hdwallpapersarena.com/wp-content/uploads/2013/04/high-resolution-fantasy-woman.jpg" id="img" width="371" height="auto" style="top:-0px; left:-0px;" />
    </div>
    <!-- style="top:-262px; left:-425px;" -->
    <div id="zoom"></div> 
    <input type="hidden" id="amount-width" style="border: 0; color: #f6931f; font-weight: bold;" />
    <input type="hidden" id="amount-height" style="border: 0; color: #f6931f; font-weight: bold;" />

    <div class="text"></div>

    <p>
        Position x:
        <input type="text" id="val-x" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>
    <p>
        Position y:
        <input type="text" id="val-y" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>

    <p>
        <input type="file" onchange="readURL(this);" />
    </p>
    <script>
    var previousValue = 0;
    var hiddenImageWidth = $("#hidden-img").width() - 370;

    jQuery("#zoom").slider({
            max: hiddenImageWidth,
            slide: function(event, ui){

            var sliderValue =  jQuery("#zoom").slider("value");
            jQuery("#img").width(370 + sliderValue);

            var pos = $("#img").position(); // returns an object with the attribute top and left
            var top = pos.top;  // top offset position
            var left = pos.left; // left offset position

            $("#val-x").val(left);
            $("#val-y").val(top);

            if (left > 0){
                $("#img").css("left",'0px');
            }

            if (top > 0){
                $("#img").css("top",'0px');
            }

            $("#amount-width").val(jQuery("#img").css("width"));
            $("#amount-height").val(jQuery("#img").css("height"));

            var width = $("#img").width();
            var widthZoom = width + sliderValue;
            var widthVerschil = widthZoom - sliderValue;
            var totalWidth = widthVerschil - '370';

            var height = $("#img").height();
            var totalHeight = height - '207';

            if (sliderValue < previousValue){
              var t, l;
              t = $('#img').position().top;
              l = $('#img').position().left;
              if(t < 0)
                  t = t + (previousValue - sliderValue);
              if(l < 0)
                  l = l + (previousValue - sliderValue);
              $('#img').offset({top: t, left: l});
            }
            previousValue = sliderValue;

            $("#img").draggable({
                containment: [-totalWidth, -totalHeight, 0, 0],
                scroll: false,
                iframeFix: true,
            }); 
            $('.text').html('<br/>The file size = ' + height + ' x ' + widthVerschil);

          }

    });

    var height = $("#img").height();
    var totalHeight = height - '207';

    $("#img").draggable
    ({
        containment: [0, -totalHeight, 0, 0],
        snap: false,
        drag: function(event, ui)
        {
            $("#val-x").val(ui.position.left);
            $("#val-y").val(ui.position.top);

        }   

    });

    $("#img").offset({left: $(this).attr('position')});


    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#img')
                    .attr('src', e.target.result)

            };
            reader.readAsDataURL(input.files[0]);
        }
    }

</script>
</body>
</html>

你可以看到我的脚本让我的身体发生了。我试着把它放在我的头脑中，但没有任何效果，你不会看到滑块。等。

我也试过放置这个脚本

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

在我的脚本功能下。但那也不会奏效。

我希望有人看到问题。

感谢。

Answer 1

你必须将你的jquery的代码包装在document ready函数中：

   var previousValue = 0;
 var hiddenImageWidth = $("#hidden-img").width() - 370;


 $(document).ready(function () {
     jQuery("#zoom").slider({
         max: hiddenImageWidth,
         slide: function (event, ui) {

             var sliderValue = jQuery("#zoom").slider("value");
             jQuery("#img").width(370 + sliderValue);

             var pos = $("#img").position(); // returns an object with the attribute top and left
             var top = pos.top; // top offset position
             var left = pos.left; // left offset position

             $("#val-x").val(left);
             $("#val-y").val(top);

             if (left > 0) {
                 $("#img").css("left", '0px');
             }

             if (top > 0) {
                 $("#img").css("top", '0px');
             }

             $("#amount-width").val(jQuery("#img").css("width"));
             $("#amount-height").val(jQuery("#img").css("height"));

             var width = $("#img").width();
             var widthZoom = width + sliderValue;
             var widthVerschil = widthZoom - sliderValue;
             var totalWidth = widthVerschil - '370';

             var height = $("#img").height();
             var totalHeight = height - '207';

             if (sliderValue < previousValue) {
                 var t, l;
                 t = $('#img').position().top;
                 l = $('#img').position().left;
                 if (t < 0) t = t + (previousValue - sliderValue);
                 if (l < 0) l = l + (previousValue - sliderValue);
                 $('#img').offset({
                     top: t,
                     left: l
                 });
             }
             previousValue = sliderValue;

             $("#img").draggable({
                 containment: [-totalWidth, -totalHeight, 0, 0],
                 scroll: false,
                 iframeFix: true,
             });
             $('.text').html('<br/>The file size = ' + height + ' x ' + widthVerschil);

         }

     });

     var height = $("#img").height();
     var totalHeight = height - '207';

     $("#img").draggable({
         containment: [0, -totalHeight, 0, 0],
         snap: false,
         drag: function (event, ui) {
             $("#val-x").val(ui.position.left);
             $("#val-y").val(ui.position.top);

         }

     });

     $("#img").offset({
         left: $(this).attr('position')
     });
 });

 function readURL(input) {
     if (input.files && input.files[0]) {
         var reader = new FileReader();

         reader.onload = function (e) {
             $('#img')
                 .attr('src', e.target.result)

         };
         reader.readAsDataURL(input.files[0]);
     }
 }

Jquery滑块和拖动不起作用

1 个答案: