基于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实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
JS新手入门数组处理的实用方法汇总
Apr 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
mysql_escape_string()函数用法分析
2016/04/25 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
JS类的封装及实现代码
2009/12/02 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
js对象的复制继承实例
2015/01/10 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
javascript轮播图算法
2016/10/21 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
为python设置socket代理的方法
2015/01/14 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
python实现zabbix发送短信脚本
2018/09/17 Python
python http基本验证方法
2018/12/26 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
python默认参数调用方法解析
2020/02/09 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
工商管理应届生求职信
2013/10/07 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
表扬信范文
2015/05/04 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
转变工作作风心得体会
2016/01/23 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers