基于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 相关文章推荐
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
详解Layer弹出层样式
Aug 21 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
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
MySQL中create table语句的基本语法是
2007/01/15 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
JS实现购物车基本功能
2020/11/08 Javascript
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python iter()函数用法实例分析
2018/03/17 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
详解Python 最短匹配模式
2020/07/29 Python
python 模拟登录B站的示例代码
2020/12/15 Python
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
中国梦的演讲稿
2014/01/08 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
党员岗位承诺书
2014/03/25 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
详解Python requests模块
2021/06/21 Python
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL