0

私は次のhtmlを持っています

   <div class="banner_area_internal">
    <div class="banner_wrapper_internal" id="overlay_field">
        <img src="images/internal_banner_holder.png" />
        <img class="internal_banner" src="images/about-banner.jpg" />
        <div id="overlay">
        <img class="internal_banner_overlay" src="images/about-banner_hover.jpg" />
        </div>
    </div>
    </div>

CSS

   .banner_area_internal {
margin-top:10px;
width:100%;
height:250px;}

   .banner_wrapper_internal {
height:250px;
width:1000px;
margin:0 auto}

   .banner_wrapper_internal p {
font-size:30px;
color:#ffffff;
font-weight:bold;
margin:0px 300px;
display:block}

   .internal_banner {
position:relative;
top:-235px;
left:15px;
z-index:-2;
}

   .internal_banner_overlay {
position:absolute;
top:-25px;
left:15px;
z-index:-2;
}

    #overlay{
position:absolute;
overflow:hidden;
width:340px;
height:200px;
z-index:-1;
border:2px #aeaeae solid;
     }

    #overlay_field
   {
position: relative;
width:1000px;
height:250px;
overflow:hidden;
    }

@rkwが言及した次のスクリプト

    $(document).ready(function() {

 $("#overlay_field").hover(function(){


$("#overlay").show(); //Show tooltip
}, function() {
    $("#overlay").hide(); //Hide tooltip
})

  $('#overlay_field').mousemove(function(e){
$("#overlay").css({left:e.pageX-360, top:e.pageY-280});
  });

  });

ここで達成しようとしている効果は次のとおりです。

画像がバナーとして表示される「internal_banner」

マウスがこの画像 (または "overlay_field") の上に置かれると、マウスに追従する小さな div が表示されます。これで、div の内容は別の画像「internal_banner_overlay」になります

この画像を「internal_banner」とまったく同じ位置に配置します。つまり、同じ場所にとどまり、マウスのように表示され、下にある別の画像が表示されるようにします。問題は、画像が 1 つの場所にとどまらず、位置が絶対に設定されていても、ドキュメントではなく div 内に配置され、マウスで移動することです。

簡単に言えば、マウスがバナー領域の上に移動すると、カーソルが小さなボックスに変化したように表示され、バナーを通して別の画像を見ることができます。

4

1 に答える 1

0

上部のdivに一時バナーを追加し、mouseoverおよびmouseoutイベントの不透明度を変更するだけです。

<div class="banner_area_internal">
    <div class="banner_wrapper_internal" id="overlay_field">
        <img src="abcd.png" />
        <img class="internal_banner permBanner" src="permBanner.png" />
        <img alt="" src="tempBanner.jpg" id="temp" style="height: 250px; width: 1000px; opacity: 0; position: absolute">
    </div>
</div>

JS：

   $(document).ready(function() {

 $("#overlay_field").hover(function(){


$("#overlay").show(); //Show tooltip
}, function() {
    $("#overlay").hide(); //Hide tooltip
})

  $('#overlay_field').mousemove(function(e){

  var width = 250;
  var height = 250;
  var left = parseInt(e.pageX)-parseInt(pageXOffset);
  var top = parseInt(e.pageY)-parseInt(pageYOffset);
  var a = document.getElementById("temp");
  a.style.opacity = 1;
  a.style.left = "0px";
  a.style.top = "0px";
  a.style.clip = "rect("+top+","+(left+100)+","+(top+100)+","+left+")";

  });
});

スタイル

 .banner_area_internal {
margin-top:10px;
width:100%;
height:250px;}
   .banner_wrapper_internal {
height:250px;
width:1000px;
margin:0 auto}
   .banner_wrapper_internal p {
    font-size:30px;
    color:#ffffff;
    font-weight:bold;
    margin:0px 300px;
    display:block;
}
   .internal_banner {
position:relative;
top:-235px;
left:15px;
z-index:-2;
}

   .internal_banner_overlay {
position:absolute;
top:-25px;
left:15px;
z-index:-2;
}

    #overlay{
position:absolute;
overflow:hidden;
width:250px;
height:250px;
border:2px #0000bb solid;
     }

    #overlay_field
   {
position: absolute;
width:1000px;
height:250px;
overflow:hidden;
    }​
    #temp{position:absolute;}

代替： または、マウスオーバーイベントとマウスアウトイベントの一時的なバナーを追加および削除することもできます。

于 2013-01-04T06:59:12.710 に答える