点击:

Jquery实现图片等比例缩放和新窗口打开

来源:创想工作室   时间:2014-11-06

前端设计师在设计网页的时候,常会遇到因图片尺寸超过模板网页的宽度影响整体美观的情况,这篇文章就为大家分享一下解决办法,顺便还加上了图片可以新窗口打开(即使你没有加上超链接。)
 
好了,不多说了,直接上主要代码。
 
$(document).ready(function(e) {
$.each($("#content img"),function(){//把“content”修改为内容页显示内容的DIV的ID属性值
var image=new Image();
image.src=$(this).attr('src');
if(image.width>0 && image.height>0){ 
if(image.width>=620){//三处“620”修改为需要等比例缩小的最大图片宽度
$(this).attr('width',620);
$(this).attr('height',(image.height*620)/image.width);
}
}});
 
 
var ImgsTObj = $('#content img');
if(ImgsTObj){
$.each(ImgsTObj,function(){
$(this).click(function(){
window.open("http://www.22ba.com"+$(this).attr('src'),"_blank");
});
});
}
 
});
 
 
另外记得要引用jquery核心文件。
 
完整文件下载:http://www.22ba.com/uploadfile/2014/1106/20141106053259319.rar