圖片放大鏡插件——jqzoom
在調(diào)用jqzoom圖片放大鏡插件時(shí)，需要準(zhǔn)備一大一小兩張一樣的圖片，在頁面中顯示小圖片，當(dāng)鼠標(biāo)在小圖片中移動(dòng)時(shí)，調(diào)用該插件的jqzoom()方法，顯示與小圖片相同的大圖片區(qū)域，從而實(shí)現(xiàn)放大鏡的效果，調(diào)用格式如下：
$(linkimage).jqzoom({options})
其中l(wèi)inkimage參數(shù)為包含圖片的<a>元素名稱，options為插件方法的配置對(duì)象。
例如，在頁面中，添加一個(gè)被<a>元素包含的圖片元素，當(dāng)在圖片元素中移動(dòng)鼠標(biāo)時(shí)，在圖片的右邊，將顯示放大后的所選區(qū)域效果，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)在小圖片中移動(dòng)鼠標(biāo)時(shí)，將調(diào)用放大鏡插件的jqzoom()方法，在圖片的右側(cè)顯示與小圖片所選區(qū)域相同的放大區(qū)域，實(shí)現(xiàn)放大鏡的效果。
任務(wù)
我來試試，親自使用放大鏡插件放大指定的圖片
在下列代碼的第25行，調(diào)用放大鏡插件的jqzoom()方法，實(shí)現(xiàn)圖片移動(dòng)區(qū)域的放大鏡效果。
- ?不會(huì)了怎么辦
-
- 首先，獲取包含小圖片元素的<a>元素對(duì)象，然后，調(diào)用該對(duì)象的
jqzoom()方法綁定與小圖片相同的大圖片元素，實(shí)現(xiàn)小圖片移動(dòng)區(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://idcbgp.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://idcbgp.cn/data/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://idcbgp.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;
}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
