-
offsetLeft與style.left對比查看全部
-
所需屬性及其內(nèi)容查看全部
-
所需要的鼠標事件查看全部
-
制作放大鏡所需要的而技術點查看全部
-
放大鏡實現(xiàn)的關鍵原理查看全部
-
分析====>設計====>實現(xiàn)查看全部
-
offsetLeft style.left查看全部
-
offsetLeft查看全部
-
長度查看全部
-
核心計算查看全部
-
offsetleft與style.left對比查看全部
-
jquery 計算left ，top 的時候不用加上smallBox的offset.left,offset.top ,why?查看全部
-
offsetleft和style.left區(qū)別查看全部
-
放大鏡特效： 解決IE兼容性問題：當鼠標移到放大鏡上時，觸發(fā)了onmousemove事件，但對于IE來說，同時也觸發(fā)了小圖片的onmouseout事件，所以會造成閃爍 1、定義_event = e || window.event 解決IE6下捕獲事件的方式問題； 2、在放大鏡層和小圖片層之間加一個遮罩層，設置遮罩層寬、高等同于小圖片層，背景白色并100%透明。從而使放大鏡層在遮罩層上移動，解決IE6下不斷觸發(fā)事件造成的圖片閃爍問題。查看全部
-
放大鏡特效實現(xiàn)： objMark.onmousemove = function (ev){ var _event = ev || window.event; //兼容多個瀏覽器的event參數(shù)模式 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
提交
取消