龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

js图片等比缩放程序代码

时间:2012-12-29 08:41来源:未知 作者:admin 点击: 次
分享到：
下面总结了两个常用的兼容性非常好的图片等比缩放的js代码，有需要的朋友可参考参考。 代码如下 script language=JavaScript !-- //图片按比例缩放 var flag=false; function DrawImage(ImgD){ var image=n
下面总结了两个常用的兼容性非常好的图片等比缩放的js代码，有需要的朋友可参考参考。
 代码如下

<script language="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD){
var image=new Image();
var iwidth = 160; //定义允许图片宽度
var iheight = 120; //定义允许图片高度
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}

ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//调用：<img src="图片" onload="javascript:DrawImage(this)">
//-->
</script>

实例二

 代码如下
function resizeimg(ImgD,iwidth,iheight) {
     var image=new Image();
     image.src=ImgD.src;
     if(image.width>0 && image.height>0){
        if(image.width/image.height>= iwidth/iheight){
           if(image.width>iwidth){
               ImgD.width=iwidth;
               ImgD.height=(image.height*iwidth)/image.width;
           }else{
                  ImgD.width=image.width;
                  ImgD.height=image.height;
                }
               ImgD.alt=image.width+"×"+image.height;
        }
        else{
                if(image.height>iheight){
                       ImgD.height=iheight;
                       ImgD.width=(image.width*iheight)/image.height;
                }else{
                        ImgD.width=image.width;
                        ImgD.height=image.height;
                     }
                ImgD.alt=image.width+"×"+image.height;
            }
　　　　　ImgD.style.cursor= "pointer"; //改变鼠标指针
　　　　　ImgD.onclick = function() { window.open(this.src);} //点击打开大图片
　　　　if (navigator.userAgent.toLowerCase().indexOf("ie") > -1) { //判断浏览器，如果是IE
　　　　　　ImgD.title = "请使用鼠标滚轮缩放图片，点击图片可在新窗口打开";
　　　　　　ImgD.onmousewheel = function img_zoom() //滚轮缩放
　　　　　 {
　　　　　　　　　　var zoom = parseInt(this.style.zoom, 10) || 100;
　　　　　　　　　　zoom += event.wheelDelta / 12;
　　　　　　　　　　if (zoom> 0)　this.style.zoom = zoom + "%";
　　　　　　　　　　return false;
　　　　　 }
　　　  } else { //如果不是IE
　　　　　　　     ImgD.title = "点击图片可在新窗口打开";
　　　　　　   }
    }
}

在需要实现等比缩放的图片上加上onload语句，图片装载时初始化大小。
具体实现代码如下:

 代码如下

<img name="" src="" onload="javascript:resizeimg(this,100,200)">

精彩图集
node+express+ejs制作简单页面上手指南_node.js
node+express+
js点亮星星评分并获取参数的js代码
js点亮星星评
鼠标滑过出现预览的大图提示效果
鼠标滑过出
查找Oracle高消耗语句的方法
查找Oracle高
PHP开发者必须掌握的6个关键字
PHP开发者必

热门标签

php分页代码 JS定义二维数组 类级属性 底部菜单 YII2 表格结构 数据库同步 验证插件 中国天气网 nls 下拉式菜单 poll 数据变 widget开发 后台获取 FTP自动备份 goto 前期绑定 数据盘 ajax提交表单 多表关联 坐标 点滴 24天 Hibernate_JP atime informati 存储hmtl 递增 监听机制 拒绝服务攻击 nginx做负载CDN 同大 文件头 rewrite 进程间通信 模拟表单 Oracle客户端 zip扩展安装 截屏 Execpt 实际内存占用 JAVA对象转JSON max_user 异步回调 javascript:v 最小高度在IE atoi() lob file_get_con 京东秒杀软件 修改数据库名 文本信息 导入 获取本机公网 默认拷贝函数 合并表 卡号 Lesson01_08 php php计

赞助商链接