zoukankan      html  css  js  c++  java
  • 鼠标滚动实现图片放大缩小[转]

    <!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="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    //图片按比例缩放,可输入参数设定初始大小
    function resizeimg(ImgD,iwidth,iheight) {
         var image=new Image();
         image.src=ImgD.src;
         if(image.width>0 && image.height>0){
            if(image.width/image.height>= iwidth/iheight){
               if(image.width>iwidth){
                   ImgD.width=iwidth;
                   ImgD.height=(image.height*iwidth)/image.width;
               }else{
                      ImgD.width=image.width;
                      ImgD.height=image.height;
                    }
                   ImgD.alt=image.width+"×"+image.height;
            }
            else{
                    if(image.height>iheight){
                           ImgD.height=iheight;
                           ImgD.width=(image.width*iheight)/image.height;
                    }else{
                            ImgD.width=image.width;
                            ImgD.height=image.height;
                         }
                    ImgD.alt=image.width+"×"+image.height;
            }
        ImgD.style.cursor= "pointer"; //改变鼠标指针
            ImgD.onclick = function() { window.open(this.src);} //点击打开大图片
            if (navigator.userAgent.toLowerCase().indexOf("ie") > -1) { //判断浏览器,如果是IE
          ImgD.title = "请使用鼠标滚轮缩放图片,点击图片可在新窗口打开";
          ImgD.onmousewheel = function img_zoom() //滚轮缩放
          {
              var zoom = parseInt(this.style.zoom, 10) || 100;
              zoom += event.wheelDelta / 12;
              if (zoom> 0) this.style.zoom = zoom + "%";
              return false;
          }
        } else { //如果不是IE
                ImgD.title = "点击图片可在新窗口打开";
             }
        }
    }

    //-->
    </SCRIPT>
    </head>

    <body>

    <div >
    <img name="" src="new.jpg" onload="javascript:resizeimg(this,198,235)">
    <div>
    </body>
    </html>

  • 相关阅读:
    [2021.8集训Day10/JZOJ.3410]【GDOI2014模拟】Tree
    [2021.8集训Day10/JZOJ.3441]【NOIP2013模拟】小喵喵的新家
    [模板]模拟退火 / 洛谷 P1337 [JSOI2004]平衡点
    P1600 [NOIP2016 提高组] 天天爱跑步
    P4556 [Vani有约会]雨天的尾巴 /【模板】线段树合并
    selenium的三种等待
    python中socket、socketio、flask-socketio、WebSocket的区别与联系
    (十二)python3 迭代器
    (十一)python3 encode()和decode()
    (十)python3 生成器
  • 原文地址:https://www.cnblogs.com/li-fei/p/3285691.html
Copyright © 2011-2022 走看看