• ----:)欢迎访问源码网(:----
    • 首页
    • 博客
    • 学院
    • 下载
    • 论坛
    • 影视
    • 发布源码
    • RSS
    • ITPig
    • 笑话网
    • 百家姓
    • 繁體中文

源码网 - 中国第一源码门户
选择镜像:网通镜像 - 电信主站
  • 首 页
  • 新闻动态
  • 网站运营
  • 网页制作
  • WEB开发
  • 编程开发
  • 图像媒体
  • 操作系统
  • 数据库
  • 服务器
热门搜索 优化 SEO 故事 cms IIS7 MySQL 个人 AdSense 主题推广 | 文章搜索: 高级搜索
会员登录/控制面版您的位置: 学院首页 >> 网页制作 >> Javascript >> 详细内容
 

推荐文章

 
 

热点文章

  • 北京2008年奥运会金牌排行榜 调用163
  • JavaScript实现图片幻灯片效果的源代码
  • javascript汉字转拼音 功能块,方法很笨但很实用
  • 腾讯迷你天气预报代码
  • JavaScript中常用正则表达式
  • 网页设计配色应用实例剖析——绿色系
  • 自然界的色彩搭配与界面设计(1)
  • JavaScript自定义模式对话框
  • 浮动菜单是如何作出来的mouse事件
  • JavaScript使用Window对象
  • javascript 实现无刷新联动菜单select的方法
  • javascript脚本轻松实现局部刷新
 
 

相关文章

  • 一段JS代码,让你的WordPress支持简繁转换
 
 

百度搜索

 
 

按比例微缩图片的一段小小的JS代码

  • 阅览次数:
  • 文章来源: CP整理
  • 原文作者: 不详
  • 整理日期: 2007-04-22
  • 发表评论
  • 字体大小:
  • 小
  • 中
  • 大

自己写的一个非常简单的图片微缩JS代码,当然网上有很多类似的代码,在此确实是献丑了。
         主要方法写在SetImgSize.js里面 SetImgSize.js
 1 //智能微缩图片JS方法
 2 //参数:imgID(图片的标识ID)
 3 //参数:maxWidth(图片的最大宽度,值为0则表示不限制宽度)
 4 //参数:maxHeight(图片的最大高度,值为0则表示不限制高度)
 5 function setImgSize(imgID,maxWidth,maxHeight)
 6 {
 7     var img = document.images[imgID];
 8     if(maxWidth < 1)
 9     {
10         if(img.height > maxHeight)
11         {
12             img.height = maxHeight;
13         }
14         return true;
15     }
16     if(maxHeight < 1)
17     {
18         if(img.width > maxWidth)
19         {
20             img.width = maxWidth;
21         }
22         return true;
23     }
24     if(img.height > maxHeight || img.width > maxWidth)
25     {
26         if((img.height / maxHeight) > (img.width / maxWidth))
27         {
28             img.height = maxHeight;
29         }
30         else
31         {
32             img.width = maxWidth;
33         }
34         return true;
35     }
36 }         功能实现原理是在图片加载完毕后(onload事件)用JS实现微缩。
         下面是一个测试用的文件test.htm test.htm
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title>测试</title>
 5     <script language="javascript" type="text/javascript" src="setImgSize.js"></script>
 6 </head>
 7 <body>
 8     限定了宽度150px
 9     <br /><img alt="" id="img1" onload="setImgSize('img1',150,0);" src="/u/xueyuan_0321/2007-04/22/972374149620060602140117_1.jpg" />
10     <br />限定了高度150px
11     <br /><img alt="" id="img2" onload="setImgSize('img2',0,150);" src="/u/xueyuan_0321/2007-04/22/972374149620060602140117_4.jpg" />
12     <br />限定了高度150px、宽度150px
13     <br /><img alt="" id="img3" onload="setImgSize('img3',150,150);" src="/u/xueyuan_0321/2007-04/22/147572720_8b25471150_o.jpg" />
14 </body>
15 </html>         就写到这里了,呵呵,是不是很简单啊!

上一篇:PHP使用zlib扩展实现页面GZIP压缩输出
下一篇:构建支持Master/Slave读写分离的数据库操作类
  • 网友评论:
  • 查看所有评论
  • 我要发表评论
您的网名:
留言主题:
你要发表的内容:

 

关于本站 | 广告联系 | 版权声明 | 网站地图 | 发布软件 | 帮助中心 | 源码论坛

Copyright © 2005-2007 CodePub.Com  程序支持:木翼  滇ICP备05005971号