js实现缩略图功能

ebeecake

ebeecake

2016-02-19 14:42

下面这个js实现缩略图功能教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

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


 程序代码
script type="text/javascript"
/********************
*基本描述:
* 图片缩略,使用js的静态类实现
* by 西楼冷月 20080817 www.chinacms.org | www.xilou.net | 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 ;

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

        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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

js实现缩略图功能

Web开发
js实现缩略图功能

生成缩略图

Web开发
生成缩略图

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

恢复Windows系统中的缩略图功能项

电脑入门
恢复Windows系统中的缩略图功能项

2345看图王缩略图预览功能使用介绍

电脑网络
2345看图王缩略图预览功能使用介绍

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

powerpoint自动缩略图效果详解

电脑网络
powerpoint自动缩略图效果详解

delphi实现批量缩略图生成工具开发代码

编程语言 网络编程
delphi实现批量缩略图生成工具开发代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

jquery.ui.progressbar 中文文档

jquery.ui.progressbar 中文文档

delphi for php完全支持中文三部曲

delphi for php完全支持中文三部曲
下拉加载更多内容 ↓