您的位置：首页 > Web前端 > JavaScript

放大镜(商品浏览)

2016-06-27 16:29 495 查看

一般大家在浏览商城的时候都会有放大镜,下面是一个简单的样例分享给大家

图例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style type="text/css">
*{margin:0px;padding:0px;list-style:none;}
#small{width:400px;height:400px;position:absolute;left:200px;top:20px;overflow:hidden;}
#big{width:400px;height:400px;position:absolute;left:650px;top:20px;overflow:hidden;display:none;}
#move{width:100px;height:100px;position:absolute;background:url(./bg.png);left:0px;top:0px;visibility:hidden/*display:none;*/}
ul{width:300px;height:100px;position:absolute;top:450px;left:200px;}
li{width:100px;height:100px;float:left;margin-right:10px;border:dashed 1px #444;padding:10px;}
</style>
</head>
<body style="height:4000px;">
<div id="small">
<img src="Meinv014.jpg" alt="" width="100%" id="sImg">
<div id="move"></div>
</div>

<div id="big">
<img src="Meinv014.jpg" alt="" style="position:absolute;" id="bImg">
</div>

<ul id="imgs">
<li><img src="2.jpg" alt="" width="100%"></li>
<li><img src="3.jpg" alt="" width="100%"></li>
</ul>
<script type="text/javascript">
//获取元素
var small = document.getElementById('small');
var big = document.getElementById('big');
var move = document.getElementById('move');
var bImg = document.getElementById('bImg');
var sImg = document.getElementById('sImg');

//给小图div绑定鼠标移动事件
small.onmousemove = function(e){
//修改鼠标的样式
small.style.cursor = "move";
big.style.display ="block";
move.style.visibility = "visible";

//获取鼠标的位置
var x = e.pageX;//获取当前鼠标相对于文档的偏移量
var y = e.pageY;

//获取小div距离左侧的偏移量
var _l = small.offsetLeft;
var _t = small.offsetTop;

//获取移动div宽度的一般
var _w = move.offsetWidth/2;
var _h = move.offsetHeight/2;

//计算新的left值
var newL = x-_l-_w;
var newT = y-_t-_h;

//检测越界
if(newL <= 0){
newL = 0;
}
var maxLeft = small.offsetWidth - move.offsetWidth;
if(newL >= maxLeft){
newL = maxLeft;
}

if(newT <= 0){
newT = 0;
}
var maxTop = small.offsetHeight - move.offsetHeight;
if(newT >= maxTop){
newT = maxTop;
}

//设置css
move.style.left = newL + 'px';
move.style.top = newT + 'px';

//计算移动的比例
var sW = small.offsetWidth;
var mL = newL;

var p = mL/sW;
//Y轴的比例
var yP = newT/small.offsetHeight;

//获取右侧大图的宽度
var bW = bImg.offsetWidth;
var bH = bImg.offsetHeight;

//计算右侧图片移动的距离
var nL = bW*p;
var nT = bH*yP;

//设置css样式
bImg.style.left = -nL+'px';
bImg.style.top = -nT + 'px';

//计算移动div的宽度和高度
var Bp = big.offsetWidth/bImg.offsetWidth;
var sW = small.offsetWidth;

var Bpp = big.offsetHeight/bImg.offsetHeight;
var sH = small.offsetHeight;

//计算新的宽度值
var mW = sW*Bp;
var mH = sH*Bpp;

move.style.width = mW + 'px';
move.style.height = mH + 'px';
}

//绑定鼠标离开事件
small.onmouseout = function(){
//visibility
move.style.visibility = "hidden";
big.style.display = "none";
}

//获取ul
var ul = document.getElementById('imgs');
//获取ul中的img
var is = ul.getElementsByTagName('img');// document.getElementsByTagName
for(var i=0;i<is.length;i++){
is[i].onclick = function(){
//获取当前点击图片的src属性
var src = this.getAttribute('src');
//设置src
bImg.src = src;
sImg.src = src;
}
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js放大镜

相关文章推荐

新的分享

章节导航