js 基础 ---实现放大镜的效果
2016-07-19 00:08
337 查看
js 基础 ---实现放大镜的效果
能利用原生的js是非常重要的，所以对于仿照电商的商品放大图做出了这个放大镜
的效果。在这个例子中，放大镜跟随着鼠标的移动而移动，大盒的图片移动方向与小盒子图片的移动方向是相反的，它们的放缩比例是相同的,具体的实现案例如下：
第一种方法：
第二种方法是：运用children属性获取孩子
能利用原生的js是非常重要的，所以对于仿照电商的商品放大图做出了这个放大镜
的效果。在这个例子中，放大镜跟随着鼠标的移动而移动，大盒的图片移动方向与小盒子图片的移动方向是相反的，它们的放缩比例是相同的,具体的实现案例如下：
第一种方法：
<!DOCTYPE html>
<html>
<head>
<title>放大镜效果</title>
<meta charset="utf-8">
<style type="text/css">
body{position: relative;}
*{margin: 0;padding:0;}
#Box{
height:300px;
width:300px;
position: relative;
border:1px solid gray;
}
#bigBox{
height:300px;
width:300px;
position: absolute;
top:0;
left:310px;
overflow: hidden;
display:none;
border: 1px solid gray;
}
#Box img{
height:300px;
width:300px;
}
#lay{
background:#fff;
border:1px solid gray;
position: absolute;
top:0;
left: 0;
opacity:0.5;
display:none;
filter:alpha(opacity=50);
}
</style>
<script type="text/javascript">
window.onload = function(){
var Box = document.getElementById("Box");
var bigBox = document.getElementById("bigBox");
var bigbox = getChildNodes(bigBox)[0];
var lay = document.getElementById("lay");
//鼠标移入时，将放大镜和bigBox显示出来
Box.onmouseover = function(){
lay.style.display = "block";
bigBox.style.display = "block";
}
//鼠标移出时，将放大镜和bigBox隐藏起来
Box.onmouseout = function(){
lay.style.display = "none";
bigBox.style.display = "none";
}
Box.onmousemove = function(e){
e = e || event;//事件源的兼容问题
var scale = 4;//图片的放缩比例
//将鼠标放到放大镜的中间
var x = e.clientX - lay.offsetWidth/2;
var y = e.clientY - lay.offsetHeight/2;
//将放大镜的宽高与盒子的宽高结合起来按比例放缩
lay.style.width = parseInt(Box.offsetWidth / scale )+ "px";
lay.style.height = parseInt(Box.offsetHeight / scale)+ "px";
//设置大盒子的宽高
bigbox.style.width = Box.offsetWidth * scale + "px";
bigbox.style.height = Box.offsetHeight * scale + "px";
if(x < 0){
x = 0;//左边界的判断，当超出时将x置为0;
}
//右边界的判断，当超出时将x置为Box的宽度减去放大镜的宽度;
if( x >= Box.offsetWidth - lay.offsetWidth){
x = Box.offsetWidth - lay.offsetWidth;
}
//下边界的判断，当超出时将y置为Box的高度减去放大镜的高度;
if( y >= Box.offsetHeight - lay.offsetHeight){
y = Box.offsetHeight - lay.offsetHeight;
}
if(y < 0){
y = 0;//上边界的判断，当超出时将y置为0;
}
lay.style.left = x + "px";
lay.style.top = y + "px";
//同比例放缩，大的盒子图片的放缩比例，当小盒子向右移动的时候，大盒子向左移动同等的比例的宽高，方向是相反的
var left = lay.offsetLeft * scale;
var top = lay.offsetTop * scale ;
bigbox.style.marginLeft =(left * (-1)) + "px";
bigbox.style.marginTop =(top * (-1))+ "px";
}
}
//获取孩子的节点
function getChildNodes(element){
var arr = [];
var eList = element.childNodes;
for(var i = 0;i < eList.length;i++){
if(eList[i].nodeType == 1){//过滤空白节点
arr.push(eList[i]);
}
}
return arr;
}
</script>
</head>
<body>
<div id="Box">
<img src="1.jpg"/>
<span id="lay"></span>
</div>
<div id="bigBox">
<img src="1.jpg" />
</div>
</body>
</html>第二种方法是：运用children属性获取孩子
<!DOCTYPE html>
<html>
<head>
<title>放大镜效果</title>
<meta charset="utf-8">
<style type="text/css">
body{position: relative;}
*{margin: 0;padding:0;}
#Box{
height:300px;
width:300px;
position: relative;
border:1px solid gray;
}
#bigBox{
height:300px;
width:300px;
position: absolute;
top:0;
left:310px;
overflow: hidden;
display:none;
border: 1px solid gray;
}
#Box img{
height:300px;
width:300px;
}
#lay{
background:#fff;
border:1px solid gray;
position: absolute;
top:0;
left: 0;
opacity:0.5;
display:none;
filter:alpha(opacity=50);
}
</style>
<script type="text/javascript">
window.onload = function(){
var Box = document.getElementById("Box");
var bigBox = document.getElementById("bigBox");
var bigbox = bigBox.children[0];
var lay = document.getElementById("lay");
//鼠标移入时，将放大镜和bigBox显示出来
Box.onmouseover = function(){
lay.style.display = "block";
bigBox.style.display = "block";
}
//鼠标移出时，将放大镜和bigBox隐藏起来
Box.onmouseout = function(){
lay.style.display = "none";
bigBox.style.display = "none";
}
Box.onmousemove = function(e){
e = e || event;//事件源的兼容问题
var scale = 4;//图片的放缩比例
//将鼠标放到放大镜的中间
var x = e.clientX - lay.offsetWidth/2;
var y = e.clientY - lay.offsetHeight/2;
//将放大镜的宽高与盒子的宽高结合起来按比例放缩
lay.style.width = parseInt(Box.offsetWidth / scale )+ "px";
lay.style.height = parseInt(Box.offsetHeight / scale)+ "px";
//设置大盒子的宽高
bigbox.style.width = Box.offsetWidth * scale + "px";
bigbox.style.height = Box.offsetHeight * scale + "px";
if(x < 0){
x = 0;//左边界的判断，当超出时将x置为0;
}
//右边界的判断，当超出时将x置为Box的宽度减去放大镜的宽度;
if( x >= Box.offsetWidth - lay.offsetWidth){
x = Box.offsetWidth - lay.offsetWidth;
}
//下边界的判断，当超出时将y置为Box的高度减去放大镜的高度;
if( y >= Box.offsetHeight - lay.offsetHeight){
y = Box.offsetHeight - lay.offsetHeight;
}
if(y < 0){
y = 0;//上边界的判断，当超出时将y置为0;
}
lay.style.left = x + "px";
lay.style.top = y + "px";
//同比例放缩，大的盒子图片的放缩比例，当小盒子向右移动的时候，大盒子向左移动同等的比例的宽高，方向是相反的
var left = lay.offsetLeft * scale;
var top = lay.offsetTop * scale ;
bigbox.style.marginLeft =(left * (-1)) + "px";
bigbox.style.marginTop =(top * (-1))+ "px";
}
}
</script>
</head>
<body>
<div id="Box">
<img src="1.jpg"/>
<span id="lay"></span>
</div>
<div id="bigBox">
<img src="1.jpg" />
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 5个常见可用性错误和解决方案
- 最后一次说说闭包
- Ajax
- js数组实现图片轮播
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法