1
私はthis questionで見つかったスクリプトを採用しようとしていますが、画像を一部のコンテンツに変更することは思ったより難しいようです。マウス移動時にdivを移動
スクリプトは非常に簡単で、mousemove
上holder
内部#content
のdiv行動を起こす必要があります。
// written by Roko C. Buljan
var $mmGal = $('#holder'),
$mmImg = $('#content'),
damp = 10, // higher number = smoother response
X = 0, Y = 0,
mX = 0, mY = 0,
wDiff, hDiff,
zeno;
function motion(){
zeno = setInterval(function(){ // Zeno's paradox "catching delay"
X += (mX-X)/damp;
Y += (mY-Y)/damp;
$mmGal.scrollLeft(X*wDiff).scrollTop(Y*hDiff);
}, 26);
}
// Get image size after it's loaded and run our fn
$mmImg.one('load', function() {
wDiff = (this.width/$mmGal.width())-1,
hDiff = (this.height/$mmGal.height())-1;
}).each(function() {
if(this.complete) $(this).load();
});
$mmGal.mousemove(function(e) {
mX = e.pageX-this.offsetLeft;
mY = e.pageY-this.offsetTop;
}).hover(function(e){
return e.type=='mouseenter'? motion() : setTimeout(function(){
clearInterval(zeno);
},1200); // clear if not used
});
しないのはなぜdiv要素#content
移動(テキストおよび画像)?
あなたはコンテンツが移動したり、画像のみにしますか? – xxCodexx
divと#contentの両方を移動したいので、textとimage :) –