js鼠标放图片上==放大镜显示效果demo效果示例(整理)

简介: js鼠标放图片上==放大镜显示效果demo效果示例(整理)
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>jQuery-图片的放大镜显示效果</title>
    <style type="text/css">
      img {
        max-width: none;
      }
      .thumbnail-list {
        display: inline-block;
        width: 1.2em;
        height: 1.1em;
        text-align: center;
        font-size: 128px;
      }
      .thumbnail-list img.thumbnail {
        padding: 3px;
        border: 1px solid #cccccc;
        background: white;
        vertical-align: middle;
        position: relative;
      }
      .thumbnail-list:hover,
      .thumbnail-list:hover img.thumbnail {
        border-color: #ff3300;
      }
      .magnify {
        width: 200px;
        height: 200px;
        padding: 3px;
        background: white;
        border: 1px solid #cccccc;
        text-align: center;
        position: absolute;
        z-index: 1000;
        left: 0;
        top: 0;
        overflow: hidden;
      }
      .thumbnail {
        width: 1em;
        height: 1em;
      }
    </style>
  </head>
  <body>
    <a href="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png"
      class="thumbnail-list">
      <img class="thumbnail"
        src="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" />
    </a>
    <a href="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png"
      class="thumbnail-list">
      <img class="thumbnail"
        src="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" />
    </a>
    <a href="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png"
      class="thumbnail-list">
      <img class="thumbnail"
        src="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" />
    </a>
    <a href="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png"
      class="thumbnail-list">
      <img class="thumbnail"
        src="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" />
    </a>
  </body>
  <!-- <script type="text/javascript" src="https://cs.m.xczhihui.com/xcview/html/demo/js/jquery.js"></script> -->
  <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  <script type="text/javascript">
    // jQuery.noConflict();
    jQuery(document).ready(function() {
      $("img.thumbnail").jqueryzoom();
    });
  </script>
  <script>
    (function($) {
      $.fn.jqueryzoom = function(options) {
        var settings = {
          xzoom: 200,
          yzoom: 200,
          offset: 10,
          position: "right"
        };
        if (options) {
          $.extend(settings, options);
        }
        $(this).hover(function() {
          var imageLeft = $(this).get(0).offsetLeft;
          var imageRight = $(this).get(0).offsetRight;
          var imageTop = $(this).get(0).offsetTop;
          var imageWidth = $(this).get(0).offsetWidth;
          var imageHeight = $(this).get(0).offsetHeight;
          var bigimage = $(this).parent().attr("href");
          if ($("span.magnify").get().length == 0) {
            $(this).after("<span class='magnify'><img class='bigimg' src='" + bigimage +
              "'/></span>");
          }
          if (settings.position == "right") {
            leftpos = imageLeft + imageWidth + settings.offset;
          } else {
            leftpos = imageLeft - settings.xzoom - settings.offset;
          }
          $("span.magnify").css({
            top: imageTop,
            left: leftpos
          });
          $("span.magnify").width(settings.xzoom);
          $("span.magnify").height(settings.yzoom);
          $("span.magnify").show();
          $(document.body).mousemove(function(e) {
            var bigwidth = $(".bigimg").get(0).offsetWidth;
            var bigheight = $(".bigimg").get(0).offsetHeight;
            var scaley = 'x';
            var scalex = 'y';
            if (isNaN(scalex) | isNaN(scaley)) {
              var scalex = Math.round(bigwidth / imageWidth);
              var scaley = Math.round(bigheight / imageHeight);
            }
            mouse = new MouseEvent(e);
            scrolly = mouse.y - imageTop - ($("span.magnify").height() * 1 / scaley) / 2;
            $("span.magnify").get(0).scrollTop = scrolly * scaley;
            scrollx = mouse.x - imageLeft - ($("span.magnify").width() * 1 / scalex) / 2;
            $("span.magnify").get(0).scrollLeft = (scrollx) * scalex;
          });
        }, function() {
          $("span.magnify").hide();
          $(document.body).unbind("mousemove");
          $(".lenszoom").remove();
          $("span.magnify").remove();
        });
      }
    })(jQuery);
    function MouseEvent(e) {
      this.x = e.pageX
      this.y = e.pageY
    }
  </script>
</html>

相关文章
|
30天前
|
移动开发 JavaScript 定位技术
分享118个JS图片代码,总有一款适合您
分享118个JS图片代码,总有一款适合您
15 0
|
30天前
|
移动开发 JavaScript 前端开发
分享126个JS图片代码,总有一款适合您
分享126个JS图片代码,总有一款适合您
17 0
|
30天前
|
移动开发 JavaScript HTML5
分享106个JS图片代码,总有一款适合您
分享106个JS图片代码,总有一款适合您
15 0
|
1月前
|
移动开发 JSON JavaScript
分享188个JS图片效果JS代码,总有一款适合你
分享188个JS图片效果JS代码,总有一款适合你
22 1
|
1月前
|
JavaScript
js实现图片3D轮播效果(收藏)
js实现图片3D轮播效果(收藏)
16 0
|
30天前
|
JavaScript 前端开发 安全
分享117个JS图片代码,总有一款适合您
分享117个JS图片代码,总有一款适合您
10 0
|
30天前
|
移动开发 JSON JavaScript
分享116个JS图片代码,总有一款适合您
分享116个JS图片代码,总有一款适合您
20 0
|
1月前
|
JavaScript 算法 前端开发
JS懒加载 -- 适用于商城主页商品懒加载、图片懒加载,算法简单、易于理解、萌新福音
JS懒加载 -- 适用于商城主页商品懒加载、图片懒加载,算法简单、易于理解、萌新福音
15 0
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
JS制作跟随鼠标移动的图片
JS制作跟随鼠标移动的图片
15 0
|
2月前
|
JavaScript 安全
原生js实现将base64图片内容复制到剪贴板
原生js实现将base64图片内容复制到剪贴板

相关产品

  • 云迁移中心