在鼠標懸停圖片聚焦/電網館

Live Demo
screenshot 在鼠標懸停圖片聚焦/電網館

概念需要的是...
有縮略圖。
縮略圖仍然覆蓋有黑色覆蓋圖）。
鼠標懸停在某個圖像上時，它會被點亮（或者翻轉或旋轉的動畫會成爲獎勵...... lol）
點擊後，圖像將通過fancybox進入真實尺寸。

我已經調整了花式框腳本&花式框功能已經發生。

$(".fancybox").fancybox({ 
    padding : 0, 
    openEffect: 'elastic', 
    openSpeed: 250, 

    closeEffect: 'elastic', 
    closeSpeed: 450, 
    closeClick: false, 

    helpers : { 
    overlay : { 
     css : { 
      'background' : 'rgba(0, 0, 0, 0.9)' 
     } 
    } 
} 

});

Working code
我需要一些幫助，對現有的代碼修改上懸停功能（或動畫）(^_^)
乾杯！

來源

2013-01-03 Lemdor

如何獲得懸停動畫快速樣品：

$(".fancybox").on("mouseenter", function() { 
    $(this).find("img").stop(true, true).animate({ 
     "opacity": 0.1 
    }, "slow"); 

}).on("mouseleave", function() { 
    $(this).find("img").stop(true, true).animate({ 
     "opacity": 1 
    }, "slow"); 

}).fancybox({ 
    padding: 0, 
    openEffect: 'elastic', 
    openSpeed: 250, 

    closeEffect: 'elastic', 
    closeSpeed: 450, 
    closeClick: false, 

    helpers: { 
     overlay: { 
      css: { 
       'background': 'rgba(0, 0, 0, 0.9)' 
      } 
     } 
    } 

});

你的工作代碼UPDATED

這就是你需要創建想要的效果的基本結構。

... or an animation of flip or rotation would be a bonus

......你說的是$$$獎勵嗎？ ;）

來源

2013-01-04 02:45:36 JFK

嗨@JFK，謝謝你的更新:)。你的代碼更新沒有伎倆。但是，我正在尋找相反的行動，因爲在圖像保持低負載不透明度，鼠標進入，它涉及到100不透明:)。這裏更新：http://jsfiddle.net/GsRxs/2/。是否有更少的「代碼行」來實現這一目標？通過獎金，我的意思是額外的幫助將是一個獎金給我..呵呵 – Lemdor

在鼠標懸停圖片聚焦/電網館

回答

相關問題