手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS自动缩小超出大小的图片
JS自动缩小超出大小的图片
摘要:复制代码代码如下:jQuery.fn.LoadImage=function(scaling,width,height,loadpic){if...

复制代码 代码如下:

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

jQuery.fn.LoadImage=function(scaling,width,height,loadpic){

if(loadpic==null)loadpic="../img/loading.gif";

return this.each(function(){

var t=$(this);

var src=$(this).attr("src")

var img=new Image();

img.src=src;

//自动缩放图片

var autoScaling=function(){

if(scaling){

if(img.width>0 && img.height>0){

if(img.width/img.height>=width/height){

if(img.width>width){

t.width(width);

t.height((img.height*width)/img.width);

}else{

t.width(img.width);

t.height(img.height);

}

}

else{

if(img.height>height){

t.height(height);

t.width((img.width*height)/img.height);

}else{

t.width(img.width);

t.height(img.height);

}

}

}

}

}

//处理ff下会自动读取缓存图片

if(img.complete){

autoScaling();

return;

}

$(this).attr("src","");

var loading=$("<img alt="加载中..." title="图片加载中..." src=""+loadpic+"" />");

t.hide();

t.after(loading);

$(img).load(function(){

autoScaling();

loading.remove();

t.attr("src",this.src);

t.show();

});

} );

}

</script>

<div id="content"><img src="img/20120518073933709.jpg"/></div>

<script type="text/javascript">

<>

</script>

【JS自动缩小超出大小的图片】相关文章:

nodejs修复ipa处理过的png图片

JavaScript实现弹出模态窗体并接受传值的方法

自适应图片大小的弹出窗口

js动态创建及移除div的方法

Jquery跨浏览器文本复制插件Zero Clipboard的使用方法

javascript实现动态改变层大小的方法

JQuery自动触发事件的方法

自动关闭的层

Javascript实现每日自动换一张图片的方法

JS实现兼容各浏览器解析XML文档数据的方法

精品推荐
分类导航