編程練習(xí)
根據(jù)所學(xué)知識(shí)，補(bǔ)充完整代碼，實(shí)現(xiàn)課程中的放大鏡效果，當(dāng)鼠標(biāo)移到產(chǎn)品小圖片之上時(shí)，右側(cè)實(shí)現(xiàn)同步局部放大的放大鏡效果。
溫馨提示:完成任務(wù)后，請(qǐng)驗(yàn)證是否與實(shí)踐描述效果一致，如一致，恭喜您，你已經(jīng)掌握此技能，否則，請(qǐng)重復(fù)學(xué)習(xí)此節(jié)內(nèi)容。
任務(wù)
請(qǐng)編寫mark層的onmousemove事件的響應(yīng)代碼，實(shí)現(xiàn)右側(cè)局部放大圖片跟隨鼠標(biāo)同步定位。
提示：
回顧一下課程所學(xué)的內(nèi)容，開通腦筋：
1.需要捕獲事件。
2.獲取鼠標(biāo)位置。
3.通過(guò)計(jì)算設(shè)置右側(cè)圖片的位置，并要注意鼠標(biāo)的邊界問(wèn)題。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大鏡</title>
<style>
* {
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>
<script>
//頁(yè)面加載完畢后執(zhí)行
window.onload = function () {
varobjDemo = document.getElementById("demo");
varobjSmallBox = document.getElementById("small-box");
varobjMark = document.getElementById("mark");
varobjFloatBox = document.getElementById("float-box");
varobjBigBox = document.getElementById("big-box");
varobjBigBoxImage = objBigBox.getElementsByTagName("img")[0];
objMark.onmouseover = function () {
objFloatBox.style.display = "block";
objBigBox.style.display = "block";
}
objMark.onmouseout = function () {
objFloatBox.style.display = "none";
objBigBox.style.display = "none";
}
objMark.onmousemove = function (ev) {
//請(qǐng)補(bǔ)充此處鼠標(biāo)移動(dòng)時(shí)的響應(yīng)方法
}
}
</script>
</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)求
