zoukankan      html  css  js  c++  java
  • 图片按比例缩放,可输入参数设定初始大小

    不生成缩略图,直接调用原图

     1 <head>
     2 <title>测试</title>
     3 <script language="javascript" type="text/javascript">
     4 //图片按比例缩放,可输入参数设定初始大小
     5 function resizeimg(ImgD,iwidth,iheight) {
     6 var image=new Image();
     7 image.src=ImgD.src;
     8 if(image.width>0 && image.height>0){
     9 if(image.width/image.height>= iwidth/iheight){
    10 if(image.width>iwidth){
    11 ImgD.width=iwidth;
    12 ImgD.height=(image.height*iwidth)/image.width;
    13 }else{
    14 ImgD.width=image.width;
    15 ImgD.height=image.height;
    16 }
    17 ImgD.alt=image.width+"×"+image.height;
    18 }
    19 else{
    20 if(image.height>iheight){
    21 ImgD.height=iheight;
    22 ImgD.width=(image.width*iheight)/image.height;
    23 }else{
    24 ImgD.width=image.width;
    25 ImgD.height=image.height;
    26 }
    27 ImgD.alt=image.width+"×"+image.height;
    28 }
    29 ImgD.style.cursor= "pointer"; //改变鼠标指针
    30 ImgD.onclick = function() { window.open(this.src);} //点击打开大图片
    31 if (navigator.userAgent.toLowerCase().indexOf("ie") > -1) { //判断浏览器,如果是IE
    32 ImgD.title = "请使用鼠标滚轮缩放图片,点击图片可在新窗口打开";
    33 ImgD.onmousewheel = function img_zoom() //滚轮缩放
    34 {
    35 var zoom = parseInt(this.style.zoom, 10) || 100;
    36 zoom += event.wheelDelta / 12;
    37 if (zoom> 0) this.style.zoom = zoom + "%";
    38 return false;
    39 }
    40 } else { //如果不是IE
    41 ImgD.title = "点击图片可在新窗口打开";
    42 }
    43 }
    44 }
    45 </script>
    46 </head>
    47 <body>
    48 <br /><img onload="javascript:resizeimg(this,100,200)" src="http://img.poco.cn/photo/20060602/972374149620060602140117_1.jpg" />
    49 
    50 </body>
    51 </html>
  • 相关阅读:
    【Docker】命令 restart
    【Docker】命令 rename
    小知识点笔记一(原始版)
    Java常用类——匿名对象
    Java常用类——Arrays工具类
    Java常用类——Scanner类
    Python怎么测试异步接口
    接口测试面试题
    Pycharm使用常见问题
    接口测试命令Httpie的使用
  • 原文地址:https://www.cnblogs.com/Chaser-Eagle/p/3684889.html
Copyright © 2011-2022 走看看