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


Posted in Javascript onAugust 01, 2013

前面要加载一个jquery库。

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

代码二:

$(window).bind("load", function() { 
 // 图片修改大小 
 $('#imglist img').each(function() { 
  var maxWidth = 120; //初始化最大显示宽度
  var maxHeight = 120; //初始化最大显示高度
  var ratio = 0; 
  var width = $(this).width(); 
  var height = $(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(){
$(".daima img").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(){
    var img = this;
    if (img.width > 600) {
      img.style.width = "600px";
      img.style.height = "auto";
      //$(img).removeAttr('height');
      var aTag = document.createElement('a');
      aTag.href = img.src;
			aTag.target="_blank";
      $(aTag).addClass('bPic')
      .insertAfter(img).append(img)
      .lightBox(options);
    }
  });

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

Javascript 相关文章推荐
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 #Javascript
jquery中选择块并改变属性值的方法
Jul 31 #Javascript
JQuery写动态树示例代码
Jul 31 #Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 #Javascript
JS的千分位算法实现思路
Jul 31 #Javascript
一个JS的日期格式化算法示例
Jul 31 #Javascript
jquery实现div拖拽宽度示例代码
Jul 31 #Javascript
You might like
php横向重复区域显示二法
2008/09/25 PHP
基于php无限分类的深入理解
2013/06/02 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
js获取单选按钮的数据
2006/11/27 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python检测远程udp端口是否打开的方法
2015/03/14 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
浅述python中深浅拷贝原理
2018/09/18 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
Python脚本调试工具安装过程
2021/01/11 Python
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
四年的个人工作自我评价
2013/12/10 职场文书
我为自己代言广告词
2014/03/18 职场文书
科学发展观活动总结
2014/08/28 职场文书
孔子观后感
2015/06/08 职场文书
图书馆义工感想
2015/08/07 职场文书
社区宣传标语口号
2015/12/26 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers