圖片放大鏡插件——jqzoom
在調(diào)用jqzoom圖片放大鏡插件時，需要準備一大一小兩張一樣的圖片，在頁面中顯示小圖片，當(dāng)鼠標在小圖片中移動時，調(diào)用該插件的jqzoom()方法，顯示與小圖片相同的大圖片區(qū)域，從而實現(xiàn)放大鏡的效果，調(diào)用格式如下：
$(linkimage).jqzoom({options})
其中l(wèi)inkimage參數(shù)為包含圖片的<a>元素名稱，options為插件方法的配置對象。
例如，在頁面中，添加一個被<a>元素包含的圖片元素，當(dāng)在圖片元素中移動鼠標時，在圖片的右邊，將顯示放大后的所選區(qū)域效果，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)在小圖片中移動鼠標時，將調(diào)用放大鏡插件的jqzoom()方法，在圖片的右側(cè)顯示與小圖片所選區(qū)域相同的放大區(qū)域，實現(xiàn)放大鏡的效果。
任務(wù)
我來試試，親自使用放大鏡插件放大指定的圖片
在下列代碼的第25行，調(diào)用放大鏡插件的jqzoom()方法，實現(xiàn)圖片移動區(qū)域的放大鏡效果。
- ?不會了怎么辦
-
- 首先，獲取包含小圖片元素的<a>元素對象，然后，調(diào)用該對象的
jqzoom()方法綁定與小圖片相同的大圖片元素，實現(xiàn)小圖片移動區(qū)域的放大效果。
- “jqzoom”方法名書寫是否正確，注意區(qū)分大小寫。
<!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>
<title>圖片放大鏡插件</title>
<link href="http://yifanck.cn/data/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://yifanck.cn/data/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://yifanck.cn/data/jquery.jqzoom.js"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">圖片放大鏡</span>
</div>
<div class="content">
<a href="http://img1.sycdn.imooc.com//52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖">
<img src="http://img1.sycdn.imooc.com//52e4aee700012df702130212.jpg" alt=""/>
</a>
</div>
</div>
<script type="text/javascript">
$(function () {
? //綁定圖片放大插件jqzoom
zoomWidth: 123, //小圖片所選區(qū)域的寬
zoomHeight: 123, //小圖片所選區(qū)域的高
zoomType: 'reverse' //設(shè)置放大鏡的類型
});
});
</script>
</body>
</html>
#divtest
{
width: 282px;
}
#divtest .title
{
padding: 8px;
background-color: Blue;
color: #fff;
height: 23px;
line-height: 23px;
font-size: 15px;
font-weight: bold;
}
#divtest .content
{
padding: 8px 0px;
background-color: #fff;
font-size: 13px;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
