-
解决问题的流程： 分析：通过现象看本质，想想特效的原理，涉及到什么，之间有什么联系，等等 设计：根据分析的结果，想想如何实现，需要用到哪些技术，要搭什么样的结构，页面长什么样子，等等 实现：编码调试。查看全部
-
放大镜特效： 解决IE兼容性问题：当鼠标移到放大镜上时，触发了onmousemove事件，但对于IE来说，同时也触发了小图片的onmouseout事件，所以会造成闪烁 1、定义_event = e || window.event 解决IE6下捕获事件的方式问题； 2、在放大镜层和小图片层之间加一个遮罩层，设置遮罩层宽、高等同于小图片层，背景白色并100%透明。从而使放大镜层在遮罩层上移动，解决IE6下不断触发事件造成的图片闪烁问题。查看全部
-
解决问题的流程： 分析：通过现象看本质，想想特效的原理，涉及到什么，之间有什么联系 设计：根据分析的结果，想想如何实现，需要用到哪些技术，要搭什么样的结构 实现：编码调试。查看全部
-
哈哈哈 还有笔记……查看全部
-
用JS实现放大镜特效： 放大镜特效的关键原理： 鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的相应位置查看全部
-
jquery 计算left ，top 的时候不用加上smallBox的offset.left,offset.top ,why?查看全部
-
放大镜特效实现： 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";}查看全部
-
offsetLeft与style.left的区别
查看全部 -
offsetWidth、offsetHeight不包含滚动条
查看全部 -
onmouseover
onmouseout
onmousemove
查看全部 -
offsetLeft与style.left对比
style.left返回的时字符串，如30px，offsetLeft返回的是数值30；
style.left是可读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left
style.left的值需要事项定义，否则取到的值为空
查看全部 -
onmouseover：会在鼠标指针移动到指定的对象上时发生
onmouseout：会在鼠标指针移出指定的对象时发生
onmousemove：会在鼠标指针移动时发生
查看全部 -
放大镜特效的原理查看全部
-
//请补充此处鼠标移动时的响应方法 var evnet=ev; var left=evnet.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2; var top=evnet.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2; if(left<0){ left=0; }else if(left>(objSmallBox.offsetWidth-objFloatBox.offsetWidth)){ left=objSmallBox.offsetWidth-objFloatBox.offsetWidth; } if(top<0){ top=0; }else if(top>(objSmallBox.offsetHeight-objFloatBox.offsetHeight)){ top=objSmallBox.offsetHeight-objFloatBox.offsetHeight; } objFloatBox.style.left=left+"px"; objFloatBox.style.top=top+"px"; var parcentX=left/(objSmallBox.offsetWidth-objFloatBox.offsetWidth); var parcentY=top/(objSmallBox.offsetHeight-objFloatBox.offsetHeight); objBigBoxImage.style.left=-parcentX*(objBigBoxImage.offsetWidth-objBigBox.offsetWidth)+"px"; objBigBoxImage.style.top=-parcentX*(objBigBoxImage.offsetHeight-objBigBox.offsetHeight)+"px"; } }查看全部
-
有意思，搞定收工，这个老师有点思路查看全部
举报
0/150
提交
取消