4

実際の画面サイズよりもはるかに大きな画像があります。これらの画像の 1 つを元のサイズで表示する Web ページが必要なため、実際の画像の一部のみを表示します。画像の可視領域は、マウスの動きに応じてスクロールします。

http://www.joeltinley.com/の Web ページは、私が達成したいことを示しています。ただし、この男は 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;
}

任意のライブラリまたはコア JS でも実行できますが、jQuery の一部

(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スライダースライダーを検索してください..通常のスライダーがたくさん見つかります. そこのどこかに、マウスを動かして画像を探索できるものがあります..

于 2016-09-02T19:48:20.610 に答える