recherche

Maison >interface Web >js tutoriel >jquery implémente la fonction loupe d'image_jquery

jquery implémente la fonction loupe d'image_jquery

WBOY
WBOYoriginal
2016-05-16 15:30:251561parcourir

Principe de mise en œuvre :

Deux images sont utilisées ici, une petite image et une grande image. Définir la grande image comme image d'arrière-plan de la loupe Lorsque la souris se déplace sur la petite image, la position de la grande image d'arrière-plan dans la loupe est également contrôlée. Il est préférable que les deux images soient de taille égale pour obtenir le meilleur effet. Lorsqu'il n'y a pas de grande image, la petite image elle-même est utilisée par défaut. À ce stade, puisque les deux images ont la même taille, l'effet de loupe n'est pas évident, tout comme l'absence de grossissement.

Ce plug-in utilise certains attributs de HTML5 et CSS3. Il n'est pas compatible avec les versions IE8 et inférieures. La loupe est carrée.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant : 

(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);

  });
 };
})();

L'exemple DEMO est le suivant : 

<!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>

C'est tout pour présenter la fonction jquery de la loupe d'image. J'espère que vous l'étudierez attentivement et appliquerez ce que vous avez appris.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Analyse complète de la façon d'utiliser les formulaires Bootstrap (contrôles de formulaire)_compétences javascriptArticle suivant：Analyse complète de la façon d'utiliser les formulaires Bootstrap (contrôles de formulaire)_compétences javascript

Articles Liés

Voir plus