鼠標懸停的圖像發光？

我已經看到了這種效果，當鼠標在圖像上時，該圖像發光。我不是在談論邊緣發光，我的意思是圖像中的顏色發光。我發現有一個名爲Pixastic的圖書館，可以在這裏看到輝光的影響。鼠標懸停的圖像發光？

http://www.pixastic.com/lib/docs/actions/glow/

是否有應用在圖像上鼠標懸停這個效果的方法嗎？我正在嘗試製作一個發光的按鈕。

謝謝！

2012-03-28 alik

「我所看到的這種效果在鼠標懸停在圖像上時，該圖像發光。「 - 你在哪裏看到它？ – thirtydot 2012-03-28 09:54:14

你必須創建一個鼠標事件是這樣的：

$("img").hover(
    function() { 
    Pixastic.process($(this).get(0), "glow", {amount:0.5, radius:1.0}); 
    }, 
    function() { 
    Pixastic.revert($(this).get(0)); 
    } 
);

當你與你的鼠標光標輸入圖像的第一功能被觸發。當鼠標離開圖像區域時調用第二個函數。這是需要重置圖像到其初始狀態。

來源

2012-03-28 09:53:33 Alp

你在找這樣的嗎？

Zurb Glow Button

對於所有鼠標的冒險，我想推薦這個

HoverAlls jquery plugin

來源

2012-03-28 09:50:36 cyberfly

Zurb發光按鈕實際上是使用css顏色製作的。我試圖讓圖像（PNG）發光。 – alik 2012-03-28 10:01:59

HoverAlls看起來非常酷，但也沒有真正的影響。任何其他想法？ – alik 2012-03-28 10:02:32

正如您在Pixastic例子看到，demo()函數被調用上提交表單。

function demo() { 
    Pixastic.process(document.getElementById("demoimage"), "glow", { 
     amount : $("#value-amount").val(), 
     radius : $("#value-radius").val() 
    }); 
}

因此，您可以在項目中包含glow.js並在懸停時調用此函數。

$('img.myimage').hover(function() { 
    Pixastic.process($(this), "glow", { 
     amount : 0.5, 
     radius : 0.5 
    }); 
}, function() { 
    Pixastic.process($(this), "glow", { 
     amount : 0, 
     radius : 0 
    }); 
});

或者revert()像sample顯示

來源

2012-03-28 09:51:50

這不會在mouseleave事件後重置發光效果 – Alp 2012-03-28 11:12:09

懸停是mouseenter和mouseleave的快捷方式。更新了我的答案 – 2012-03-28 12:03:04

嗨，你可以用CSS以及

請檢查現場演示給圖片上的發光鼠標懸停效果： -http://jsbin.com/inenet/12/edit

or you can read the tutorial of css hover effects

來源

2012-03-28 11:00:17

鼠標懸停的圖像發光？

回答

相關問題