jQuery外掛之jqzoom放大鏡外掛
阿新 • • 發佈：2019-02-14
這個在淘寶上處處可見了，需要兩張圖片，一張大的一張小的，在<a>標籤顯示小圖片，連結大圖片，再給其新增一個jqzoom呼叫，設定其選中區域的長和寬。
還可以引用其css庫，設定其選中或非選中部分變灰。
這裡也是慕課網提供的一個css和一個js庫
<link href="http://www.imooc.com/data/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://www.imooc.com/data/jquery.jqzoom.js"></script>
</pre></p><p><pre class="html" name="code"><pre class="html" name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jqzoom</title> <link href="http://www.imooc.com/data/jquery.jqzoom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="http://www.imooc.com/data/jquery.jqzoom.js"></script> </head> <body> <div class="content"> <a href="big.jpg" id="jqzoomIMG" title="丘比龍"> <img src="small.jpg" alt=""/> </a> </div> <script type="text/javascript"> $(function () { $("#jqzoomIMG").jqzoom({ //繫結圖片放大外掛jqzoom zoomWidth:200, //小圖片所選區域的寬 zoomHeight: 200, //小圖片所選區域的高 zoomType: 'reverse' //設定放大鏡的型別，預設standard即選中的部分變灰，這裡是reverse即非選中變灰 }); }); </script> </body> </html>
