JS技术

js中缩略图功能的实现_Javascript教程

字号+ 作者:H5之家 来源:H5之家 2015-10-02 19:08 我要评论( )

js中缩略图功能的实现,学习js中缩略图功能的实现,js中缩略图功能的实现,查看js中缩略图功能的实现,js中缩略图功能的实现基本功能:1,按给定的宽和高进行智能缩小

js中缩略图功能的实现

基本功能:
1,按给定的宽和高进行智能缩小
2,按给定的宽和高进行固定缩小(会出现图片变形情况)
3,按给定的宽进行等比例缩小
4,按给定的高进行等比例缩小
5,宽和高按百分比缩小


 程序代码
<script type="text/javascript">
/********************
*基本描述:
* 图片缩略,使用js的静态类实现
* by 西楼冷月 20080817 | | qq : 39949376
*参数说明:
* @ im : 可以为image对象或img的id
*基本功能:
* Img(im).Resize(nWidth,nHeight)             : 按给定的宽和高进行智能缩小
* Img(im).ResizedByWH(nWidth,nHeight)   : 按给定的宽和高进行固定缩小(会出现图片变形情况)
* Img(im).ResizedByWidth(nWidth)             : 按给定的宽进行等比例缩小
* Img(im).ResizedByHeight(nHeight)           : 按给定的高进行等比例缩小
* Img(im).ResizedByPer(nWidthPer,nHeightPer) : 宽和高按百分比缩小
*使用例子:
* <img id="demo" src="demo.gif" width="191" height="143" onload="Img(this).Resize(200,500);" />
* <img id="demo" src="demo.gif" width="191" height="143" onload="Img('demo').ResizedByPer(200,500);" />
********************/
function Img(im)
{
    ImgCls.Obj = ( im && typeof im == 'object' ) ? im : document.getElementById(im) ;
    return ImgCls ;
}
var ImgCls =
{
    Obj : null ,
   
    //按给定的宽和高进行智能缩小
    Resize : function ( nWidth , nHeight )
    {
        var w , h , p1 , p2 ;
        //计算宽和高的比例
        p1 = nWidth / nHeight ;
        p2 = ImgCls.Obj.width / ImgCls.Obj.height ;

        w = 0 ; h = 0 ;
        if( p1 < p2 )
        {
            //按宽度来计算新图片的宽和高
            w = nWidth ;
            h = nWidth * ( 1 / p2 ) ;
        }
        else
        {
            //按高度来计算新图片的宽和高
            h = nHeight ;
            w = nHeight * p2 ;
        }
        ImgCls.Obj.width  = w ;
        ImgCls.Obj.height = h ;
    },
   
    //按给定的宽和高进行固定缩小(会出现图片变形情况)
    //http://bizhi.knowsky.com/
    ResizedByWH : function ( nWidth , nHeight )
    {
        ImgCls.Obj.width  = nWidth ;
        ImgCls.Obj.height = nHeight ;
    },
   
    //按给定的宽进行等比例缩小
    ResizedByWidth : function ( nWidth )
    {
        var p = nWidth / ImgCls.Obj.width ;
        ImgCls.Obj.width  = nWidth ;
        ImgCls.Obj.height = parseInt ( ImgCls.Obj.height * p ) ;
    },
   
    //按给定的高进行等比例缩小
    ResizedByHeight : function ( nHeight )
    {
        var p = nHeight / ImgCls.Obj.height ;
        ImgCls.Obj.height  = nHeight ;
        ImgCls.Obj.width = parseInt ( ImgCls.Obj.width * p ) ;
    },
   
    //宽和高按百分比缩小
    ResizedByPer : function ( nWidthPer , nHeightPer )
    {
        ImgCls.Obj.width  = parseInt(ImgCls.Obj.width * nWidthPer / 100) ;
        ImgCls.Obj.height = parseInt(ImgCls.Obj.height * nHeightPer / 100) ;
    }
}
</script>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • js事件与处理_Javascript教程

    js事件与处理_Javascript教程

    2015-10-10 15:06

  • js对象属性及方法_Javascript教程

    js对象属性及方法_Javascript教程

    2015-10-10 15:04

  • js语句及语法_Javascript教程

    js语句及语法_Javascript教程

    2015-10-10 15:02

  • js数据类型与变量_Javascript教程

    js数据类型与变量_Javascript教程

    2015-10-10 15:00

网友点评