鼠标拖动图片及滚轮缩放图片网页特效

时间：2014-05-21 来源：互联网

特效说明：

一款鼠标拖动图片及滚轮缩放图片网页特效，div拖动代码，弹出窗口拖动代码，网页全屏拖动广告图片代码，鼠标滚动滚轮图片缩放大小网页制作特效代码。（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）

使用方法：

JS代码：
/*绑定事件*/
function addEvent(obj, sType, fn) {
   if (obj.addEventListener) {
       obj.addEventListener(sType, fn, false);
   } else {
       obj.attachEvent('on' + sType, fn);
   }
};
function removeEvent(obj, sType, fn) {
   if (obj.removeEventListener) {
       obj.removeEventListener(sType, fn, false);
   } else {
       obj.detachEvent('on' + sType, fn);
   }
};
function prEvent(ev) {
   var oEvent = ev || window.event;
   if (oEvent.preventDefault) {
       oEvent.preventDefault();
   }
   return oEvent;
}

/*添加滑轮事件*/
function addWheelEvent(obj, callback) {
   if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
       addEvent(obj, 'DOMMouseScroll', wheel);
   } else {
       addEvent(obj, 'mousewheel', wheel);
   }
   function wheel(ev) {
       var oEvent = prEvent(ev),
       delta = oEvent.detail ? oEvent.detail > 0 : oEvent.wheelDelta < 0;
       callback && callback.call(oEvent, delta);
       return false;
   }
};

/*页面载入后*/
window.onload = function() {
   var oImg = document.getElementById('oImg');

   /*拖拽功能*/
   (function() {
       addEvent(oImg, 'mousedown', function(ev) {
           var oEvent = prEvent(ev),
           oParent = oImg.parentNode,
           disX = oEvent.clientX - oImg.offsetLeft,
           disY = oEvent.clientY - oImg.offsetTop,
           startMove = function(ev) {
               if (oParent.setCapture) {
                   oParent.setCapture();
               }
               var oEvent = ev || window.event,
               l = oEvent.clientX - disX,
               t = oEvent.clientY - disY;
               oImg.style.left = l +'px';
               oImg.style.top = t +'px';
               oParent.onselectstart = function() {
                   return false;
               }
           }, endMove = function(ev) {
               if (oParent.releaseCapture) {
                   oParent.releaseCapture();
               }
               oParent.onselectstart = null;
               removeEvent(oParent, 'mousemove', startMove);
               removeEvent(oParent, 'mouseup', endMove);
           };
           addEvent(oParent, 'mousemove', startMove);
           addEvent(oParent, 'mouseup', endMove);
           return false;
       });
   })();

   /*以鼠标位置为中心的滑轮放大功能*/
   (function() {
       addWheelEvent(oImg, function(delta) {
           var ratioL = (this.clientX - oImg.offsetLeft) / oImg.offsetWidth,
           ratioT = (this.clientY - oImg.offsetTop) / oImg.offsetHeight,
           ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,
           w = parseInt(oImg.offsetWidth * ratioDelta),
           h = parseInt(oImg.offsetHeight * ratioDelta),
           l = Math.round(this.clientX - (w * ratioL)),
           t = Math.round(this.clientY - (h * ratioT));
           with(oImg.style) {
               width = w +'px';
               height = h +'px';
               left = l +'px';
               top = t +'px';
           }
       });
   })();
};

标签鼠标拖动漂浮广告

预览收藏分享评论