【每日一学】模仿淘宝图片放大效果。
原理：我们需要两张图片,一张大图和一张小图。默认大图不显示,当鼠标在小图上时,大图展示出来。然后跟随鼠标在小图上移动距离,来设定大图的移动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 1000px;
}
.box{
width: 400px;
height: 400px;
position: relative;
margin: 100px 0 0 50px;
}
.small-box{
width: 100%;
height: 100%;
border: 2px solid #000;
position: relative;
}
.small-box>img{
width: 400px;
height: 400px;
}
.box .small-slider{
width: 150px;
height: 150px;
background-color: goldenrod;
opacity: .6;
position: absolute;
/*默认隐藏*/
display: none;
left: 0px;
top: 0px;
}
.box .show-Box{
width: 600px;
height: 600px;
border: 2px solid #000;
position: absolute;
overflow: hidden;
/*默认隐藏*/
display: none;
left: 410px;
top:0px;
}
.box .show-Box img{
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<div id="smallBox">
<img src="https://img14.360buyimg.com/n1/s450x450_jfs/t1435/291/1093842322/97500/de4725cb/55bb420fNfb17575e.jpg" alt="">
<span></span>
</div>
<div id="showBox">
<img src="https://img14.360buyimg.com/n0/jfs/t1435/291/1093842322/97500/de4725cb/55bb420fNfb17575e.jpg" alt="">
</div>
</div>
<script>
window.onload = function () {
var fatherBox = document.getElementById('box');
var smallBox = document.getElementById('smallBox');//获得小盒子
var smallSlider = smallBox.children[1];//获得小黄块
var showBox = document.getElementById('showBox');//获得展示块
var showBoxImg = showBox.children[0];
var smallBoxLeft = smallBox.offsetParent.offsetLeft;//获得小盒子左边间距
var smallBoxTop = smallBox.offsetParent.offsetTop; //获得小盒子上边间距
//触摸小盒子
smallBox.onmouseover = function () {
/*1.首先要将smallSlider showBox显示出来*/
showBox.style.display = 'block';
smallSlider.style.display = 'block'
//滑块所走最大横向距离x
var maxLeftX = smallBox.offsetWidth-smallSlider.offsetWidth-4//4为边框;
//滑块所走最大纵向距离y
var maxTopY = smallBox.offsetHeight-smallSlider.offsetHeight-4//同上;
//大图片所走距离x
var showImgMaxLeft = showBox.offsetWidth-showBoxImg.offsetWidth;
//大图片所走距离y
var showImgMaxTop = showBox.offsetHeight-showBoxImg.offsetHeight;
var leftRatio = maxLeftX/showImgMaxLeft;//横向(X)距离比例
var topRatio = maxTopY/showImgMaxTop;//纵向(Y)距离比例
//当鼠标在小盒子上移动的时候
smallBox.onmousemove = function (event) {
var event = event || window.event;
var leftX = event.pageX-smallBoxLeft-smallSlider.offsetWidth * 0.5;
var topY = event.pageY-smallBoxTop-smallSlider.offsetHeight * 0.5;
if (leftX<0){
leftX = 0;
} else if (leftX >= maxLeftX ){
leftX = maxLeftX;
}
if (topY<0){
topY = 0;
}else if (topY >= maxTopY){
topY = maxTopY;
}
smallSlider.style.left = leftX + 'px';
smallSlider.style.top = topY + 'px';
showBoxImg.style.left = leftX/leftRatio+'px';
showBoxImg.style.top = topY/topRatio+'px';
return false;
}
//摸完了后
smallBox.onmouseout = function () {
/*2.移出鼠标后,隐藏smallSlider showBox*/
smallSlider.style.display = 'none';
showBox.style.display = 'none';
}
return false;
}
}
</script>
</body>
</html>贴到页面中试试看吧。
网友评论文明上网理性发言 已有0人参与
发表评论: