基于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代码
Sep 22 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
JS前端加密算法示例
Dec 22 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 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获取url的函数代码
2011/08/02 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
javascript基础知识讲解
2017/01/11 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
基于vue展开收起动画的示例代码
2018/07/05 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
python+pyqt实现右下角弹出框
2017/10/26 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
文明好少年事迹材料
2014/08/19 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
2015年党性分析材料
2014/12/19 职场文书
作文评语怎么写
2014/12/25 职场文书
会议主持词开场白
2015/05/28 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
JavaScript获取URL参数的方法分享
2022/04/07 Javascript
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python