zoom-in和zoom-out手形效果实例页面

展示

代码

• HTML：

  <h4>点击图片</h4>
  <img src="1.jpg" width="128" class="zoom-in">

• CSS：

  .zoom-in {
      /* 放大 */
      cursor: zoom-in; 
  }
  .zoom-out {
      /* 缩小 */
     cursor: zoom-out; 
  }

• JavaScript：

  var eleImg = document.querySelector('img[width]');
  if (eleImg) {
      eleImg.addEventListener('click', function () {
          var width = this.getAttribute('width');
          if (width == '128') {
              this.width = '256';
              this.className = 'zoom-out';
          } else {
              this.width = '128';
              this.className = 'zoom-in';
          }
      });
  }