jquery實(shí)現(xiàn)圖片放大鏡功能

更新時(shí)間：2015年11月23日 15:52:25 作者：similar

這篇文章主要介紹了jquery實(shí)現(xiàn)圖片放大鏡功能，需要的朋友可以參考下

實(shí)現(xiàn)原理：

　　這里用到了兩張圖片，一張小圖，一張大圖。將大圖設(shè)置為放大鏡的背景圖片，當(dāng)鼠標(biāo)在小圖上移動(dòng)時(shí)，同時(shí)控制背景大圖在放大鏡中的位置。兩張圖片大小最好是等比例的，這樣才能達(dá)到最佳效果。當(dāng)沒有大圖時(shí)，則默認(rèn)為小圖本身，這時(shí)由于兩張圖片大小一樣，因此放大鏡效果不明顯，就跟沒放大是一樣的。

　　此插件用到了html5，css3的一些屬性，ie8及以下版本不兼容，放大鏡是方形的。

運(yùn)行效果截圖如下：

具體代碼如下：

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

  //默認(rèn)參數(shù)設(shè)置
  var settings = {
   diameter: 150,     //放大鏡的直徑大小
   borderWidth: 2,     //放大鏡邊框大小
   borderColor: "white",   //放大鏡邊框顏色
   backgroundImg: "../img/111.jpg" //放大鏡內(nèi)的圖片（即大圖）
  };

  //合并參數(shù)
  if (options)
   $.extend(settings, options);

  //鏈?zhǔn)皆瓌t
  return this.each(function () {
   //存儲(chǔ)當(dāng)前對(duì)象
   var root = $(this);

   //當(dāng)前對(duì)象寬高
   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 + ";";

   //創(chuàng)建放大鏡
   var magnifier = $("<div style='" + style + "'></div>").appendTo(root.parent());

   //圖片（當(dāng)沒有大圖時(shí)，為小圖本身）
   var backgroundImg = settings.backgroundImg ? settings.backgroundImg : root.attr("src");

   //將圖片放入放大鏡內(nèi)
   magnifier.css({ backgroundImage: "url('" + backgroundImg + "')" });

   //縮放比例
   var WRatio = 0; //寬度
   var HRatio = 0; //高度

   //圖片加載完，計(jì)算縮放比例
   //由于圖片原本不在DOM文檔里，因此頁面加載時(shí)不會(huì)觸發(fā)load事件，因此要通過執(zhí)行appendTo來觸發(fā)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);

    //判斷鼠標(biāo)是否在圖片上
    if (LPos < 0 || TPos < 0 || LPos > WRoot || TPos > HRoot) {

     magnifier.hide(); //不在隱藏放大鏡

    } else {

     magnifier.show(); //反之顯示放大鏡

     //控制放大鏡內(nèi)背景圖片的位置 （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);

   //當(dāng)前對(duì)象
   root.mousemove(Position);

  });
 };
})();

實(shí)例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>

關(guān)于jquery實(shí)現(xiàn)圖片放大鏡功能的內(nèi)容就介紹到這里，希望大家仔細(xì)研究，學(xué)以致用。

您可能感興趣的文章: