js控制图片onload 批量设置内容下所有图片的等比例压缩

调用时用  AddImgClickEvent("content",500)   就可以了。

<script type="text/javascript">
function AddImgClickEvent(str,width)
{
var objs = document.getElementById(str).getElementsByTagName("img");
for(var i=0;i<objs.length;i++)
{
objs[i].onload=function()
{
AutoResizeImage(width,0,this);
}
objs[i].style.cursor = "pointer";
}
}

function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else if (maxWidth==0){//
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
</script>

获取 id=content 下的所有图片。。 document.getElementById("content").getElementsByTagName("img");

时间: 2024-09-30 09:53:46

js控制图片onload 批量设置内容下所有图片的等比例压缩的相关文章

js 控制 &lt;head&gt;&lt;/head&gt;中 &lt;title&gt;内容 (IE8)

关于js 控制 <head></head>中 <title>内容显示 这几天一直在调试IE8兼容性问题 开发使用浏览器为FireFox,个人觉得FireFox下很多CSS,JS规范不够严谨,在使用其他浏览器时效果不同(虽然开发时使用FireFox很酷很便捷) 之前一直这样写: $("title").text(index_name); 使用IE8如下报错: 意外地调用了方法或属性访问 正确规范写法如下: document.title = index_n

js控制图片自动缩放,实现铺满盒子,不变形,完全局中

此js一般用于控制图片铺满盒子,但是比例不变,并且绝对局中原理:判断图片的高宽与盒子高宽的大小的关系,然后通过比例来控制图片的缩放及定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用了这个插件.在使用的过程中发现中文的相关文档较少,说多了都是泪,硬着头皮看官方的网站,本来英文不咋地,只能边查单词边用了,于是就有了这篇文章,主要是总结在使用Dropzone中的遇到的一些问题及详细的使用步骤. Dropzone.js是啥? Dropzone.js是一个开源库,提供拖放文件上传及图像

【JS控制图片显示的大小(图片等比例缩放)】

效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

JS控制图片显示的大小(图片等比例缩放)

http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/06/01/1749571.html Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

js控制图片缩放、水平和垂直方向居中对齐

已測试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome. 这里使用了jquery插件,假设你不使用jquery,略微改造一下也非常快. 网上查了些资料,用css控制兼容性不好,看去非常揪心.于是找js代码,看了几种写法总是感觉差点什么,算了,还是自己写吧,于是有了以下这个简单的方法,能自己主动依据图片容器大小进行缩放.水平和垂直居中对齐,效果例如以下图: [html] view plaincopy <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.

js 获取div的类及js控制图片垂直居中

js没有document.getElementByClassName 这个方法,只能通过id控制,那就简单的写个方法获取class的方法.代码如下: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>app_details</title> <meta name="description" content="

js控制图片提示(鼠标滑过显示大图片)

基于jquery <head> <script> $(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = ""; var tooltip = "<div id='tooltip'><img src='"+ this.href +&q

用JS控制图片随鼠标移动

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"&g