放大鏡特效疑惑
標(biāo)簽：
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";
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦