var?x,y,pos;
$('#zoom_preview').mousemove(function(e){
????x?=?Math.round(e.offsetX);
????y?=?Math.round(e.offsetY);
????document.getElementById('zoom_window').style.left?=?x?+?"px";
????document.getElementById('zoom_window').style.top?=?y?+?"px";
$('.test').html("x="+x+"?y="+y);
});<div?id="zoom_preview"?style="width:360px;height:360px;position:?relative;">
????<div?id="zoom_window"?style="width:?50%;height:?50%;background-color:lightblue;opacity:?0.6;position:?absolute;"></div>
</div>
<div?class="test"></div>這段代碼是嘗試寫放大鏡功能的,如果不設(shè)置zoom_window的定位屬性left和top的話還可以正確獲取到e返回的offset,一旦設(shè)置了zoom_window的定位屬性,頁(yè)面效果就是zoom_window不能正確被設(shè)置成e返回的offset,隨機(jī)性地會(huì)彈到錯(cuò)誤位置口頭描述不清楚,我再追加個(gè)渣圖展示一下這個(gè)鬼畜
使用js動(dòng)態(tài)設(shè)置元素定位屬性為鼠標(biāo)坐標(biāo)時(shí)元素會(huì)間歇性抖動(dòng)
幻藍(lán)風(fēng)暴
2016-10-29 10:04:22