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>

  • 相关阅读:
    Redis 发布与订阅
    Redis 数据持久化的理解
    自定义shell脚本快速搭建LNMP环境
    PHP环境配置与优化(Ubuntu16.04/PHP7)
    记录在ios系统上,自研app,灰度环境遇到的一个vue页面dom节点已渲染,但是显示部分空白的情况
    记录在苹果6p/6sp,10版本上,app内交互token等用户信息丢失的问题
    记录在苹果X手机上运行遇到的代码Dom被阻塞不更新的一个坑
    巧用flex(一)
    谷歌浏览器调试手机app内置网页
    与app交互因异步造成的坑记录
  • 原文地址:https://www.cnblogs.com/li-fei/p/3285691.html
Copyright © 2011-2022 走看看