0

CSSを使用して、次のことを行う画像ギャラリーを作成したことがあります。

  1. サムネイルギャラリーを作成しました
  2. 1x1 ピクセル画像が配置された div を作成しました
  3. サムネイルにマウスオーバーすると、これらの 1x1 ピクセルの画像が div のサイズに合わせて拡大され、高さは長さに比例します。
  4. これまでの私のコード:

php:

echo '<div id="thumbnails">';
$files = glob("11-09-2012/*.*");
for ($i=1; $i<count($files); $i++)
{       //creating thumbnails
   $num = $files[$i];
   echo '<img src="'.$num.'" height="50px" id="thumb'.$files[$i].'"></img>';
};


   echo '</div><div id="gallery">';
   for ($i=1; $i<count($files); $i++)
{       //creating 1x1
   $num = $files[$i];
   echo '<img STYLE="position:absolute" src="'.$num.'" height="1px" width="1px" id="img'.$files[$i].'"></img>';
};
echo '</div>';

CSS:

#gallery {
margin: 0 auto; 
border-style: solid;
border-width: 3px;
border-color: #fff;
width: 800px;  
height: 600px;  
}

どこに行けばいいのかわかりません - どんな助けでも大歓迎です - これを行う別の方法も同様です。

宜しくお願いします - Jesper

4

2 に答える 2

2

素朴なプログラマーは、jQuery を推奨したり、個々の画像にイベントを添付したりするかもしれません。これが大きな男の子のやり方です：

(function() {
  var box = document.getElementById('thumbnails'),
      handler = function(e) {
        e = e||window.event;
        var tar = e.target || e.srcElement,
            type = e.type, id = tar.id, m, img;
        if( (m=id.match(/^thumb(.*)$/)) && (img=document.getElementById('img'+m[1]))) {
          img.style.height = img.style.width = type == "mouseover" ? "auto" : "1px";
        }
      };
  if( typeof box.attachEvent != "undefined") {
    box.attachEvent('onmouseover',handler);
    box.attachEvent('onmouseout',handler);
  }
  else {
    box.addEventListener('mouseover',handler);
    box.addEventListener('mouseout',handler);
  }
})();

HTML に加える必要がある唯一の変更はwidth="1px" height="1px"、画像から を削除し、代わりにwidth:1px;height:1px;max-width:800px;max-height:600px;画像のスタイルに追加することです。これは、CSS ファイルで行う方が適切です。

#gallery>img {
    position: absolute;
    left: 0; top: 0;
    width: 1px; height: 1px;
    max-width: 800px;
    max-height: 600px;
}
于 2012-09-11T14:10:24.627 に答える
0

http://jsfiddle.net/yDUMT/

jsfiddle は、サムネイルがマウスオーバーされたときに onMouseOver を javascript 関数で使用して 1px を拡大し、onMouseOut を javascript 関数で使用して、マウスがサムネイルから移動したときに拡大された 1px の画像を縮小することを示しています。

于 2012-09-11T14:25:57.450 に答える