鼠标悬停的图像发光？

我已经看到了这种效果，当鼠标在图像上时，该图像发光。我不是在谈论边缘发光，我的意思是图像中的颜色发光。我发现有一个名为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

鼠标悬停的图像发光？

回答

相关问题