Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/403.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 放大或缩小到多张照片_Javascript_Jquery_Html_Css - Fatal编程技术网

Javascript 放大或缩小到多张照片

Javascript 放大或缩小到多张照片,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想在单击原始照片时进行照片缩放。 我已经使用了下面的代码。 单击照片,然后显示缩放图像时,我没有问题。 但根据我的程序要求,我的网页上有多张照片。 因此,当我单击第一张照片时,这张照片就会放大。 然后我需要再次单击此照片,以便此照片恢复正常。 这是我的程序代码流。 假设用户忘记单击当前放大照片,使其再次成为正常大小。 假设它仍在放大。 然后用户单击另一张照片进行缩放。 此时,用户想要放大的照片没有变成放大。 因为第一张照片仍在放大。 这是我的问题 所以 1) 当用户单击另一张照片进行缩放时,我

我想在单击原始照片时进行照片缩放。
我已经使用了下面的代码。
单击照片,然后显示缩放图像时,我没有问题。
但根据我的程序要求,我的网页上有多张照片。
因此,当我单击第一张照片时,这张照片就会放大。
然后我需要再次单击此照片,以便此照片恢复正常。
这是我的程序代码流。

假设用户忘记单击当前放大照片,使其再次成为正常大小。
假设它仍在放大。
然后用户单击另一张照片进行缩放。
此时,用户想要放大的照片没有变成放大。
因为第一张照片仍在放大。

这是我的问题

所以

1) 当用户单击另一张照片进行缩放时,我怎么知道其中一张照片仍在放大。
2) 如果jquery代码可以知道这种情况,请告诉我。
3) 那么,如果jquery能够了解这种情况,我如何删除用户忘记单击的当前放大照片,以便再次生成正常大小。
4) 我应该在当前jquery代码中添加什么代码,请告诉我。

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.quickZoom.1.0.js"></script>
<script tyle="text/javascript">     
        $(document).ready(function() {          
            $('.OrignialImage').quickZoom({
                zoom: 4,
                speedIn: 500,
                speedOut: 200,
                easeIn:'easeOutBack',
                titleInSpeed: 200       
            });             

        });
</script>

.OrignialImage{width:150px; height:150px;}
.HtmlTableHeight{width: 160px; height: 160px;}
.quickZoom-hoverShadow {-moz-box-shadow:0 0 10px 0 #000;
-webkit-box-shadow:0 0 10px 0 #000;
box-shadow:0 0 10px 0 #000;}
<table border="1" height="1000px" cellpadding="0" cellspacing="0">
        <tr class="HtmlTableHeight" ><td><img src="images/C003.jpg" alt="title" class="OrignialImage" /></td></tr> 
        <tr class="HtmlTableHeight" ><td><img src="images/C003_2.jpg" alt="title" class="OrignialImage" /></td></tr> 
        <tr class="HtmlTableHeight" ><td><img src="images/C003_3.jpg" alt="title" class="OrignialImage" /></td></tr> 
        <tr class="HtmlTableHeight" ><td><img src="images/C003_4.jpg" alt="title" class="OrignialImage" /></td></tr> 
        <tr class="HtmlTableHeight" ><td><img src="images/C003.jpg" alt="title" class="OrignialImage" /></td></tr> 
        <tr class="HtmlTableHeight" ><td><img src="images/C003_3.jpg" alt="title" class="OrignialImage" /></td></tr> 
    </table>
/*
 * quickZoom 0.1.0 - JavaScript Image viewer
 * Copyright (c) 2011 Louis Sawtell, contact@louis-sawtell.com, http://louis-sawtell.com
 *
 * I make modify his coding as my requirement.
*/

(function($) {
$.fn.quickZoom = function(options) {
    var thumbX, thumbY;
    var IsFinishedFirstClick = false;

    // define default values
    var defaults = {            
        shadow: true
    };
    // merge the defaults with given parameters
    var e = $.extend(defaults, options);
    // set $(this) to var to speed up code
    var myThis = $(this);

    var OriginalPictureTop = 0;
    var OriginalPictureLeft = 0;
    myThis.click(function(){

        if(IsFinishedFirstClick != true)
        {
            // this code for first time click to image.                             
            // assign vars to avoid overusing $(this)
            var target = $(this);

            OriginalPictureTop = target.offset().top;
            OriginalPictureLeft = target.offset().left;

            // get thumbnail dimensions
            thumbX = target.width();
            thumbY = target.height();

            // get zoomed dimensions
            var zoomX = thumbX*e.zoom;
            var zoomY = thumbY*e.zoom;

            // If the thumbnail doesn't represent the image aspect ratio..
            if (e.sqThumb) {
                // create img var to gather full size dimensions
                var img = new Image();
                img.src = target.attr("src");

                // get aspect ratio
                var ratio = img.height/img.width;
                // apply ratio
                zoomY = zoomY*ratio;
            }

            // this is the offset for the title
            var marginX = (zoomX-thumbX)/2;
            var marginY = (zoomY-thumbY)/2;

            // add z-index and optional shadow
            if (e.shadow) {target.addClass('quickZoom-hoverShadow');}
            target.css({'z-index':10});

            target.css({
                position: "fixed",
                top:10+"px",
                left:200+"px",                  
            })                      
            target.stop(true, false).animate({              
                width:zoomX+'px',
                height:zoomY+'px',              
            }, { 
                // This place for even which fire after animate.                    
            });
            IsFinishedFirstClick = true;
        }
        else
        {
            //this code for second click.                               
            var target = $(this);

            target.css({    
                position:"absolute",
                top:OriginalPictureTop+"px",
                left:OriginalPictureLeft+"px",                  
            })
            target.stop(true, false).animate({                  
                width: thumbX+'px',
                height: thumbY+'px',                    
            }, {
                duration: e.speedOut,
                easing: e.easeOut,
                complete: function() {
                    target.css({'z-index':1});
                }
            });

            target.removeClass('quickZoom-hoverShadow');
            target.css({'z-index':2});

            IsFinishedFirstClick = false;
            OriginalPictureTop = 0;
            OriginalPictureLeft = 0;                
        }
    });     
    }
})(jQuery);

声明一个全局变量,该变量在运行缩放功能时设置,然后在用户手动减小缩放时清除。通过这种方式,您可以在用户单击“缩放”时进行检查,以查看用户是否未能手动缩小

抱歉,因为我没有机会检查这个(目前正在我的午餐中),但希望你明白我所说的要点

var zoomState; // Outside of the function to declare globally.

    $(document).ready(function() {          
        $('.OrignialImage').click(function() {

         if (zoomState != null) {
             // Auto decrease zoom.

         } else {

            $('.OriginalImage').quickZoom({
            zoom: 4,
            speedIn: 500,
            speedOut: 200,
            easeIn:'easeOutBack',
            titleInSpeed: 200       
        });   

           zoomState = $(this);  // Set zoomState.
        } // end if    
       });     

    });