今天的Google图片控件如何运作?

时间:2010-12-23 18:41:34

标签: javascript html css

我正在查看谷歌搜索页面上的javascript图片控件,我想知道如何复制它。我可以看到它在hoverover上打破了一张图片,但我找不到他们在html中使用的代码。

有人可以帮助我。

2 个答案:

答案 0 :(得分:0)

我刚回答了一个类似的问题@ Jquery Image popout on hover - 我的回答是一个CSS3示例。

另请参阅http://jsfiddle.net/Kai/x4Frn/

答案 1 :(得分:0)

看看来源:

<div id="hplogo-..." style="background-color: rgb(153, 77, 51); position: absolute; width: 201px; height: 121px; left: -28px; top: 31px; z-index: 17;">
  <div style="overflow: hidden; top: 6px; left: 6px; position: absolute; height: 109px; width: 189px; ">
    <a href="/search?q=...">
      <img src="/logos/..." border="0" style="position: absolute; left: -1px; top: -110px; ">
    </a>
  </div>
</div>

第一个<div>定位图像并添加背景颜色。第二个<div>隐藏了溢出,以避免图像从开箱即用,并放置在距离第一个div 6像素的位置,从而创建边框。最重要的是,图像被放置,因为它是一个精灵,它有一些偏移。

将第一个div移动将改变前两个div的宽度和高度,并重新定位第一个div。