百度源代码里的精妙javascript图片大小处理函数

2016-02-19 16:43 9 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的百度源代码里的精妙javascript图片大小处理函数,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

【 tulaoshi.com - Web开发 】

script language=Javascriptvar proMaxHeight = 150;var proMaxWidth = 110;  function proDownImage(ImgD){   var image=new Image();   image.src=ImgD.src;   if(image.width0 && image.height0){   var rate = (proMaxWidth/image.width  proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;  if(rate = 1){    ImgD.width = image.width*rate;   ImgD.height =image.height*rate;  }  else {             ImgD.width = image.width;             ImgD.height =image.height;         }   }}//--

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

  百度的javascript还好啦。所以收录下来。如果懂这个的话,一看就懂了。呵呵。。。

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

  不过还是介绍一下用法。。。。。

img src="http://www.baidu.com/images/Logo.gif" /

  上面是一般的HTML里面用的插入图片的一段。。。很简单。但是当插入的图片是网友上传的图片,对尺寸/比例不确定的时候。我们需要的就是这个js了。。。这段代码可以根据网友上传的图片,进行比例缩放。这样不会导致很多商品展示都出现的。图片尺寸都固定死了的情况。。。。用法很简单,把上面的这段javascript放到head/head之间,然后把

img src="http://www.baidu.com/images/Logo.gif" /
改成
img src="http://www.baidu.com/images/Logo.gif" onload=proDownImage(this); /
这样。就可以了。意思就是在图片load装载的时候,调用proDownImage函数对this(即图片本身)对象进行设置。就可以了。很简单,但很实用。

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

延伸阅读
百度图片变脸使用教程   相信很多朋友都不知道,其实,百度图片有个变脸功能。今天,小编就来跟大家分享百度图片变脸使用教程,希望能对大家有所帮助。 1、首先打开百度图片app ,进入首页,点击中间的相机,如下图: 2、点击右上方的变脸,如下图: 3、选择要变脸的明星,点击拍照,如下图: 4、然...
百度docs怎么用 百度docs在线处理工具使用教程   百度docs怎么用?近日,百度方面竟然姗姗来迟地推出了百度doc这么个项目,大致上还是能够满足Word用户的需求的。绿茶小乐哥分享一个百度docs在线处理工具使用教程,希望能帮到大家! 虽然时下大部分人办公都是选择支持国货WPS,但是仍然有不少朋友会更为习惯性地使用微软经典办公工...
标签: PS
ps怎么调整图片大小   1、从文件菜单中点击打开你的图片,或是按快捷键ctrl+o打开图片。 2、从图像菜单中或是右击图像标题栏,选择图像大小命令。在图像大小对话框中,详细图老师列举了照片的像素大小和文档大小的参数。 3、修改图像大小。在对话框中将像素大小的宽度调整为你需要的大小,完成操作。
标签: Web开发
一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供了一个非常方便好用的函数( $(selector).ready()),让我们可以在页面的dom加载完后就可以做相应的操作(当然,这还得看用户浏览器的...
标签: PS教程 PS基础
如果你用数码相机拍摄出来的照片尺寸太大了,如何用ps将他调小一点呢?今天来教你一招。 1、从【文件】菜单中点击打开或是按快捷键ctrl+o打开你要缩小的照片。 2、打开【图像大小】命令。从【图像】菜单中选择【图像大小】,或是右击图像标题栏,在弹出的快捷菜单中选择【图像大小】命令。 ...

经验教程

523

收藏

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