Question

我想知道是否有办法通过移动鼠标来探索div的内容？例如在overflow:hidden中的 500px * 500px div内容中具有 1000px * 1000px 图片，并且能够通过放置光标看到图片的其余部分在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

为包裹图像的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'
    });
});

通过移动鼠标来探索div内容

4 个答案: