js :zoomin ,out

/**
 * 已知图片的宽度和高度的等比例缩放
 */

 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,ie11测试过可以，其它未测

<script type="text/javascript">

var size = 1.0;  
function zoomout() {  
 size = size + 0.1;  
 set(); 
}  


function zoomin() {  
 size = size - 0.1;  
 set();  
}  


function set() {  
 //document.body.style.cssText = document.body.style.cssText + '; -webkit-transform: scale(' + size + ');-webkit-transform-origin: 0 0;';   
 //document.body.style.cssText = document.body.style.cssText + '; -webkit-transform: scale(' + size + '); '; 
 //$(body).css("width","120%);
document.body.style.zoom = size;
document.body.style.cssText += '; -moz-transform: scale(' + size + ');-moz-transform-origin: 0 0; ';     //
} 
    </script>

1. /* 
2.          * 缩放函数zoomIt，它实际缩放的是el的内部元素 
3.          * @param {htmlElemnt} el 缩放目标htmlElement 
4.          * @param {Number} xScale x方向缩放比例 
5.          * @param {Number} yScale y方向缩放比例 
6.          */  
7.         zoomIt : function(el, xScale, yScale) {  
8.             var S = KISSY,  
9.                 style = $(el).attr('style') || "";  
10.             if(S.UA['firefox']) {  
11.                 // x轴方向和y方向分别缩放的比例  
12.                 $(el).css('transform', 'scale(' + xScale + ', ' + yScale + ')');  
13.                 // 缩放后，相对于父元素左上角的偏移量  
14.                 $(el).css('transform-origin', '0px 0px');  
15.             }  
16.             else if(S.UA['ie'] >= 9) {  
17.                 $(el).css('-ms-transform', 'scale(' + xScale + ')');  
18.                 $(el).css('-ms-transform-origin', '0px 0px');  
19.             }  
20.             else if(S.UA['ie'] < 9) {  
21.                 $(el).css('zoom', xScale);  
22.             }  
23.             else {  
24.                 $(el).css('-webkit-transform', 'scale(' + xScale + ', ' +  yScale + ')');  
25.                 $(el).css('-webkit-transform-origin', '0px 0px');  
26.             }  
27.         }  

在浏览器的判断是，这里使用了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();  
            }   
        });   
       });