基于jquery的文章中所有图片width大小批量设置方法
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,方便控制制定位置的图片大小,推荐使用。
相关文章
- jquery ajax步骤,jquery ajax(ajax请求的五个步骤jQuery)
- jquery监听浏览器刷新_jQuery刷新浏览器页面大小
- js自动生成二维码_jquery 生成二维码无法识别
- vue相比jquery_angular和vue哪个厉害
- jquery选择器用法_jQuery属性选择器
- Js/JQuery将数字金额转换为其他国家货币格式(包括货币符号和千分符)
- 生成二维码的 jQuery 插件:jquery.qrcode.js
- jQuery复选框操作详解编程语言
- Jquery 异步提交表单详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- 从JavaScript到JQuery(1)学习小结
- jQuery技巧大放送学习jquery的朋友可以看下
- jquery可排列的表实现代码
- jQuery温习篇强大的JQuery选择器
- js和jquery批量绑定事件传参数一(新猪猪原创)
- jQuery获取文本节点之text()/val()/html()方法区别
- jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
- jQuery实用基础超详细介绍
- JQuery的AJAX实现文件下载的小例子
- 随鼠标上下滚动的jquery代码
- JQuery中使用Ajax赋值给全局变量异常的解决方法
- jquery批量设置属性readonly和disabled的方法
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- 分享2个jQuery插件--jquery.fileupload与artdialog