如何將圖像移動到div的一半？

Question

好吧，我有這Page，你可以看到，如果你向下滾動地圖，你會看到「巴里諾斯市場」的標誌和標題......如果你點擊閱讀更多鏈接文本擴展..這是正是我想要的。我試圖解決的問題是，當用戶點擊閱讀更多我需要在左邊的巴羅納市場圖像向下滾動文本，並下半部分....這裏是代碼...

<div id="barino_info"> 
<div id="barino_header"></div> 
<div class="info_body"> 
<div id="barino_left_body"> 
</div> 
<div class="right_body"> 
    <div class="right_body_outer"> 
     <ul class="play_navigation"> 
      <li class="active"><a href="#" class="navlinks barino_story_bottom" ref="right_body_inner">The Story</a></li> 
      <li><a href="#barino_video" class="navlinks barino_video_bottom" ref="bottom_barino_video">The Video</a></li> 
      <li><a onclick="show_gallery('barino');" href="#" class="navlinks barino_gallery_bottom" ref="bottom_barino_gallery">The Gallery</a></li> 
      <li><a href="#" class="navlinks barino_equipment_bottom" ref="barino_equipment">The Equipment</a></li>       
     </ul> 
    <div class="right_body_inner tab_content"> 
     Barino's Market is an ...... 

的圖像是在#barino_left_body背景網址

如何實現this..i想的是在策略的任何想法也許jQuery的偏移或類似的東西

我用這plugin到做擴大...這裏是我的jquery去做

$('.right_body_inner, .doughboy_right_body_inner, .haw_right_body_inner, .river_right_body_inner, .vib_right_body_inner, .barino_equipment, .dough_equipment, .river_equipment, .haw_equipment, .vib_equipment').expander({ 
    slicePoint:  355, // default is 100 
    expandEffect:  'fadeIn', 
    expandSpeed:  '8',  // speed in milliseconds of the animation effect for expanding the text 
    userCollapseText: '(less..)' // default is '[collapse expanded text]' 
}); 

Answer 1

後的「更多」點擊，就可以計算出周圍<div>的高度，並添加（或動畫）的#barino_left_body上邊距到周圍<div>高度的一半加上#barino_left_body高度的一半。

$('.read-more').click(function(event){ 
    var parentHeight = $(this).parents('.info_body').height(); 
    var imageHeight = $('#barino_left_body').height(); 
    var centerImage = (parentHeight-imageHeight)/2; 

    $('#barino_left_body').animate({"marginTop": centerImage}, 250); 

    event.preventDefault(); 
}); 

P.S.我很好奇你爲什麼將它作爲背景圖片。

Answer 2

我不確定您是否可以使用jQuery移動背景圖片。我認爲你不能。但是你可以移動一個正常的圖像，所以這就是我會做的。

我會通過jquery選擇圖片，然後使用animate()來設置它的新位置。 css()也可以工作。頂部將是（（股利的總大小） - （圖像的大小））/ 2

var h1 = $("#barino_left_body").height(); 
var h2 = $("#myimage").height(); 
var position = (h1-h2)/2; 
$("#myimage").animate({"top":position},250); 

您展開文本時做到這一點。

這應該可以做到。但是如果你真的需要使用圖像作爲背景，我不知道你的答案。 :(

我希望它幫助。

Answer 3

試穿尺寸爲這個代碼，我可能會得到一些錯誤引用與父/預防和控制，如果你不能弄清楚，發佈錯​​誤。

JS

$('.right_body_inner, .doughboy_right_body_inner, .haw_right_body_inner, .river_right_body_inner, .vib_right_body_inner, .barino_equipment, .dough_equipment, .river_equipment, .haw_equipment, .vib_equipment').expander({ 
    slicePoint:  355, // default is 100 
    expandEffect:  'fadeIn', 
    expandSpeed:  '8',  // speed in milliseconds of the animation effect for expanding the text 
    userCollapseText: '(less..)', // default is '[collapse expanded text]', 
    afterExpand: function($thisElement) { 
     $thisElement.parent().prev().height($thisElement.height()) 
    }, 
    onCollapse: function($thisElement, byUser) { 
     $thisElement.parent().prev().css('height',''); 
    } 
}); 

我添加2個回調基本上。

第一個afterExpand設置高度到展開div的高度。您已經正確設置圖像的位置的CSS。

第二個onCollapse集刪除我以前的高度定義，返回到div的CSS定義，並使佈局恢復到它的原始設計。

在第二個函數中使用.css（），所以您可以看到設置高度的不同方法，您可以在兩者之間進行選擇。