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 相关文章推荐
字符串的replace方法应用浅析
Dec 06 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
原生JS实现音乐播放器
Jan 26 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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
ajax请求data遇到的问题分析
2018/01/18 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
低版本中Python除法运算小技巧
2015/04/05 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python制作词云的方法
2018/01/03 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
python入门之井字棋小游戏
2020/03/05 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
灵泰克Java笔试题
2016/01/09 面试题
化工专业推荐信范文
2013/11/28 职场文书
自荐信范文
2013/12/10 职场文书
大学生军训感想
2014/02/16 职场文书
出国留学担保书
2014/05/20 职场文书
贷款工作证明模板
2015/06/12 职场文书
学生会部长竞选稿
2015/11/19 职场文书
教师网络培训心得体会
2016/01/09 职场文书
python热力图实现的完整实例
2022/06/25 Python
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers
Fluentd搭建日志收集服务
2022/09/23 Servers