zoukankan      html  css  js  c++  java
  • js实现缩略图功能的源代码

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


     程序代码
    <script type="text/javascript">
    /********************
    *基本描述:
    * 图片缩略,使用js的静态类实现
    *  
    *参数说明:
    * @ 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>

  • 相关阅读:
    Java File类应用:递归遍历文件夹和递归删除文件
    综合应用题:多线程复制文件(知识点:多线程、随机读写流)
    Java IO流之随机读写流RandomAccessFile
    Java之枚举----小试牛刀练习
    Java之枚举
    PHP笔试题及答案
    静态方法何时使用
    你怎么理解并使用静态方法和实例化方法的?
    99%的人理解错 HTTP 中 GET 与 POST 的区别
    描述一下大流量高并发量网站的解决方案
  • 原文地址:https://www.cnblogs.com/zhongbin/p/3131708.html
Copyright © 2011-2022 走看看