通过移动鼠标探索div内容

Question

我想知道是否有方法通过移动鼠标来探索div的内容？比如像1000px * 1000px图片500px * 500px div内容overflow:hidden并且能够通过将光标放在div的右下角看到图片的其余部分。

如果有办法我应该怎么做？

Answer 1

LIVE DEMO

一件好事顺畅？

<div id="mmGal"> 
    <img id="mmImg" src="image.jpg"> 
</div> 

CSS：

#mmGal{ 
    position:relative; 
    top:60px; 
    margin:0 auto; 
    width:500px; 
    height:220px; 
    overflow:hidden; 
    background:#eee; 
} 

JQ：

$(function(){ 

    var $mmGal = $('#mmGal'), 
     $mmImg = $('#mmImg'), 
     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 
    $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){ 
    // Start moving on mouseenter and stop intv. on mouseleave after 1200ms 
    return e.type=='mouseenter'? motion() : setTimeout(function(){ 
     clearInterval(zeno); 
    },1200); // clear if not used 
    }); 

}); 

http://en.wikipedia.org/wiki/Zeno%27s_paradoxes

Answer 2

给予widht和高度DIV包裹的图像

这里是DEMO

上:hover添加overflow: visible;到div

Answer 3

这几乎是你想要的。看到这个小提琴http://jsfiddle.net/sajith/RM9wK/

HTML

<div id="container"><img src="http://farm4.staticflickr.com/3668/12858161173_8daa0b7e54_b.jpg"/></div> 

CSS

#container { 
    width:300px; 
    height:300px; 
    overflow: hidden; 
} 
#container img { 
    position: relative; 
} 

的Javascript

$(function() { 
    $("#container").mousemove(function(event) { 

     var width = $("#container img").width(); 
     var height = $("#container img").height(); 
     var divWidth = $("#container").width(); 
     var divHeight = $("#container").height(); 

     var xPos = (width/divWidth - 1) * event.pageX 
     var yPos = (height/divHeight -1) * event.pageY 

     $("#container img").css('left', '-'+ xPos+'px'); 
     $("#container img").css('top', '-'+ yPos+'px'); 

    }); 
}); 

Answer 4

我会用“触发器”（热点）〜添加一些小的div元素，并设置自己的位置，只要你想，现在当鼠标进入触发一些事件....

简单的例子：jsfiddle

CSS

div.container { 
    position:relative; 
    width:100px; 
    height:100px; 
    overflow:hidden; 
} 
.trigger { 
    right:0; 
    bottom:0; 
    position:absolute; 
    z-index:2; 
    width:10px; 
    height:10px; 
    background-color:transparent; 
} 

HTML

<div class='container'> 
    <img src='http://static.adzerk.net/Advertisers/12f0cc69cd9742faa9c8ee0f7b0d210e.jpg' /> 
    <div class='trigger'></div> 
</div> 

jQuery的

$('.trigger').mouseenter(
    function(){ 
    $(this).parent('.container').css({ 
     'width':'220px', 
     'height':'250px' 
    }); 
    }); 
$('.container').mouseleave(
    function(){ 
    $(this).css({ 
     'width':'100px', 
     'height':'100px' 
    }); 
});