js:zoomin、out

6692 ワード
front end 
/**
 *                 
 */

 function knowImgSize(id) {
    var idWidth = $(id).width(),  //         
        idHeight = $(id).height();

    $(id + ' img').each(function(index,img){
        var img_w = $(this).width(),
            img_h = $(this).height();

        //                            
        if(img_w > idWidth) {
            
            var height = img_h * idWidth / img_w;
            $(this).css({"width":idWidth, "height":height});
        }
    });

 }

 //    
 $(function(){
    knowImgSize("#demo1");
 });
js拡大縮小ページを実現
firefox、chrom、ie 11でテストしましたが、他のテストはできません.


＜span/>var size=1.0; 


＜span/>function zoomout(){ 


 size=size+0.1 


 セット() 


> 






function zoomin(){ 


 size=size-0.1 


 セット() 


> 






＜span/>function set(){ 


 //document.body.style.cssText=document.body.style.cssText+'、-webkit-trnsform:scale('+size+')、-webkit-transform-origgin:0;;;  


 //document.body.style.cssText=document.body.style.cssText+'、-webkit-tranform:scale('+size+');; 


 //$(body).css(「width」、「120%);


＜span/＞Dcument.body.style.zoom=size;


document.body.style.cssText+'、-moz-transform:scale('+size+')、-moz-trans form-origgin:0';   //


> 

   










＜ol start=“1”class=“dp-c”＞
＜li class＝「alt」＜span class＞＜span class＝「comment」＞/* 

  •          * ズーム関数zoomItは、実際にズームしたのはelの内部元素です. 
    • ＜li class＝“alt”＜span class＞＜span class＝“comment”＞         * @パラム {html Elemnt} el ズーム目標htmlElement     
  •          * @パラム {Number} xScale x方向のズーム比 
    • ＜li class＝“alt”＜span class＞＜span class＝“comment”＞         * @パラム {Number} yScale y方向拡大率     
  •          */  
    • ＜li class=“alt”＜span＞        zoomIt :  xScale yScale) {  
  •              S = KISSY  
    • ＜li class=“alt”＜span＞                スタイル = $(el).atr(「style」) ||   
  •              {  
    • ＜li class=“alt”＜span＞                  
  •                 $(el).css( scale(' + xScale +  + yScale +   
    • ＜li class=“alt”＜span＞                  
  •                 $(el).css( 0 px 0 px'  
    • ＜li class=“alt”＜span＞            }  
  •              if > 9) {  
    • ＜li class=“alt”＜span＞                $(el).css( scale(' + xScale +   
  •                 $(el).css( 0 px 0 px'  
    • ＜li class=“alt”＜span＞            }  
  •              if 
    • ＜li class=“alt”＜span＞                $(el).css('zoom' xScale);  
  •             }  
    • ＜li class=“alt”＜span＞             {  
  •                 $(el).css( scale(' + xScale +  +  yScale +   
    • ＜li class=“alt”＜span＞                $(el).css( 0 px 0 px'  
  •             }  
    • ＜li class=“alt”＜span＞        }  




    ＜p＞ブラウザでの判断は、ここでKISSYが使われているということです.属性操作にはJQが使われています.読者は自分の習慣に応じて修正ができます.




        $(document).ready(function(){  
        var num=0;   
        $('#button').click(function(e){   
            if(num++ %2 == 0){   
                $('#part2').height($(document).height() - 20);  
                document.getElementById("part2").style.float="right";  
                document.getElementById("part2").style.left=0;  
                document.getElementById("part2").style.zIndex="2";  
                document.getElementById("part3").style.zIndex="1";  
                $('#button').html('↘↙');  
                $("#gridOrg").data("kendoGrid").refresh();  
                $("#gridWorkMonth").data("kendoGrid").refresh();   
            }else{   
                $('#part2').height($('#fade').height() - $('#part3').height()-20);  
                document.getElementById("part2").style.left='305px';  
                $('#button').html('↖↗');  
                $("#gridOrg").data("kendoGrid").refresh();  
                $("#gridWorkMonth").data("kendoGrid").refresh();  
            }   
        });   
       });













    js取得ページの高さ、幅