javascript放大镜效果
Posted hushengbin789
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript放大镜效果相关的知识，希望对你有一定的参考价值。
首先我们先设想一下放大镜效果
1、当鼠标进入小盒子的时候，把大图片显示出来
2、当指定移动区域的时候，显示当前放大区域（放大效果）
3、鼠标移除我们让它消失
一、实现页面布局HTML+CSS
二、实现放大镜的功能js
下面来看代码，让你思路变清晰
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>放大镜</title>
<style>
#box{
width: 350px;
height: 350px;
margin: 100px 0 0 100px;
position: relative;
}
#small_box{
width:100%;
height: 100%;
border:1px solid #ccc;
position: relative;
}
#mask{
height: 100px;
width: 100px;
left: 0px;
top: 0px;
position: absolute;
display: none;
cursor: move;
}
#big_box{
height: 600px;
width: 600px;
border: 1px solid #ccc;
overflow: hidden;
top:0px;
left: 360px;
position: absolute;
display: none;
}
</style>
</head>
<body>
<div id="box">
<div id="small_box">
<img src="img/pic01.jpg" />
<span id="mask"></span>
</div>
<div id="big_box">
<img src="img/pic001.jpg" style="position: absolute;"/>
</div>
</div>
<script>
window.onload = function(){
//1.获取需要的元素
var box = document.getElementById("box");
var small_box = document.getElementById("small_box");
var big_box = document.getElementById("big_box");