基于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 相关文章推荐
js最简单的拖拽效果实现代码
Sep 24 Javascript
基于JQuery的日期联动实现代码
Feb 24 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 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使用sql数据库 获取字段问题介绍
2013/08/12 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
python获取外网ip地址的方法总结
2015/07/02 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
Python如何计算语句执行时间
2019/11/22 Python
工商管理应届生求职信
2013/10/07 职场文书
人事部专员岗位职责
2014/03/04 职场文书
节水口号标语
2014/06/19 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
5.12护士节活动总结
2015/02/10 职场文书
通知函的格式
2015/04/27 职场文书
Python图像处理之图像拼接
2021/04/28 Python
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang