zl程序教程

您现在的位置是:首页 >  前端

当前栏目

基于jquery的文章中所有图片width大小批量设置方法

jQuery批量方法 设置 基于 图片 所有 大小
2023-06-13 09:15:03 时间

前面要加载一个jquery库。

<scripttype="text/javascript">
varsetNewsImg=function(obj){
$(obj).find("img").each(function(i){
varimgw=$(this).width();
varimgh=$(this).height();
varscale=1;
if(imgw>634){
scale=634/imgw;
console.log(scale);
$(this).height(scale*imgh);
$(this).width(scale*imgw);
}
});
}
</scripttype="text/javascripy">
调用
<script>
$(function(){
setNewsImg(".news-img")
})
</script>

代码二:

$(window).bind("load",function(){
//图片修改大小
$("#imglistimg").each(function(){
varmaxWidth=120;//初始化最大显示宽度
varmaxHeight=120;//初始化最大显示高度
varratio=0;
varwidth=$(this).width();
varheight=$(this).height();

if(width>maxWidth){
ratio=maxWidth/width;
$(this).css("width",maxWidth);
$(this).css("height",height*ratio);
height=height*ratio;
}

if(height>maxHeight){
ratio=maxHeight/height;
$(this).css("height",maxHeight);
$(this).css("width",width*ratio);
width=width*ratio;
}
});
});

代码三:

<script>
$(function(){
$(".daimaimg").each(function(){
maxWidth=700;
ratio=0;
width=$(this).width();
height=$(this).height();
if(width>maxWidth){
ratio=maxWidth/width;
$(this).width(maxWidth);
height=height*ratio;
$(this).height(parseInt(height));
}});
});
</script>

代码四:推荐使用

$("#content").find("img").each(function(){
varimg=this;
if(img.width>600){
img.style.width="600px";
img.style.height="auto";
//$(img).removeAttr("height");
varaTag=document.createElement("a");
aTag.href=img.src;
			aTag.target="_blank";
$(aTag).addClass("bPic")
.insertAfter(img).append(img)
.lightBox(options);
}
});

这个content就是文章内容部分的id,方便控制制定位置的图片大小,推荐使用。