基于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 cookies 设置、读取、删除实例代码
Apr 12 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
vue配置接口域名方法总结
May 12 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 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执行zip与rar解压缩方法实现代码
2010/12/05 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
原生javascript实现连连看游戏
2019/01/03 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
python处理文本文件并生成指定格式的文件
2014/07/31 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Python中enumerate函数代码解析
2017/10/31 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
人力资源主管岗位职责
2014/01/29 职场文书
同意报考证明
2015/06/17 职场文书
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang