课程 \
用JS实现放大镜特效
6-1 编程挑战
<!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>
2019-04-21
查看完整代码
4-3 编程练习
<!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>
//页面加载完毕后执行
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) {
//请补充此处鼠标移动时的响应方法
}
}
</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>
2019-04-21
查看完整代码