js实现图片放大特效

HTML代码如下：

<div class="box"><div class="pic1">                   <!-- 小图盒子 --><img src="./img/456.jpg" alt=""><div class="info hide"></div>           <!-- 透明滑块 --></div><div id="pic2" class="hide">                <!-- 大图盒子 --><img src="./img/456.jpg" alt=""></div></div>

CSS代码如下：

.box{width: 400px ;height: 400px;position: relative;
}
.pic1 img{width: 100%;position: absolute;                 /* 相对于父级绝对定位 */
}
.info{width: 50%;height: 50%;position: absolute;                    /* 相对于父级绝对定位 */opacity: .2;                           /* 滑块透明度 */background-color: #9ACD32;}#pic2{width: 500px;height: 500px;left: 100%;                           /* 让出小盒子的宽度 */position: absolute;overflow: hidden;
}
.hide{visibility: hidden;        /* 隐藏滑块和大盒子 */
}
#pic2 img{width: 800px;position: absolute;                        /* 相对于父级绝对定位 */}

JS代码如下：

/* 获取各div的值 */
var pic1 = document.querySelector('.pic1');
var info = document.querySelector('.info');
var pic2 = document.getElementById('pic2');/* 设置点击事件 */
function toggleClass(){info.classList.toggle('hide');      pic2.classList.toggle('hide');
}
pic1.onmouseenter = toggleClass;
pic1.onmouseleave = toggleClass;
/* 设置鼠标移入移出时滑块和大图盒子的出现和隐藏 */pic1.onmousemove = function(e){/* 计算滑块的位置 *//* clientX指鼠标的位置,offsetLeft指box与屏幕边框的距离,offsetWidth指滑块的宽度 */var x = e.clientX - pic1.offsetLeft - info.offsetWidth/2;var y = e.clientY - pic1.offsetTop - info.offsetHeight/2;/* 控制滑块的移动位置 */if(x<=0){x = 0;}else if(x > info.offsetWidth){x = info.offsetWidth;}if(y<=0){y = 0;}else if(y > info.offsetHeight){y = info.offsetHeight;}info.style.left = x + "px";info.style.top = y + "px";/* 设置大图片与小图片的比例 *//* 滑块的偏移量 */var infomove = info.offsetWidth;    /* 因为前面设置滑块宽度为小图盒子的一半 *//* 大图的偏移量 */var pic2move = pic2.children[0].offsetWidth - pic2.offsetWidth;  /* 大图宽度-大图片盒子宽度 */var bili = pic2move/infomove;            /* 大图与滑块移动方向相反,所以要加负号 */var imgX = -x * bili; var imgY = -y * bili;pic2.children[0].style.left = imgX + 'px'; /* pic2中第一个孩子元素即指img */pic2.children[0].style.top = imgY + 'px';}

如有问题欢迎讨论，请私信谢谢。

js实现图片放大特效相关推荐

用JS写出JS事件中京东图片放大特效
图片放大特效准备两张相同的图片,小图和大图. 小图显示在商品的展示区域. 大图用于鼠标在小图上移动时,按比例的显示大图中的对应区域. 编写HTML页面,展示小图.隐藏鼠标的遮罩及大图. 当鼠标在小图 ...
js第8章事件案例：获取触发事件的元素，阻止事件冒泡和默认行为的实现、缓动的小球、图片放大特效、按Enter键切换
目录 1.获取触发事件的元素,阻止事件冒泡和默认行为的实现. (1)获取触发事件的元素 (2)阻止事件冒泡 (3)阻止事件默认行为 2.缓动的小球,实现的原理是通过定时器连续地修改当前DOM元素的某个 ...
鼠标悬浮图片放大特效
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
VUE 图片放大特效
源码: <!DOCTYPE html> <html><head><meta charset="utf-8" /><title& ...
html如何控制图片自动放缩,如何用js控制图片放大缩小
js控制图片放大缩小的效果,可以通过JavaScript的width和height属性来实现.其属性可以实现按比例放大和缩小图像尺寸的功能. 在前面的文章中,也为大家介绍了JS获取图片当前宽高和JS获 ...
91 案例——图片放大特效
文章目录 1.HTML页面 2.显示与隐藏"遮罩"和"局部放大图" 3.遮罩的移动 4.限定遮罩的移动范围 5.按照比例移动大图在网站中,经常可以看到商品详情 ...
仿苹果菜单的图片放大特效实现
我想用过mac的人都应该见过它的菜单特效,就是鼠标移到适当的位置的时候,菜单图片会有一个放大的效果,今天我就模仿这个效果来做一个有关图片的特效,最终的实现效果如下: 它的HTML结构如下: <d ...
手机端点击图片放大特效-PhotoSwipe插件
PhotoSwipe插件官方网站 http://www.photoswipe.com/ PhotoSwipe插件能实现手机端点击图片全屏放大再双击图片放大等功能但有一点不太好的是图片放大后再单击不 ...
js hover图片放大不遮挡_CSS3+JS 实现放大镜
注意: 看懂本文需要: 懂中文 :) 学习过 JavaScript 和 css 代码较长,框框可左右滑动哦您的观看和点赞是对本公众号最大力的支持 ~~ 原文链接: https://blog.csdn ...

js实现图片放大特效

js实现图片放大特效相关推荐

最新文章

热门文章