基于jquery的文章中所有图片width大小批量设置方法

前面要加载一个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，方便控制制定位置的图片大小，推荐使用。

赞 (0)

相关推荐

  • jquery实现根据浏览器窗口大小自动缩放图片的方法

    本文实例讲述了jquery实现根据浏览器窗口大小自动缩放图片的方法.分享给大家供大家参考.具体如下: (function($){ $.fn.resizeimage = function(){ var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if (img.complete) { callback(img.width, img.height); } else { img.onload =

  • jQuery动态改变图片显示大小(修改版)的实现思路及代码

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此功能的jQuery代码如下.这段代码可以使图片的大小保持在一定范围内,如果图片的原始尺寸都大于max*值,则显示出来的图片宽度都相等. 原始代码: 复制代码 代码如下: $(document).ready(function() {     $('.post img').each(function() {     var maxWidth = 100; /

  • jQuery下通过replace字符串替换实现大小图片切换

    核心就是使用replace替换img src的图片路径,从而实现不同尺寸图片的切换. 下面这个动画就是显示了尺寸切换,单击"大图"按钮,则改变图片的src,加载大图,单击"小图"按钮,则又显示小图. replace用法简单讲解: 我其实也是新手,讲得不对望海涵. 字符串.replace(a,b);指的是用b将字符串含有a的部分代替,例如字符串obj="welcome to my website!"; obj.replace("my&qu

  • JQuery加载图片自适应固定大小的DIV

    如何在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div 大小时图片 自动适应div 的大小 jquery图片自适应大小实现过程的主要代码: 代码如下: 复制代码 代码如下: .divImg{ max-height:200px; max-width:200px; width: expression(this.width > 200 && this.width > this.height ? 200 : auto); height: expression(

  • jquery预览图片实现鼠标放上去显示实际大小

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 基于jquery实现的上传图片及图片大小验证、图片预览效果代码

    jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 复制代码 代码如下: */ function submit_upload_picture(){ var file = $('file_c').value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种") }else{ $('both_form').action="file!u

  • 基于jQuery的图片大小自动适应实现代码

    关于 这个和以前弄的图片远处放大有许多相同的地方,比如图片预加载.有限容器显示无限大图片. 大小计算:内外两个比例. 复制代码 代码如下: // 容器比例和图片比例 var dr = dw/dh, ir = iw/ih; if(dr>ir){ ih = dh; iw = ih * ir; }else{ iw = dw; ih = iw / ir; } 居中显示:CSS绝对定位,负边距. 复制代码 代码如下: $img.css({width:iw,height:ih,position:'absol

  • jquery中加载图片自适应大小主要实现代码

    如何在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div 大小时图片 自动适应div 的大小 实现过程的主要代码: 复制代码 代码如下: .divImg{ max-height:200px; max-width:200px; width: expression(this.width > 200 && this.width > this.height ? 200 : auto); height: expression(this.height > 20

  • 使用jQuery实现验证上传图片的格式与大小

    代码很简单,常见的图片格式均已加入验证之中,小伙伴们可以直接拿去用的. 废话少说,直接上代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xht

  • 基于jquery的文章中所有图片width大小批量设置方法

    前面要加载一个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

  • 基于jQuery实现图片推拉门动画效果的两种方法

    ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li>![](images/slidepic2.jpg)</li> --> <li&g

  • JS中位置与大小的获取方法

    JS中位置与大小的获取方法

    scrollHeight,clientHeight,offsetHeight的区别 说明: scrollHeight:DOM元素的实际内容的高度,不包border的高度,会随DOM元素中内容的增加(超过可视区后)而变大. clientHeight:DOM元素内容可视区的高度,不包含滚动条和边框的高度. offsetHeight:DOM元素整体的高度,包括滚动条和边框. 当滚动条不出现的时候 这时候DOM元素中没有内容或者内容不超过可视区 scrollWidth=clientWidth,两者皆为可

  • C#基于正则表达式删除字符串中数字或非数字的方法

    本文实例讲述了C#基于正则表达式删除字符串中数字或非数字的方法.分享给大家供大家参考,具体如下: /// 去掉字符串中的数字 public static string RemoveNumber(string key) { return Regex.Replace(key, @"\d", ""); } //去掉字符串中的非数字 public static string RemoveNotNumber(string key) { return Regex.Replace

  • jQuery往textarea中光标所在位置插入文本的方法

    本文实例讲述了jQuery往textarea中光标所在位置插入文本的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <script src="jquery-1.8.1.min.js"></script> <script > $(function() { /* 在textarea处插入文本--Start */ (function($) { $.fn.extend({ insertContent : f

  • 基于JS实现textarea中获取动态剩余字数的方法

    案例介绍:我们常见到有的网站有textarea文本框,当你输入的时候,下面有文字提示还能输入多少个字,今天就是要实现这个功能.当然,由于一个页面有好几个textarea,所以使用单个js逻辑进行控制是不行的,得小小的进行封装一下.当然我的封装还有缺漏,但是基本功能是实现了. 首先介绍下单个textarea实现案例 html部分: <textarea id="text_txt1"></textarea> <span id ="num_txt1&qu

  • C#中Winfrom默认输入法的设置方法

    本文实例讲述了C#中Winfrom默认输入法的设置方法.分享给大家供大家参考.具体分析如下: 在WINFORM中我们经常遇到文本输入框中输入法被禁用或老是变全角输入法等问题,经查阅相关资料,现小结如下: 一.Control.ImeMode 属性:获取或设置控件的输入法编辑器 (IME) 模式. (1)由于窗体属性继承关系,如果你的WINFORM窗体中大部分需要设置为输入法有效状态,可以设置为FORM的ImeMode属性为On. (2)如果需要某些TextBox为输入法有效,则使用ImeMode.

  • 在django中,关于session的通用设置方法

    最近发现session的知识有点脱节了,默认设置愣是搞半天,看来忘了不少.今天把一些通用设置贴上来,以备随时回顾. 配置文件中设置默认操作(通用配置): SESSION_COOKIE_NAME ＝ "sessionid" # Session的cookie保存在浏览器上时的key,即:sessionid＝随机字符串(默认) SESSION_COOKIE_PATH ＝ "/" # Session的cookie保存的路径(默认) SESSION_COOKIE_DOMAIN

  • 使用jquery获取网页中图片高度的两种方法

    使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 复制代码 代码如下: $("img").whith();(返回纯数字) $("img").css("width");(返回字符串:数字+"px") 但是有时候会遇到返回0的情况,上面方法返回值竟然是0或者0px,很让人诧异 方法一 在很早之前,我使用的解决方法,这也是我的师傅告诉我的解决方法:在你需要获取到的图片的<img>标签上

  • IIS中保持HTTP连接的设置方法

    IIS中保持HTTP连接的设置方法

    大多数 Web 浏览器要求服务器在多个请求中保持连接打开.这被称为保持 HTTP 连接.保持连接是一个 HTTP 规范,它能够显著增强服务器性能.如果没有它,浏览器将必须为包含多个元素(如图形)的页进行大量的连接请求.可能需要为每个元素进行单独连接.这些额外的请求和连接要求额外的服务器活动和资源,这将会降低服务器的效率.它们还会大大降低浏览器的速度和响应能力,尤其是在网络连接速度较慢的地方. 在安装进程中,将默认启用保持 HTTP 连接.启用后,保持连接的持续时间是连接超时设置允许的时间. 集成

随机推荐