js实现缩略图功能

2016-02-19 14:42 1010 1 收藏

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

【 tulaoshi.com - Web开发 】

基本功能:
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 ;

(本文来源于图老师网站,更多请访问http://www.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

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

来源:http://www.tulaoshi.com/n/20160219/1607616.html

延伸阅读
标签: 电脑入门
问:在Windows XP 系统下,使用缩略图的查看方式后,图片文件没有缩略显示出来,请问如何解决? 答:这个问题是由于Windows 图片和传真查看器的DLL没有注册造成的。解决的方法是:运行Regsvr32 shimgvw.dll注册该DLL即可。
标签: 电脑入门
你相信用一张幻灯片就可以实现多张图片的演示吗?而且单击后能实现自动放大的效果,再次单击后还原。其方法是: 新建一个演示文稿,单击插入菜单中的对象命令,选择Microsoft powerpoint演示文稿,在插入的演示文稿对象中插入一幅图片,将图片的大小改为演示文稿的大小,退出该对象的编辑状态,将它缩小到合适的大小,按F5键演示一下看看,是...
iPhone显示更大缩略tuLaoShi.com图预览技巧   在iOS8相册中,可以按照年度或精选来查看照片,查看更多照片的缩略图。不过,这种缩略图比较小。其实也可以更大的缩略图方式预览。具体操作如下: 第一步,在年度用手指按住年度精选不放。 第二步,将其他手指放置在需要放大显示的照片位置,即可显示该照片更大一点的缩略图...
标签: PHP
  其中db_mysql.inc.php,config.php,function.php不是真正使用到的,关键是$filename 文件名,我是通过读取数据库中的图片名称 <?php include_once ('inc/db_mysql.inc.php'); include_once ('inc/config.php'); include_once ('class/function.php'); global $picPath; if (strstr($_SERVER[HTTP_USER_AGENT],"MSIE")) {   $a...
标签: word
让word2013文档直接显示预览缩略图   通常情况下,我们通过windows的资源管理器可以查看word文档的名字列表,无法直接查看该word文档的内容缩略图。这样不够直观,有时候需要一个文档一个文档打开核对查看确认是否是自己需要的word文档。今天教大家用word2013文件保存时的一个选项来实现word文档的预览缩略图效果。 第一步:打开...

经验教程

428

收藏

91
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部