編程挑戰(zhàn)
通過(guò)課程的學(xué)習(xí)，你已經(jīng)了解了放大鏡的實(shí)現(xiàn)原理和使用原生JS實(shí)現(xiàn)一個(gè)簡(jiǎn)單的放大鏡。請(qǐng)?jiān)囍褂胘Query技術(shù)，實(shí)現(xiàn)一個(gè)現(xiàn)實(shí)中經(jīng)常會(huì)用到的放大鏡特效。
任務(wù)
1. 使用jQuery技術(shù)，實(shí)現(xiàn)放大鏡特效，要求鼠標(biāo)浮在產(chǎn)品圖片上時(shí)，圖片區(qū)域進(jìn)行局部放大顯示。
2. 頁(yè)面樣式可以發(fā)揮想象，自行設(shè)計(jì)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大鏡</title>
<script src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0
}
#demo {
display: block;
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
#small-box {
position: relative;
z-index: 1;
}
#float-box {
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
cursor: move;
}
#mark {
position: absolute;
display: block;
width: 400px;
height: 255px;
z-index: 10;
background: #fff;
filter: alpha(opacity=0);
opacity: 0;
cursor: move;
}
#big-box {
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;;
}
#big-box img {
position: absolute;
z-index: 5
}
</style>
</head>
<body>
<div id="demo">
<div id="small-box">
<div id="mark"></div>
<div id="float-box"></div>
<img src="http://img1.sycdn.imooc.com//537d77fb0001559d04000255.jpg"/>
</div>
<div id="big-box">
<img src="http://img1.sycdn.imooc.com//537d781b0001c04210240654.jpg"/>
</div>
</div>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
