放大镜特效疑惑
标签:
JavaScript
鼠标悬浮小盒子,出现放大镜与大盒子,反之隐藏。
鼠标移动,放大镜跟随移动,大图片跟随移动。
先求出放大镜
objSmallBox.onmouseout = funtion (ev) {
var _event = ev || window.event;
//兼容多个浏览器event参数模式
left = _event.clientX — objDome.offsetLeft — objSmallBoxoffsetLeft — objFloatBox.offsetWidth/2
top = _event.clientY — objDome.offsetTop — objSmallBox.offsetTop — objFloatBox.offsetHeight/2
objFloatBox.style.left = left + "px";
objFloatBox.style.top = top + "px";
//鼠标移动放大镜跟随鼠标移动
var percentX = left / (objSmallBox.offsetWidth - objFloatBox.offsetWidth);
var percentY = top / (objSmallBox.offsetHeight - objFloatBox.offsetHeight);
① //求得在小盒子中放大镜水平垂直移动距离占小图片宽高减去放大镜宽高的百分比
objBigBoxImage.style.left = percentX * (objBigBox.offsetWidth - objBigBoxImage.offsetWidth) +"px"
objBigBoxImage.style.top = percentY * (objBigBox.offsetHeight - objBigBoxImage.offsetHeight) +"px"
//大图片水平移动距离占大盒子图片宽度– 大盒子宽度的百分比与①的水平百分比相等
//大图片垂直移动距离占大盒子图片高度– 大盒子高度的百分比与①的垂直百分比相等
//而要求大图片水平垂直移动距离,需要①的水平垂直百分比分别 * (大盒子图片宽高 –大盒子宽高)的剩余宽度与高度。
第二种百分比:大图宽/小图宽 =大图移动距离/left
D / B = ? / X
更变代码部分
var percentX = objBigBoxImage.offsetWidth / objSmallBox.offsetWidth;
var percentY = objBigBoxImage.offsetHeight / objSmallBox.offsetHeight;
objBigBox.style.left = -percentX * left + "px";
objBigBox.style.top = -percentY * top + "px";
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦