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>

  • 相关阅读:
    make dep
    TS流的解析
    qt ISO C++ forbids declaration of 'XXXX' with no type
    qt 中文乱码
    qt creator 快捷键 (一)
    qt 坐标变换
    Qt常用类及类方法简介之 QAction类
    QWidget背景(透明)问题
    如何在 QWidget 窗口上弹出右键菜单
    qt 事件
  • 原文地址:https://www.cnblogs.com/li-fei/p/3285691.html
Copyright © 2011-2022 走看看