Code666 (代码贴、代码片段)

[JavaScript] Javascript实现鼠标滚轮控制图片放大效果的代码 →→→→→进入此内容的聊天室

来自 , 2020-03-06, 写在 JavaScript, 查看 134 次.
URL http://www.code666.cn/view/ac3e2c4e
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="wangtd"/>
  6. <title>Colors</title>
  7. <style type="text/css">
  8. .container {
  9.     position: relative;
  10.     margin: 100px auto;
  11.     width: 720px;
  12.     height: 450px;
  13.     overflow: hidden;
  14.     border: solid 1px #000000;
  15. }
  16. </style>
  17. </head>
  18.  
  19. <body>
  20. <div class="container">
  21.     <img id="image" style="position:absolute;top:0;left:0;width:720px;height:450px" src="http://hiphotos.baidu.com/442595744/pic/item/5c0b7d2e0dd722d7023bf63e.jpg" alt=""/>
  22. </div>
  23. <div id="info"></div>
  24. <script type="text/javascript">
  25. var imageHandler = function(id,max,min) {
  26.     var _handler = document.getElementById(id);
  27.     var _moveTop = 0;
  28.     var _moveLeft = 0;
  29.     var _moveFlag = false;
  30.     function startMove() {
  31.         _moveFlag = true;
  32.         var evt = window.event;
  33.         _moveTop = evt.clientY - parseInt(_handler.style.top);
  34.         _moveLeft = evt.clientX - parseInt(_handler.style.left);
  35.     };
  36.     function doMove() {
  37.         if (!_moveFlag) {
  38.             return false;
  39.         }
  40.         var evt = window.event;
  41.         _handler.style.top = evt.clientY - _moveTop + "px";
  42.         _handler.style.left = evt.clientX - _moveLeft + "px";        
  43.     };
  44.     function endMove() {
  45.         _moveFlag = false;
  46.         _handler.releaseCapture();
  47.     };
  48.     function doScale() {
  49.         var evt = window.event;
  50.         var topPercent = (evt.clientY - _handler.getBoundingClientRect().top)/parseInt(_handler.style.height);
  51.         var leftPercent = (evt.clientX - _handler.getBoundingClientRect().left)/parseInt(_handler.style.width);
  52.         if (_handler.scrollWidth + evt.wheelDelta < min || _handler.scrollWidth + evt.wheelDelta > max) {
  53.             return;
  54.         }
  55.         var percent = _handler.scrollHeight/_handler.scrollWidth;
  56.         _handler.style.width = _handler.scrollWidth + evt.wheelDelta + "px";
  57.         _handler.style.height = parseInt(_handler.style.width)*percent + "px";
  58.        
  59.         _handler.style.top = parseInt(_handler.style.top) - topPercent*percent*evt.wheelDelta + "px";
  60.         _handler.style.left = parseInt(_handler.style.left) - leftPercent*evt.wheelDelta + "px";
  61.     };
  62.    
  63.     _handler.onmousedown = startMove;
  64.     _handler.onmousewheel = doScale;
  65.     document.onmousemove = doMove;
  66.     document.onmouseup = endMove;
  67. };
  68. imageHandler("image", 1440, 144);
  69. </script>
  70. </body>
  71. </html>
  72. //javascript/273

回复 "Javascript实现鼠标滚轮控制图片放大效果的代码"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666