分类
商品
- 商品
- 店铺
- 资讯
对于经常网购的网友们，现在很多网站都有放大镜功能，每当你看到商品的时候，鼠标移动到图片时，就会有放大效果，知道是什么原理吗？小猿圈web前台就给你讲解JavaScript放大镜效果。
逻辑分析：
1. 有2个图片（大图、小图），图片之间都有很好尺寸比例
2. 鼠标移入小图这里事件采用onmousemove事件，移入后显示阴影部分以及右侧大图
3. 当鼠标移出则隐藏阴影部分以及右侧大图
4. 鼠标在小图移动，阴影部分跟随采用clientX和clientY的位移
5. 鼠标在小图部分左边移动，大图向右，恰好相反并且*其比例尺寸就是大图要移动的位置
代码实现：
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
</head>
<style>
? ? *{margin:0;padding: 0}
? ? #box{
? ? ? ? width:1200px;
? ? ? ? height: 700px;
? ? ? ? border:1px solid #ccc;
? ? ? ? margin:150px;
? ? }
? ? #min{
? ? ? ? float:left;
? ? ? ? width:400px;
? ? ? ? height: 400px;
? ? ? ? position: relative;
? ? }
? ? b{
? ? ? ? position: absolute;
? ? ? ? left:0;
? ? ? ? top:0;
? ? ? ? width:200px;
? ? ? ? height: 200px;
? ? ? ? background: blue;
? ? ? ? opacity: 0.5;
? ? ? ? display: none;
? ? }
? ? #max{
? ? ? ? float:right;
? ? ? ? width:400px;
? ? ? ? height: 400px;
? ? ? ? overflow: hidden;
? ? ? ? display: none;
? ? ? ? position: relative;
? ? }
? ? #imgs{
? ? ? ? position: absolute;
? ? ? ? left:0;
? ? ? ? top:0;
? ? }
</style>
<body style="height: 2000px">
<div id="box">
? ? <div id="min"><img src="imgs/min.jpg" alt=""><b></b></div>
? ? <div id="max"><img src="imgs/max.jpg" alt="" id="imgs"></div>
</div>
<script type="text/javascript">
//1》鼠标移入到min这个盒子中，显示出来 放大图片的盒子和小阴影部分
//2》阴影跟随鼠标移动====》
var min = document.getElementById("min"),
? ? max = document.getElementById("max"),
? ? b = document.getElementsByTagName("b")[0],
? ? imgs = document.getElementById("imgs");
min.onmousemove = function(e){
? ? b.style.display = "block";
? ? max.style.display = "block";
? ? var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
? ? var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
? ? var x = e.clientX+scrollLeft-min.offsetLeft- b.offsetWidth/2;
? ? var y = e.clientY+scrollTop-min.offsetTop - b.offsetHeight/2;
? ? if(x<0){
? ? ? ? x=0;
? ? }else if(x>min.offsetWidth-b.offsetWidth){
? ? ? ? x=min.offsetWidth-b.offsetWidth;
? ? }
? ? if(y<0){
? ? ? ? y=0;
? ? }else if(y>min.offsetHeight-b.offsetHeight){
? ? ? y=min.offsetHeight-b.offsetHeight;
? ? }
? ? b.style.left =x+"px";
? ? b.style.top =y+"px";
? ? imgs.style.left = -2*x+"px";
? ? imgs.style.top = -2*y+"px";
}
min.onmouseout = function(){
? ? b.style.display = "none";
? ? max.style.display = "none";
}
</script>
</body>
</html>
上面就是小猿圈web前台讲师讲的JavaScript放大镜效果的代码了，还在等什么快去运行一下去吧，假如遇到问题可以找小猿圈web前台讲师去解答，假如你想学习前台开发web前台自学②群：738735873，小猿圈还是很不错的，有需要的可以直接去看看的。
送码官方微信
手机访问领取大礼包