4

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

http://www.joeltinley.com/上的网页显示了我想要完成的任务。然而，这个人正在使用 Flash，而我想要一个基于 HTML、CSS 和 Javascript 的解决方案。

有一个通用的解决方案吗？也许是一些 jQuery 魔法？还有其他提示吗？


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

4

3 回答 3

7

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

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上的工作示例

于 2012-11-30T16:56:46.800 回答
5

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

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

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

于 2012-11-30T15:31:22.577 回答
-1

我见过很多 jQuery 插件可以做到这一点.. 自己编写代码不是一件简单的事情... 搜索 google jQuery slider sliders.. 你会发现一堆普通的滑块。在某个地方，您可以通过移动鼠标来探索图像。

于 2016-09-02T19:48:20.610 回答