基于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 disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
js实现日历的简单算法
Jan 24 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 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连接SQLServer2005方法及代码
2013/12/26 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
python调用java的Webservice示例
2014/03/10 Python
深入理解Python中字典的键的使用
2015/08/19 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
pandas按条件筛选数据的实现
2021/02/20 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
员工自我鉴定范文
2013/10/06 职场文书
自我鉴定书面格式
2014/01/13 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
催款函怎么写
2015/06/24 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书