任何人都可以展示一個使用BeautyTips的簡單例子嗎？

尋找一個簡單的例子來說明如何使用美容貼（包括HTML + CSS）？我的要求是這樣的 - 我顯示產品名稱。在產品名稱懸停時，我想在工具提示中顯示產品圖像。如何才能做到這一點？任何人都可以展示一個使用BeautyTips的簡單例子嗎？

感謝

來源

2010-07-28 jess

@Pekka太滑稽了。：P – spinon 2010-07-28 16:51:05

@spinon我愛*「每日提示」部分：'選擇一個適合你眼睛顏色的眼線.'和'穿一個可以補充你的穿衣和個性的髮型.' – 2010-07-28 16:52:24

@皮卡是啊，那很漂亮甜。 – spinon 2010-07-28 16:55:51

下面是一些樣品網站： http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

假設是，你是指這個jQuery插件。

來源

2010-07-28 16:50:36 spinon

該演示頁面沒有用處 - 它使用了一個複雜的eval方法在textarea中運行javascript - 這位先生所要求的（以及對我們所有人有用的東西）是帶有啓動div的頁面的基本示例一個簡單的泡泡，當你懸停在它上面時。沒有任何天賦......請。 – 2011-08-15 21:59:40

這是。你只需要確保js文件正在被加載。請注意，我在這裏使用hoverintent lib在彈出任何內容之前給出延遲。

<script type="text/javascript" src="jquery-1.5.1.min.js"></script> 
<script type="text/javascript" src="jquery.bt.min.js"></script> 
<script type="text/javascript" src="jquery.hoverIntent.minified.r6.js"> 
<div id="mydiv">Mouse over here to see it poppin'</div> 
<script> 
$("mydiv").bt("Text to pop out",{ 
      showTip: function(box){ 
       $(box).fadeIn(300); 
      }, 
      hideTip: function(box, callback){ 
       $(box).animate({opacity: 0}, 100, callback); 
      }, 
      hoverIntentOpts: { 
       interval: 1000, 
       timeout: 200 
      }, 
      fill: '#E1EEF8', 
      cornerRadius: 10, 
      strokeWidth: 0, 
      shadow: true, 
      shadowOffsetX: 3, 
      shadowOffsetY: 3, 
      shadowBlur: 8, 
      shadowColor: 'rgba(0,0,0,.9)', 
      shadowOverlap: false, 
      noShadowOpts: {strokeStyle: '#999', strokeWidth: 2}, 
      positions: ['top', 'bottom','right'] 
     }); 
</script>

來源

2011-11-09 19:18:13 dsomnus

任何人都可以展示一個使用BeautyTips的簡單例子嗎？

回答

相關問題