0

我有一个以主图像为特色的页面。主图像将根据照片改变其高度和宽度。我在图片旁边还有一个 AddThis 共享小部件。对于一个尺寸的图像，我的间距是正确的。如何设置 AddThisdiv以根据图像大小流畅地保持其当前间距？

这是一个链接，因此您可以看到我正在谈论的示例。页面上的黑框（白色轮廓）表示将要更改的图像。AddThis div 当前调整高度但不调整宽度。这是 AddThis div 的 CSS：

样式=“左：-110px；上：-220px；” /* 它当前是如何定位的，我喜欢当前的间距。它必须保持这个间距 */

.addthis_floating_style{ 
        background: none repeat scroll 0 0 #000000 !important; 
        position: relative !important; 
}

如何更改它以便 AddThis 正确地将其间距调整为图像的高度和宽度？

我想到的另一种方法是使用 jQuery 读取图像高度和宽度，然后根据图像大小设置 AddThis div 的元素left。top这需要动态计算。

我会使用任何最有效的方法。请提供一个例子，因为 javascript 不是我的强项。

更新：我阅读了另一个问题并阅读了提供的答案，我想知道它是否会解决我的问题，但似乎无法正常工作。这是尝试过的代码（注意：我目前使用的是上面的，下面的代码是我尝试过的）：

JS

var $j = jQuery.noConflict();
$j("#add-this-vertical").position({
    my:        "right top",
    at:        "right bottom",
    of:        $j("#image-container"),
   collision: "fit"
})

HTML

<div id="image-container">
<div class="img-center"><img src="/test.jpg" alt="test" />
</div>
<div id="add-this-vertical">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/
 300/addthis_widget.js">   
</script>
<!-- AddThis Button END -->
</div>


</div>
4

2 回答 2

0

您可以像这样向图像标签添加一些 JavaScript：

<img onload="onMyImageLoad(this)" />

然后在您的文档位置的其他地方：

<script>

function onMyImageLoad( img )
{

var height = img.height

// now do something with this height value like change a 
// div's height or margin-top    

}

</script>
于 2012-05-21T19:34:46.827 回答
0

这是我的做法，但我的图像不再以页面为中心。正在处理那个...

<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
    <div style="text-align:center;">
         <img src="/Images/test.jpg" alt="test" />
    </div>
    <div style="position:absolute; bottom:0px; right:-40px;">
    <div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
         <a class="addthis_button_facebook"></a>
         <a class="addthis_button_twitter"></a>
         <a class="addthis_button_email"></a>
         <a class="addthis_button_compact"></a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/300/
            addthis_widget.js"></script>
 </div>
    </div>
于 2012-05-24T02:17:33.337 回答