移調鼠標的位置正是你想要的東西,很簡單。注意:
HTML:
<body>
<div id="driver" />
<div id="viewport">
<div id="tile" />
</div>
</body>
CSS:
#driver { width:100px; height:100px; }
#viewport { width:100px; height:100px; overflow:hidden; }
#tile { width:800px; height:333px; position:relative; }
JS(使用jQuery):
$(function() {
var tileSize = {
width: $('#tile').innerWidth(),
height: $('#tile').innerHeight()
};
var driverSize = {
width: $('#driver').innerWidth(),
height: $('#driver').innerHeight()
};
var viewportSize = {
width: $('#viewport').innerWidth(),
height: $('#viewport').innerHeight()
};
$('#driver').mousemove(function(e) {
var mousePos = {
left: e.pageX - $(this).offset().left,
top: e.pageY - $(this).offset().top
};
var posRatio = {
x: mousePos .left/driverSize.width,
y: mousePos .top/driverSize.height
};
var tilePos = {
left: viewportSize.width/2 - tileSize.width * posRatio.x,
top: viewportSize.height/2 - tileSize.height * posRatio.y
};
$('#tile').css(tilePos);
});
});
考慮你的頭腦,UNBOGGLED。 :d
完美!輝煌!簡單而優雅。非常感謝! – ArleyM 2012-01-11 18:31:26