基于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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
javascript:void(0)的真正含义实例分析
Aug 20 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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开发模式(简写版)
2007/03/15 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
python处理csv数据的方法
2015/03/11 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
python3编码问题汇总
2016/09/06 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python简单I/O操作示例
2019/03/18 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
html5唤起app的方法
2017/11/30 HTML / CSS
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
超市后勤自我鉴定
2014/01/17 职场文书
2014年教师节寄语
2014/04/03 职场文书
慈善晚会策划方案
2014/05/14 职场文书
品牌转让协议书
2014/08/20 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书