0

以下に示すのは、私のhtmlコードの形式です。ヘッダー div に画像があります。包含 div 内の各ボックス (box1、box2、box3) には、(ソフトウェア開発 (box1)、グラフィック デザイン (box2)、テクニカル トレーニング (box3) など) 内にリンクがあります。これらのリンクをクリックすると、別のページに移動します。独自のヘッダー画像だから、各ボックスに3つのヘッダー画像があり、ホームページにデフォルトのヘッダー画像があります。フェードインと同様に、マウス アウトでデフォルトの画像を返します。ボックス 2 とボックス 3 も同じです。CSS、JS、または jQuery でこれを行うのを手伝ってください。ありがとうございます。

<body>
   <div class="wrapper">
      <div class="out">
         <div class="in">
            <div id="header"></div>
            <div class="contain">
               <div class="box1"></div>
               <div class="box2"></div>
               <div class="box3"></div>
            </div>
         </div>
      </div>
   </div>
</body>

CSS:

.wrapper{
    width: 100%
    height: auto;
    margin: 0px;
}
.out{
    margin: auto;
    width: 1000px;
    height: 730px;
    border-top: 5px solid  #333333;
}
.in{
    width: 900px;
    height: 640px;
    margin: auto;
    margin-top: 25px;
}
#header{
    background:url(../img/Untitled-1.jpg);
    height: 175px;
    width: 900px;
    margin: 0px;
}
.contain{
    margin: 0px;
    width: 900px;
    height: 428px;
}
.box1{
    height: 360px;
    width: 295px;
    float: left;
    margin: 67px 0px 0px 0px;
    position: absolute;
    background-color: #e6e7e9;
    border-bottom: 4px solid #735d8c;
}
.box2{
    height: 360px;
    width: 295px;
    float: left;
    margin: 67px 0px 0px 302px;
    position: absolute;
    background-color: #e6e7e9;
    border-bottom: 4px solid #735d8c;
}
.box3{
    height: 360px;
    width: 295px;
    float: left;
    margin: 67px 0px 0px 602px;
    position: absolute;
    background-color: #e6e7e9;
    border-bottom: 4px solid #735d8c;
}
4

3 に答える 3

1

BINを作成しました

私は3つのdivすべてに同じ画像を配置しています

  $('#content,#content2,#content3').mouseover(function(){

$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')

});

あなたは次のようなそれぞれの画像で変化します

 $('#content').mouseover(function(){

$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')

});

 $('#content2').mouseover(function(){

$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')

});....
于 2012-12-11T12:03:42.143 に答える
0

これを参照してください：http：//jsfiddle.net/xTjQT/2/

 $('a').mouseover(function() {
    var src = $(this).attr('alt');
alert(src);
$('#header img').stop().fadeOut(100, function() {
     $(this).attr('src', src);
     $(this).fadeIn(100);
});
});

$('a').mouseout(function() {
$('#header img').stop().fadeOut(200, function() {
     $(this).attr('src', 'http://jsfiddle.net/img/logo.png');
     $(this).fadeIn(100);
});
});
于 2012-12-11T12:01:31.040 に答える
0

jsBin デモ

jQuery:

var currPage = 0; // PLAY HERE: set here current page (0 = home)

var $header = $('#header');
var $headerImg = $header.find('img');

$headerImg.eq( currPage ).show().addClass('currentImg');

// clone images to boxes:
var c = 0;
$('.box').each(function( i ){

  $(this).prepend( $headerImg.eq(i==currPage? (i+1+c++) : c+i).clone() );
});


$('.box img[class^=headImg]').on('mouseenter mouseleave', function( e ){
  
  var opacity = e.type=='mouseenter' ? 1 : 0 ;
  var myClass = $(this).prop('class'); // get class  
  var $mainImg = $header.find('img.'+myClass);
  
  
  $headerImg.hide();
  $mainImg.stop().fadeTo(300, opacity);
  $('.currentImg').stop().fadeTo(600, !opacity);
   
  
});

HTML:

<div class="wrapper">
  <div class="out">

     <div class="in">
       
        <div id="header">
          <img class="headImg1" src="home.jpg" alt="" />
          <img class="headImg2" src="ONE.jpg" alt="" />
          <img class="headImg3" src="TWO.jpg" alt="" />
          <img class="headImg4" src="THREE.jpg" alt="" />
        </div>
       
        <div class="contain">
           <div class="box">
          
          </div>
           <div class="box">
          
          </div>
           <div class="box">
          
          </div>
        </div>
       
     </div>
    
    
  </div>
 </div>

変更された CSS 部分:

/*ADDED*/
#header img{
  position:absolute;
  display:none;
}


.contain{
    margin: 0px;
    width: 900px;
    height: 428px;
}
.box{ /* CHANGED */
    height: 360px;
    width: 294px;
    float: left;
    margin: 67px 3px 0px;
    position: relative;
    background-color: #e6e7e9;
    border-bottom: 4px solid #735d8c;
}

/* ADDED */
.box img{
  width:100%;
}
于 2012-12-11T12:16:58.957 に答える