基于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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
vue中锚点的三种方法
Jul 06 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
vue组件入门知识全梳理
Sep 21 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
关于JS中的作用域中的问题思考分享
Apr 06 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实现分页的一个示例
2006/10/09 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
使用python模拟命令行终端的示例
2019/08/13 Python
python实现猜单词游戏
2020/05/22 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
Python如何执行系统命令
2020/09/23 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
南威尔士家居商店:Leekes
2016/10/25 全球购物
认识深刻的检讨书
2014/02/16 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
董事长岗位职责
2015/02/13 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书