软件开发培训班 >> 编程开发 >> JavaScript

javascript图片自动缩放和垂直居中处理函数

<html> 
<head> 
    <title>Untitled</title> 
    <style type="text/css"> 
        .testCss{width:200px;height:300px;border:1px red solid;text-align:center;display:block;} 
        .testCss1{width:300px;height:300px;border:1px red solid;text-align:center;display:block;} 
        .testCss2{width:400px;height:300px;border:1px red solid;text-align:center;display:block;} 
    </style> 
    <script type="text/javascript"> 
        /* 
        函数功用:图片自动缩放和垂直居中处理函数 
        编写时间:2008-08-06 
        编 写 人:PaulLeder 
        联 系 我:paulleder@yeah.net 
        */ 
        function autoSizeImg(Contents,offsetWidth,offsetHeight,vlmiddle){ 
            var o=Contents.getElementsByTagName("IMG"); 
            var cwidth=    window.getComputedStyle?window.getComputedStyle 
(Contents,null).width:Contents.currentStyle["width"]; 
            var cheight=window.getComputedStyle?window.getComputedStyle 
(Contents,null).height:Contents.currentStyle["height"]; 
            var ncwidth=parseInt(cwidth); 
            var ncheight=parseInt(cheight); 
            for(var i=0;i<o.length;i++){ 
                var img=o[i]; 
                var iw=img.width; 
                var ih=img.height; 
                if(img.width>ncwidth){ 
                    var nw=ncwidth-offsetWidth; 
                    img.width=nw 
                    img.height=(nw*ih)/iw; 
                }else if(img.width<ncwidth&&img.height>ncheight){ 
                    var nh=ncheight-offsetHeight; 
                    img.height=nh; 
                    img.width=(nh*iw)/ih; 
                } 
                if(img.height>ncheight&&img.width<ncwidth){ 
                    var hh=ncheight-offsetHeight; 
                    img.height=nh; 
                    img.width=(nh*iw)/ih; 
                } 
                if(vlmiddle)img.style.marginTop=((ncheight-img.height)/2)+"px"; 
            } 
        } 
    </script> 
</head>

技术文章快速查找

jQuery教程 $()包装函数来实现数组元素分页效果

防止文件缓存的js代码

jquery 实现斜导航效果

用Jquery.load载入页面实现局部刷新

JavaScript中常用的运算符小结

基于jquery的无限级联下拉框js插件

通过AJAX的JS、JQuery两种方式解析XML示例介绍

JavaScript 浮动定位提示效果实现代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建