jquery实现图片按比例缩放示例

  <html>
    <title></title>
    <head></head>
    <style>
      .thumbnail{overflow:hidden;width:400px;height:240px;}
    </style>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script language="javascript">
      $(function(){
        /* 图片不完全按比例自动缩小 by zwwooooo */
          $('#content div.thumbnail img').each(function(){
            var x = 400; //填入目标图片宽度
            var y = 240; //填入目标图片高度
            var w=$(this).width(), h=$(this).height();//获取图片宽度、高度
            if (w > x) { //图片宽度大于目标宽度时
              var w_original=w, h_original=h;
              h = h * (x / w); //根据目标宽度按比例算出高度
              w = x; //宽度等于预定宽度
              if (h < y) { //如果按比例缩小后的高度小于预定高度时
                w = w_original * (y / h_original); //按目标高度重新计算宽度
                h = y; //高度等于预定高度
              }
            }
            $(this).attr({width:w,height:h});
          });
      });
    </script>
    <body>
    <div id="content">
      <div id="thumbnail" class="thumbnail" >
        <img id="web" src="./midle.png"/>
      </div>
     </div>
    </body>
  </html>
赞 (0)

相关推荐

  • 基于jquery实现鼠标滚轮驱动的图片切换效果

    基于jquery实现鼠标滚轮驱动的图片切换效果

    jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个基于鼠标滚轮驱动的图片切换效果. 本例实现的效果: 鼠标滚轮滚动时图片进行切换. 支持键盘方向键实现图片切换效果. 支持点击图片切换,支持点击当前图片链接. 进度条滑块展示图片图片数量进度. XHTML <div class="demo"> <div id="imageflow"> <div id="loading">&l

  • JQuery 图片延迟加载并等比缩放插件

    JQuery 图片延迟加载并等比缩放插件

    最近在学习JS的OOP所以写了这么个东西 使用方法: $(".viewArea img").zoom({height:74,width:103}); 效果演示: http://demo.jb51.net/html/jquery_img/jquery_img.htm代码: 复制代码 代码如下: (function($){ $.fn.zoom = function(settings){ //一些默认配置: settings = $.extend({ height:0, width:0, l

  • jQuery图片预加载 等比缩放实现代码

    复制代码 代码如下: /* * Image preload and auto zoom * scaling 是否等比例自动缩放 * width 图片最大高 * height 图片最大宽 * loadpic 加载中的图片路径 * example $("*").LoadImage(true,w,h); */ jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ if(loadpic==null)loadpic=".

  • 基于jquery实现图片相关操作（重绘、获取尺寸、调整大小、缩放）

    本文为大家分享了四个jquery图片常见操作,供大家参考,具体内容如下 1.关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现. $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(

  • jQuery实现鼠标滚轮动态改变样式或效果

    代码如下: 复制代码 代码如下: $(window).scroll(function() {             var scrolls = $(this).scrollTop();             $(".context_block").each(function(){ //类名为"context_block"的块级元素                 var height = $(this).height();                 if(

  • 用jquery实现等比例缩放图片效果插件

    复制代码 代码如下: jQuery.fn.autoZoomLoadImage = function(scaling, width, height, loadPic) { if (loadPic == null) loadPic = "Loading.gif"; return this.each(function() { var t = $(this); var src = $(this).attr("src"); var img = new Image(); //a

  • jQuery实现等比例缩放大图片让大图片自适应页面布局

    在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取.但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止"

  • jquery 图片预加载 自动等比例缩放插件

    jquery 图片预加载 自动等比例缩放插件

    复制代码 代码如下: /* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 ///参数设置: scaling 是否等比例自动缩放 width 图片最大

  • 基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )

    复制代码 代码如下: <div id="Scroll" style="background-color: Green; width: 2000px; height:2000px;"> 请写很多数据-- </div> <div id="lookMore">more...</div> <script src="jquery-1.7b1.js" type="text/j

  • jQuery实现的鼠标滚轮控制图片缩放功能实例

    jQuery实现的鼠标滚轮控制图片缩放功能实例

    本文实例讲述了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"> &

  • JQuery实现鼠标滚轮滑动到页面节点

    JQuery实现鼠标滚轮滑动到页面节点

    下面通过一段JQuery代码实现鼠标滚轮滑动到页面节点的详细介绍,并通过展示效果图展示给大家. 基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 实现的代码. html代码: <section class="panel home" data-section-name="home"> <div class="inner"> <h

  • jquery横向纵向鼠标滚轮全屏切换

    jquery横向纵向鼠标滚轮全屏切换

    本文实例为大家分享了鼠标滚轮全屏切换的jquery代码,供大家参考,具体内容如下 html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name

随机推荐