javascript - jQuery 放大/缩小完整的 div

Question

这是我实现放大、缩小、原始大小和全屏的源代码。它仅增加“列表”id 的宽度和高度，但不会影响整个内容的大小。如何使用 jQuery 实现整个内容。 JSFIDDLE

HTML

<div class='tree'>
<li id="list">
  <div class='emplist'>
    <div class='deptRow'>
      <h3>Research & Development</h3>
    </div>
    <hr>
    <div class='detailsRow'>
      <div class='detailsCol'>
        <h3 class='empName'>Satayanarayana Rao</h3>
        <p class='subTitle'>Project Manager
          <br>Hyderabad</p>
      </div>
      <div class='imgCol'><img src='C:/Users/Reddy/Downloads/ragava.jpg' alt='abc' /></div>
    </div>
    <hr>
    <div class='infoRow'>
      <div class='infoMore'>
        <p>more +5</p>
      </div>
      <div class='infoMore pull-right text-right R'><a href="#" class="btn btn-default btn-xs text-center">info
</a></div>
    </div>
  </div>
</li>

</div>

<button id='btn_ZoomIn'>+</button>
<button id='btn_ZoomOut'>-</button>
<button id='btn_ZoomReset'>1:1</button>
<button id='btn_ZoomFull'>Full Screen</button>

jQuery:

var resetW = $('#list').width();
var resetH = $('#list').height();

var currentZoomW = resetW;
var currentZoomH = resetH;

$('#btn_ZoomReset').on('click', function(){

        $('#list').width(resetW);
        $('#list').height(resetH);

    });
//alert(currentZoom);
 $('#btn_ZoomOut').on('click', function(){
        currentZoomW = currentZoomW - 5;
        currentZoomH = currentZoomH - 5;

        $('#list').width(currentZoomW);
        $('#list').height(currentZoomH);

    });


  $('#btn_ZoomIn').on('click', function(){
        currentZoomW = currentZoomW + 5;
        currentZoomH = currentZoomH + 5;

        $('#list').width(currentZoomW);
        $('#list').height(currentZoomH);

    });

CSS

hr{color:#000;}
.tree{width:450px;height:300px;border:2px dotted #f00;}
#list{border:1px dashed #000;}

.emplist h3, .emplist p{padding:5px 0px 0px 5px !important;margin:0px !important;}
.emplist{
    width:360px !important;
    height: 160px !important;
    border:1px solid #aaa;
    border-radius:5px;
    color:#333;
    transition: box-shadow 1s;    
    position:relative;   
    cursor:move;
    !top:50%;
    !left:50%;
}
.emplist:hover{box-shadow: 0 0 8px #000;}
.deptRow, .detailsRow{border-bottom:1px solid #aaa;}
        .deptRow, .infoRow{
            width:100%;
            height:20%;
            float:left;
            font-family: 'Rubik', sans-serif !important;
            color:#00aff0;
        }

        .detailsRow{
            float:left;
            width:100%;
            height:55%;
        }

        .detailsCol, .imgCol, .infoMore{float:left;height:100%;}
        .detailsCol{width:69%;}

        .imgCol{width:30%;}
        .imgCol img{border:1px solid #ccc;margin:5px;}

        .infoMore, .infoMoreR{width:50%;font-size:12px;}
        .infoMore p {
            padding-right: 20px;
            float:left;
         }

        .R a{margin:5px;}


        .empName{font-family: 'Josefin Sans', sans-serif;}
        .subTitle{
            !font-family: 'Bilbo', cursive;
            !text-align:right;
            padding-right:20px;
            font-weight:880px;          
            font-family: 'Dekko', cursive;}

Answer 1

Check snippet below. its may help you. its working zoom in zoom-out with text img

var resetW = $('.list').width();
    //var resetH = $('#list').height();


    var currentZoomW = resetW;
    //var currentZoomH = resetH;
    var originalSize = $('.emplist h3,div').css('font-size');

    $('#btn_ZoomReset').on('click', function(){
            
            $('.list').width(resetW);
            //$('.list').height(resetH);
            $('.emplist h3,div').css('font-size', originalSize);

        });
    //alert(currentZoom);
     $('#btn_ZoomOut').on('click', function(){
            currentZoomW = currentZoomW - 5;
            //currentZoomH = currentZoomH - 5;

            $('.list').width(currentZoomW);
            //$('#list').height(currentZoomH);
            var currentFontSize = $('.emplist h3,div').css('font-size');
            var currentSize = $('.emplist h3,div').css('font-size'); 
            var currentSize = parseFloat(currentSize)*0.8;
            $('.emplist h3,div').css('font-size', currentSize);

        });
      
      
      $('#btn_ZoomIn').on('click', function(){
            currentZoomW = currentZoomW + 5;
           // currentZoomH = currentZoomH + 5;
            var currentSize = $('.emplist h3,div').css('font-size'); 
            var currentSize = parseFloat(currentSize)*1.2;
            $('.emplist h3,div').css('font-size', currentSize);

            $('.list').width(currentZoomW);
            //$('#list').height(currentZoomH);

        });

hr{color:#000;}
    .tree{width:450px;height:220px;border:2px dotted #f00; overflow:scroll}
    .list{border:1px dashed #000;margin-bottom:20px}

    .emplist h3, .emplist p{word-wrap: break-word;padding:5px 0px 0px 5px !important;margin:0px !important;}
    .emplist{
        width:100% !important;
    	height:auto !important;
    	border:1px solid #aaa;
    	border-radius:5px;
    	color:#333;
    	transition: box-shadow 1s;    
        position:relative;   
        cursor:move;
        !top:50%;
        !left:50%;
    }
    .emplist:hover{box-shadow: 0 0 8px #000;}
    .deptRow, .detailsRow{border-bottom:1px solid #aaa;}
    		.deptRow, .infoRow{
    			width:100%;
    			
    			float:left;
    			font-family: 'Rubik', sans-serif !important;
    			color:#00aff0;
    		}

    		.detailsRow{
    			float:left;
    			width:100%;
    		
    		}

    		.detailsCol, .imgCol, .infoMore{float:left;height:100%;}
    		.detailsCol{width:69%;word-wrap: break-word;}

    		.imgCol{width:30%;}
        img{}
    		.imgCol img{border:1px solid #ccc;margin:5px;width:100%}

    		.infoMore, .infoMoreR{width:50%;font-size:12px;}
            .infoMore p {
                padding-right: 20px;
                float:left;
             }

    		.R a{margin:5px;}


    		.empName{font-family: 'Josefin Sans', sans-serif;}
    		.subTitle{
    			!font-family: 'Bilbo', cursive;
    			!text-align:right;
    			padding-right:20px;
    			font-weight:880px;			
    			font-family: 'Dekko', cursive;
          }
          .emplist:after,.detailsRow:after{
             content:""; 
            display:block; 
           
            clear:both;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='tree'>
<li class="list">
  <div class='emplist'>
    <div class='deptRow'>
      <h3>Research & Development</h3>
    </div>
    <hr>
    <div class='detailsRow'>
      <div class='detailsCol'>
        <h3 class='empName'>Satayanarayana Rao</h3>
        <p class='subTitle'>Project Manager
          <br>Hyderabad</p>
      </div>
      <div class='imgCol'><img src='http://i59.tinypic.com/w8xik5.jpg' alt='abc' /></div>
    </div>
    <hr>
    <div class='infoRow'>
      <div class='infoMore'>
        <p>more +5</p>
      </div>
      <div class='infoMore pull-right text-right R'><a href="#" class="btn btn-default btn-xs text-center">info
</a></div>
    </div>
  </div>
</li>

<li class="list">
  <div class='emplist'>
    <div class='deptRow'>
      <h3>Research & Development</h3>
    </div>
    <hr>
    <div class='detailsRow'>
      <div class='detailsCol'>
        <h3 class='empName'>Satayanarayana Rao</h3>
        <p class='subTitle'>Project Manager
          <br>Hyderabad</p>
      </div>
      <div class='imgCol'><img src='http://i59.tinypic.com/w8xik5.jpg' alt='abc' /></div>
    </div>
    <hr>
    <div class='infoRow'>
      <div class='infoMore'>
        <p>more +5</p>
      </div>
      <div class='infoMore pull-right text-right R'><a href="#" class="btn btn-default btn-xs text-center">info
</a></div>
    </div>
  </div>
</li>

<li class="list">
  <div class='emplist'>
    <div class='deptRow'>
      <h3>Research & Development</h3>
    </div>
    <hr>
    <div class='detailsRow'>
      <div class='detailsCol'>
        <h3 class='empName'>Satayanarayana Rao</h3>
        <p class='subTitle'>Project Manager
          <br>Hyderabad</p>
      </div>
      <div class='imgCol'><img src='http://i59.tinypic.com/w8xik5.jpg' alt='abc' /></div>
    </div>
    <hr>
    <div class='infoRow'>
      <div class='infoMore'>
        <p>more +5</p>
      </div>
      <div class='infoMore pull-right text-right R'><a href="#" class="btn btn-default btn-xs text-center">info
</a></div>
    </div>
  </div>
</li>

</div>

<button id='btn_ZoomIn'>+</button>
<button id='btn_ZoomOut'>-</button>
<button id='btn_ZoomReset'>1:1</button>
<button id='btn_ZoomFull'>Full Screen</button>