基于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定义函数的方法
Dec 06 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
js判断两个数组相等的5种方法
May 06 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中如何判断AJAX提交的数据
2012/02/05 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
php之可变函数的实例详解
2017/09/13 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
js实现简单的秒表
2020/01/16 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Python常见字典内建函数用法示例
2018/05/14 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
python中的数据结构比较
2019/05/13 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
python 画图 图例自由定义方式
2020/04/17 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
军人离婚协议书样本
2014/10/21 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript