通过移动鼠标探索div内容 [英] explore div content by moving mouse

问题描述

我想知道是否有方法通过移动鼠标来探索div的内容？例如在 overflow：hidden 中的 500px * 500px div内容中包含 1000px * 1000px 通过将光标放在div的右下角来查看图片的其余部分。

I'd like to know if there's a way to explore the content of a div by moving mouse? like for example having a 1000px*1000px pic inside a 500px*500px div content in overflow:hidden and being able to see the rest of the picture by putting the cursor in the right-bottom side of the div.

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

And if there's a way how should I proceed ?

推荐答案

LIVE DEMO

一些不错而流畅的东西

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

CSS：

CSS:

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

jQ：

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

这篇关于通过移动鼠标探索div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！