基于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 相关文章推荐
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
Vue中的字符串模板的使用
May 17 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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
长波有什么东西
2021/03/01 无线电
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
javascript 动态参数判空操作
2008/12/22 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
详解如何运行vue项目
2019/04/15 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
Python使用gensim计算文档相似性
2016/04/10 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
Python字典遍历操作实例小结
2019/03/05 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
幼教个人求职信范文
2013/12/02 职场文书
收银员岗位职责
2014/02/07 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
单位推荐信范文
2015/03/27 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
高中军训感想
2015/08/07 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS