基于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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
vue 组件简介
Jul 31 Javascript
详解vue路由
Aug 05 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随机生成福彩双色球号码的2种方法
2013/02/04 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
PHP7新增函数
2021/03/09 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
浅析Python中的join()方法的使用
2015/05/19 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
python实现windows下文件备份脚本
2018/05/27 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
python3注册全局热键的实现
2020/03/22 Python
python实现文法左递归的消除方法
2020/05/22 Python
Python实现弹球小游戏
2020/08/01 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
python实现猜拳游戏项目
2020/11/30 Python
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
2016年学校党支部公开承诺书
2016/03/25 职场文书