基于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的bankInput银行卡账号格式化
Aug 22 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 Javascript
梳理一下vue中的生命周期
Dec 30 Vue.js
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中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
对Python3中的input函数详解
2018/04/22 Python
python绘制热力图heatmap
2020/03/23 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
使用Python实现批量ping操作方法
2020/05/06 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
关于Assembly命名空间的三个面试题
2015/07/23 面试题
师范生实习自我鉴定
2013/11/01 职场文书
保险内勤岗位职责
2014/04/05 职场文书
生日宴会策划方案
2014/06/03 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
报名委托书
2015/01/29 职场文书
教师工作证明范本
2015/06/12 职场文书
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技