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


Posted in Javascript onJuly 01, 2014
<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>
Javascript 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 #Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 #Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 #Javascript
Visual Studio中js调试的方法图解
Jun 30 #Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 #Javascript
js从Cookies里面取值的简单实现
Jun 30 #Javascript
jQuery学习总结之jQuery事件
Jun 30 #Javascript
You might like
ajax在joomla中的原生态应用代码
2012/07/19 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
学习jQuey中的return false
2015/12/18 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
pandas 选择某几列的方法
2018/07/03 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Python logging设置和logger解析
2019/08/28 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
《神奇的克隆》教学反思
2014/04/10 职场文书
初中学习计划书范文
2014/09/15 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
求职自我评价怎么写
2015/03/09 职场文书