脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS 图片等比例缩放

JS控制图片等比例缩放的示例代码

 更新时间：2013年12月24日 09:52:24   作者：  
本篇文章主要是对JS控制图片等比例缩放的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

复制代码 代码如下:

<SCRIPT language="JavaScript">
function DrawImage(ImgD,FitWidth,FitHeight){  
    var image=new Image();  
    image.src=ImgD.src;  
    if(image.width>0 && image.height>0){  
        if(image.width/image.height>= FitWidth/FitHeight){  
            if(image.width>FitWidth){  
                ImgD.width=FitWidth;  
                ImgD.height=(image.height*FitWidth)/image.width;  
            }  
            else{  
                ImgD.width=image.width;  
                ImgD.height=image.height;  
            }  
        }  
        else{  
            if(image.height>FitHeight){  
                ImgD.height=FitHeight;  
                ImgD.width=(image.width*FitHeight)/image.height;  
            }  
            else{  
                ImgD.width=image.width;  
                ImgD.height=image.height;  
            }  
        }  
    }  
}  

</script>


调用方法：
复制代码 代码如下:

<a href="admin/<? echo $rscase['path']?>" target="_blank"><img src="admin/<? echo $rscase['path']?>" alt="点击放大图片" width="180" height="180" onload='javascript:DrawImage(this,180,);' hspace="3" vspace="3" border="0" /></a>

您可能感兴趣的文章:

相关文章

  • js函数与php函数的区别实例浅析

    js函数与php函数的区别实例浅析

    这篇文章主要介绍了js函数与php函数的区别,以实例形式较为简单的分析了js函数与php函数语法及应用上的不同点,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 一文详解如何在uniapp中设置隐私政策弹窗

    一文详解如何在uniapp中设置隐私政策弹窗

    在将uniapp打包成APP端时,上架到应用市场的时候需要配置隐私弹窗,下面这篇文章主要给大家介绍了关于如何在uniapp中设置隐私政策弹窗的相关资料,需要的朋友可以参考下
    2023-01-01
  • uniapp的webview实现左滑返回上一个页面操作方法

    uniapp的webview实现左滑返回上一个页面操作方法

    uniapp默认左滑是关闭整个webview,而不是关闭当前页,本文给大家介绍uniapp的webview实现左滑返回上一个页面操作方法,感兴趣的朋友一起看看吧
    2023-12-12
  • JavaScript省市区三级联动菜单效果

    JavaScript省市区三级联动菜单效果

    这篇文章主要为大家详细介绍了JavaScript省市区三级联动菜单效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 一文带你搞懂面试率超高的JS事件循环

    一文带你搞懂面试率超高的JS事件循环

    事件循环是 JavaScript 中一个非常重要的概念，下面就来看看浏览器和 Node.js 中的事件循环的原理，以及两者之间的差异，感兴趣的可以了解一下
    2022-10-10
  • js实现图片和链接文字同步切换特效的方法

    js实现图片和链接文字同步切换特效的方法

    这篇文章主要介绍了js实现图片和链接文字同步切换特效的方法,涉及javascript操作文字及图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • js, jQuery实现全选、反选功能

    js, jQuery实现全选、反选功能

    本文主要介绍了js, jQuery实现全选、反选功能的方法，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 使用egg.js实现手机、验证码注册的项目实践

    使用egg.js实现手机、验证码注册的项目实践

    本文主要介绍了使用egg.js实现手机、验证码注册的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • JavaScript定时器常见用法实例分析

    JavaScript定时器常见用法实例分析

    这篇文章主要介绍了JavaScript定时器常见用法,结合实例形式分析了JavaScript定时器常见功能、应用及相关操作技巧,需要的朋友可以参考下
    2019-11-11
  • JS实现的计数排序与基数排序算法示例

    JS实现的计数排序与基数排序算法示例

    这篇文章主要介绍了JS实现的计数排序与基数排序算法,结合实例形式简单分析了计数排序与基数排序的原理与JS实现技巧,需要的朋友可以参考下
    2017-12-12

最新评论