mark 是純屬多余的。
$(function(){
var $demo = $('#demo');
var $objSmallBox = $('#small-box');
var $objFloatBox = $('#float-box');
var $objBigBox = $('#big-box');
var $objBigBoxImage = $objBigBox.find('img');
$objSmallBox.on('mouseover',function () {
$objFloatBox.show();
$objBigBox.show();
}).on('mouseout',function(){
$objFloatBox.hide();
$objBigBox.hide();
}).on('mousemove',function(event){
onmousemove(event)
})
function onmousemove (ev) {
var d_offset = $demo.offset();
var s_offset = $objSmallBox.offset();
var s_width = $objSmallBox.width();
var s_height = $objSmallBox.height();
var f_width = $objFloatBox.width();
var f_height = $objFloatBox.height();
var _event = ev || window.event; //兼容多個(gè)瀏覽器的event參數(shù)模式
var left = _event.clientX - d_offset.left - s_offset.left - f_width / 2;
var top = _event.clientY - d_offset.top - s_offset.top - f_height / 2;
if (left < 0) {
left = 0;
} else if (left > (s_width - f_width)) {
left = s_width - f_width;
}
if (top < 0) {
top = 0;
} else if (top > (s_height - f_height)) {
top = $objSmallBox.height() - f_height;
}
$objFloatBox.css({
left : left + 'px',
top : top + 'px'
})
var percentX = left / (s_width - f_width);
var percentY = top / (s_height - f_height);
$objBigBoxImage.css({
left : -percentX * ($objBigBoxImage.width() - $objBigBox.width()) + "px",
top : -percentY * ($objBigBoxImage.height() - $objBigBox.height()) + "px"
})
}
})
