집 > 기사 > 웹 프론트엔드 > jquery는 그림 돋보기 function_jquery를 구현합니다.

jquery는 그림 돋보기 function_jquery를 구현합니다.

WBOY원래의: 2016-05-16 15:30:251533검색

구현 원칙:

여기에는 작은 사진 하나, 큰 사진 하나, 두 장의 사진이 사용되었습니다. 큰 이미지를 돋보기 배경 이미지로 설정합니다. 작은 이미지 위로 마우스를 이동하면 돋보기 안의 큰 이미지 위치도 제어됩니다. 최상의 효과를 얻으려면 두 이미지의 크기 비율이 동일한 것이 가장 좋습니다. 큰 그림이 없으면 기본적으로 작은 그림 자체로 설정됩니다. 이때 두 그림의 크기가 같기 때문에 확대가 없는 것처럼 돋보기 효과도 뚜렷하지 않습니다.

이 플러그인은 HTML5 및 CSS3의 일부 속성을 사용합니다. IE8 이하 버전에서는 돋보기가 사각형입니다.

런닝 효과 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

(function () {
 $.fn.Magnifier = function (options) {

  //默认参数设置
  var settings = {
   diameter: 150,     //放大镜的直径大小
   borderWidth: 2,     //放大镜边框大小
   borderColor: "white",   //放大镜边框颜色
   backgroundImg: "../img/111.jpg" //放大镜内的图片（即大图）
  };

  //合并参数
  if (options)
   $.extend(settings, options);

  //链式原则
  return this.each(function () {
   //存储当前对象
   var root = $(this);

   //当前对象宽高
   var WRoot = root.width();
   var HRoot = root.height();

   //偏移量 left 和 top
   var offset = root.offset();

   //放大镜样式
   var style = "background-position: 0px 0px;background-repeat: no-repeat;float: left;";
   style += "position: absolute;box-shadow:0 0 5px #777, 0 0 10px #aaa inset;display: none;";
   style += "width: " + String(settings.diameter) + "px;height: " + String(settings.diameter) + "px;";
   style += "border-radius: " + String(settings.diameter / 2 + settings.borderWidth) + "px;";
   style += "border: " + String(settings.borderWidth) + "px solid " + settings.borderColor + ";";

   //创建放大镜
   var magnifier = $("<div style='" + style + "'></div>").appendTo(root.parent());

   //图片（当没有大图时，为小图本身）
   var backgroundImg = settings.backgroundImg &#63; settings.backgroundImg : root.attr("src");

   //将图片放入放大镜内
   magnifier.css({ backgroundImage: "url('" + backgroundImg + "')" });

   //缩放比例
   var WRatio = 0; //宽度
   var HRatio = 0; //高度

   //图片加载完，计算缩放比例
   //由于图片原本不在DOM文档里，因此页面加载时不会触发load事件，因此要通过执行appendTo来触发load事件
   $("<img style='display:none;' src='" + backgroundImg + "' />").load(function () {
    WRatio = $(this).width() / WRoot;
    HRatio = $(this).height() / HRoot;
   }).appendTo(root.parent());

   //放大镜及其背景图片位置控制
   function Position(e) {

    var LPos = parseInt(e.pageX - offset.left);
    var TPos = parseInt(e.pageY - offset.top);

    //判断鼠标是否在图片上
    if (LPos < 0 || TPos < 0 || LPos > WRoot || TPos > HRoot) {

     magnifier.hide(); //不在隐藏放大镜

    } else {

     magnifier.show(); //反之显示放大镜

     //控制放大镜内背景图片的位置 （settings.diameter / 2）半径
     LPos = String(((e.pageX - offset.left) * WRatio - settings.diameter / 2) * (-1));
     TPos = String(((e.pageY - offset.top) * HRatio - settings.diameter / 2) * (-1));

     magnifier.css({ backgroundPosition: LPos + 'px ' + TPos + 'px' });

     //控制放大镜本身位置
     LPos = String(e.pageX - settings.diameter / 2);
     TPos = String(e.pageY - settings.diameter / 2);

     magnifier.css({ left: LPos + 'px', top: TPos + 'px' });
    }
   }

   //放大镜
   magnifier.mousemove(Position);

   //当前对象
   root.mousemove(Position);

  });
 };
})();

DEMO 예시는 다음과 같습니다.

<!DOCTYPE html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>CSS3+jQuery图像放大镜效果</title>
 <style type="text/css">
  body
  {
   background-color: Black;
  }
  .box
  {
   width: 700px;
   margin: 50px auto;
  }
 </style>
</head>
<body>
 <div class="box">
　　　　 <!--小图-->
  <img alt="" id="img_02" src="../img/222.gif" width="700" height="500" />
 </div>
 <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script src="../Scripts/jquery.similar.magnifier.js" type="text/javascript"></script>
 <script type="text/javascript">
  $("#img_02").Magnifier();
 </script>
</body>
</html>

이미지 돋보기의 jquery 기능을 소개하는 내용은 여기까지입니다. 주의 깊게 공부하고 배운 내용을 적용해 보시기 바랍니다.

성명：

이전 기사：Bootstrap 양식(양식 컨트롤)_javascript 기술 사용 방법에 대한 종합 분석다음 기사：Bootstrap 양식(양식 컨트롤)_javascript 기술 사용 방법에 대한 종합 분석

jquery는 그림 돋보기 function_jquery를 구현합니다.

관련 기사