3

同じ画像に2つのリンクがあります。1つは、画面に表示されているサムネイルです。2番目のリンクは、サムネイルのフルサイズの画像です。

マウスを画像の上に置くと画面が黒くなり、全画面画像だけが表示されるように、これをコーディングするにはどうすればよいですか？

<div id= "1" class="thumbnail"><a href="/fullsizeimage.jpg"><img scr="/thumbnail.jpg"> </a></div>
<div id= "2" class="thumbnail"><a href="/fullsizeimage2.jpg"><img scr="/thumbnail2.jpg"> </a></div>

マウスホバーで

  1. 画面を黒くする
  2. Fullsizeimage.jpg画面中央にロード
4

3 に答える 3

4

おそらくできることは、div要素を他のすべての要素の上に配置することです（100％の幅と高さを使用position:absoluteしますz-index）。デフォルトで非表示にします。次に、画像を表示する準備ができたら、そのdivを表示して、フルサイズの画像を読み込みます。そのdivにいくつかのcssプロパティを与えるだけで画面を黒くすることができます- background-color:black。

小さい画像に大きい画像への参照が含まれるようにHTMLを変更する必要があります。このようなもの -

<div id= "smallImage" class="thumbnail"><a href="/fullsizeimage.jpg"><img scr="/thumbnail.jpg"> </a></div>

画像を実際に読み込むには、次のようにします-

$("#smallImage").on('mouseover',function(){
  var smallImage = $(this);
  var largeReference = smallImage.attr('rel');
  $("#largeImage").attr('src',largeReference);
});

その場合、大きな画像のHMTLは次のようになります-

<img id="largeImage" src="" />

ユーザーがこの大きな画像ビューを閉じることを許可することを忘れないでください。

于 2012-06-09T19:31:06.543 に答える
3

以下のCSSを使用して、画像のホバープロパティに黒のdivを表示します

`#1 Img:hover +div  {
position:fixed;
top:0px;
left:0px;
width:"set the width";
height :"set the height";
}`
于 2012-06-12T04:57:23.047 に答える
1 
function fullscreen1() {
img = document.getElementById('img1')
img.src = "/fullsizeimage.jpg"
img.style = "position:fixed;top:30px;left:30px;width:990px;box-shadow:6px 7px 5px;background-color:rgb(70,70,70);"}
 function fullscreen2() {
img = document.getElementById('img2')
img.src = "/fullsizeimage2.jpg"
img.style = "position:fixed;top:30px;left:30px;width:990px;box-shadow:6px 7px 5px;background-color:rgb(70,70,70);"}
    <div id= "1" class="thumbnail"><a href="/fullsizeimage.jpg" onmouseover="fullscreen1()"><img id="img1" scr="/thumbnail.jpg"> </a></div>
    <div id= "2" class="thumbnail"><a href="/fullsizeimage2.jpg" onmouseover="fullscreen2()"><img id="img2" scr="/thumbnail2.jpg"> </a></div>

答えの1つで提案されているようにクローズリンクを置くことを忘れないでください

于 2012-06-09T19:43:03.003 に答える