-
offsetLeft与style.left对比查看全部
-
所需属性及其内容查看全部
-
所需要的鼠标事件查看全部
-
制作放大镜所需要的而技术点查看全部
-
放大镜实现的关键原理查看全部
-
分析====>设计====>实现查看全部
-
offsetLeft style.left查看全部
-
offsetLeft查看全部
-
长度查看全部
-
核心计算查看全部
-
offsetleft与style.left对比查看全部
-
jquery 计算left ，top 的时候不用加上smallBox的offset.left,offset.top ,why?查看全部
-
offsetleft和style.left区别查看全部
-
放大镜特效： 解决IE兼容性问题：当鼠标移到放大镜上时，触发了onmousemove事件，但对于IE来说，同时也触发了小图片的onmouseout事件，所以会造成闪烁 1、定义_event = e || window.event 解决IE6下捕获事件的方式问题； 2、在放大镜层和小图片层之间加一个遮罩层，设置遮罩层宽、高等同于小图片层，背景白色并100%透明。从而使放大镜层在遮罩层上移动，解决IE6下不断触发事件造成的图片闪烁问题。查看全部
-
放大镜特效实现： objMark.onmousemove = function (ev){ var _event = ev || window.event; //兼容多个浏览器的event参数模式 var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2; var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2; if (left < 0) {left = 0; } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) { left = objMark.offsetWidth - objFloatBox.offsetWidth; } if (top < 0) {top = 0; } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) { top = objMark.offsetHeight - objFloatBox.offsetHeight; } objFloatBox.style.left = left + "px"; //oSmall.offsetLeft的值是相对什么而言 objFloatBox.style.top = top + "px"; /比例公式 var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);//Top值也一样 objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px"; objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";}查看全部
举报
0/150
提交
取消