Question

好的，我有这个Page，你可以看到如果你在地图下方向下滚动，你会看到“Barinos Market”的标志和标题......如果你点击阅读更多链接文本扩展..这正是我想要的。我试图解决的问题是，当用户点击阅读更多时，我需要左侧的barinos市场图像向下滚动文本，并在div的一半...这里是代码......

<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

上的背景网址

关于如何实现这个...的策略的任何想法都在考虑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

尝试使用此代码的大小，我可能会得到一些错误的那些父/ prev，如果你无法弄清楚，发布错误。

<强> 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（），这样你就可以看到设置高度的不同方法，你可以在两者之间做出决定。

Answer 2

点击“阅读更多”后，您可以计算周围<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 3

我不确定你是否可以使用jQuery移动背景图像。我想你不能。但是你可以移动一个普通的图像，这就是我要做的事情。

我会通过jquery选择图像，然后使用animate()设置它的新位置。 css()也会奏效。顶部将是（（div的总大小） - （图像的大小））/ 2

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

扩展文本时执行此操作。

这应该可以解决问题。但如果你真的需要使用图像作为背景我不知道你的答案。：（

我希望它有所帮助。

如何将图像移动到div的一半？

3 个答案: