[分享]图片ALT+滚轮自动缩放代码（兼容目前常见浏览器）

以下代码由 蓝蝎（Rory） 友情提供

该代码在 IE 、Firefox 和 Opera 下均能实现图片滚轮缩放，加上ALT控制。
图片调用

Code:
<img src="图片.jpg" alt="" border="0" onmouseover="addEventMouseWheel(event);" onmouseout="clearEventMouseWheel(event);" class="image_for_zoom" />



Code:
<script type="text/javascript" language="javascript">
<!--
/**
* 鼠标滚轮控制图片缩放
*
* Author: Rory（黄荣荣）
*
* QQ: 244690
*
* MSN: rory_cn@hotmail.com
*
* Email: rory_cn@163.com
*
* @package 鼠标滚轮控制图片缩放
* @version $Id$
* @copyright Copyright (c) 2006  by Rory Huang
* @license http://www.gnu.org/copyleft/lesser.html#SEC3 LGPL License
*/

/**
* 检测是否为IE；
*/
var isIeWheel=navigator.userAgent.indexOf('MSIE') > 0 ? true : false;

/**
* 侦听鼠标滚轮事件初始化；
*/
function addEventMouseWheel(objEvent)
{
  /**
   * 获得当前鼠标事件，用于 Firefox
   */
  if (!objEvent) objEvent = window.event;

  /**
   * 获得当前对象，target 用于 Firefox ，srcElement 用于 IE;
   */
  var objImage = objEvent.target || objEvent.srcElement;

  /**
   * 开始侦听
   */
  if (document.attachEvent)
  {
    objImage.attachEvent("onmousewheel", zoomImage);
    if (isIeWheel) document.onmousewheel=function () { return false; }
  }
  else objImage.addEventListener("DOMMouseScroll", zoomImage, false);
}

/**
* 滚轮事件还原，为IE做的Hack，暂时没找到 Firefox 和 Opera 下的解决办法，等支持 MouseWheel 的 DOM3吧
*/
function clearEventMouseWheel(objEvent)
{
  if (isIeWheel) document.onmousewheel=function () { return true; }
}

/**
* 滚轮事件处理；
* 请在需要使用zoom的图象标记中加上 class="image_for_zoom" ；
*/
function zoomImage(objEvent)
{
  /**
   * 获得当前鼠标事件，用于 Firefox
   */
  if (!objEvent) objEvent = window.event;

  /**
   * 获得当前对象，target 用于 Firefox ，srcElement 用于 IE;
   */
  var objImage = objEvent.target || objEvent.srcElement;


  /**
   * 定义移动单位数值，默认为向上返回负，向下返回正；
   */
  var int_zoom = 0;

  /**
   * 定义IE的放大比例，按百分比定义，10就是10%；
   */
  var int_zoomout_ie = 10;

  /**
   * 定义 Firefox 和 Opera 放大像素比例，因为他们不支持 zoom 的属性；
   */
  var int_zoomout_ff = 30;

  /**
   * 定义图片缩放最小宽度
   */
  var int_min_width = 10;

  /**
   * 定义图片缩放最小高度
   */
  var int_min_height = 10;

  /**
   * 定义是否触发键盘代码
   */
  var bln_keycode = true;

  /**
   * 检测键盘触发
   */
  if (bln_keycode) { if (!objEvent.altKey) return true; }


  if (objImage.className.indexOf("image_for_zoom")>-1)
  {
    if (objEvent.wheelDelta)
    {
      /**
       * IE 和 Opera 每次移动是以120为单位的
       */
      int_zoom = -(objEvent.wheelDelta / 120);
      /**
       * Opera 和 IE 计算方法是相反的
       */
      if (window.opera) int_zoom = -int_zoom;
    }
    else if (objEvent.detail)
    {
      /**
       * Firefox 每次移动是以3为单位的
       */
      int_zoom = objEvent.detail / 3;
    }

    if (isIeWheel)
    {
      var int_zoom_ie = parseInt(objImage.style.zoom) || 100;
      int_zoom_ie += int_zoomout_ie * int_zoom;
      if (int_zoom_ie > 0 ) objImage.style.zoom = int_zoom_ie + "%";
    }
    else
    {
      var int_zoom_width = 0;
      var int_zoom_height = 0;
      if (objImage.width > objImage.height)
      {
        int_zoom_height = objImage.height + int_zoomout_ff * int_zoom;
        int_zoom_width = objImage.width * int_zoom_height / objImage.height;
      }
      else
      {
        int_zoom_width = objImage.width + int_zoomout_ff * int_zoom;
        int_zoom_height = objImage.height * int_zoom_width / objImage.width;
      }
      if (int_zoom_width > int_min_width && int_zoom_height > int_min_height)
      {
        objImage.width = int_zoom_width;
        objImage.height = int_zoom_height;
      }
    }
  }
}
//-->
</script>



http://www.joekoe.com/forum/view_98742,2.html

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: