Question

我的图像比实际屏幕尺寸大得多。我想要一个网页，以原始大小显示其中一个图像，因此只显示实际图像的一部分。图像的可见区域应根据鼠标移动滚动。

http://www.joeltinley.com/的网页显示了我想要完成的工作。但是，这家伙正在使用Flash，而我希望有一个基于HTML，CSS和Javascript的解决方案。

这是否有共同的解决方案？也许一些jQuery魔术？还有其他提示吗？

我一直在网上搜索，但到目前为止我找不到令人满意的解决方案。

Answer 1

我总是对做这样的事情感兴趣，所以只是为了好玩这里是原型，它可能不是那么完美，但它给出了整个想法，你可能会在以后的麻烦中战斗。

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="imgHolder">
  </div>
</body>
</html>

CSS

.imgHolder {
background: url(http://mickricereto.files.wordpress.com/2012/09/3_siematic-s3-graphite-grey_lotus-white.jpg) no-repeat 50% 50%;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}

和jQuery的一部分，尽管你可以在任何库甚至核心JS中进行它

(function(){
  var 
      div = $('.imgHolder'),
      divX = div.width(),
      divY = div.height(),
      backgroundX, backgroundY, backgroundPos;


  // hint
  //  mouse on the right background position for x img = 100%
  //  mouse on the left background position for x img = 0
  //  center background position for x img = 50%

  //  mouse on the top background position for y img = 0
  //  mouse on the bottom background position for y img = 100%
  //  center background position for y img = 50%

  // now if
  //  divX       = 100%
  //  ev.clientX = x%
  //  divY       = 100%
  //  ev.clientY = y%
  // is what we need

  $(div).mousemove(function(ev){

    backgroundX = 1/divX*ev.clientX*100;
    backgroundY = 1/divY*ev.clientY*100;
    backgroundPos = backgroundX + '%' + ' ' + backgroundY + '%';
    div.css('background-position', backgroundPos);

  });
})();

jsbin

上的工作示例

Answer 2

有一些jQuery插件可以帮助实现类似的效果。但是你需要调整它们以满足你的需求..

http://johnpolacek.github.com/scrolldeck.js/

http://stephband.info/jparallax/index.html

Answer 3

我已经看过许多jQuery插件可以做到这一点..自己编写代码并不是一件简单的事情...搜索谷歌jQuery滑块滑块...你会找到一堆普通的滑块。在某处可以通过移动鼠标来探索图像。

如何根据鼠标移动使HTML <img/>滚动？

3 个答案: