4

我已经看到了这种效果，当鼠标悬停在图像上时，该图像会发光。我不是在谈论边框发光，我的意思是图像中的颜色会发光。我发现有一个名为 Pixastic 的库，可以在这里看到发光效果。

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

有没有办法将此效果应用于图像上的鼠标悬停？我正在尝试制作一个会发光的按钮。

谢谢！

4

4 回答 4

5

您必须像这样创建鼠标悬停事件：

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

当您使用鼠标光标输入图像时，将触发第一个功能。当鼠标离开图像区域时调用第二个函数。这是将图像重置为其初始状态所必需的。

于 2012-03-28T09:53:33.687 回答
3

嗨，您可以使用CSS以及在鼠标悬停效果上赋予图像发光效果

请查看现场演示：- http://jsbin.com/inenet/12/edit

或者你可以阅读css悬停效果的教程

于 2012-03-28T11:00:17.303 回答
2

你在寻找这样的东西吗？

Zurb 发光按钮

对于你所有的鼠标冒险，我想推荐这个

HoverAlls jQuery 插件

于 2012-03-28T09:50:36.973 回答
1

正如您在 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()像示例显示的那样

于 2012-03-28T09:51:50.617 回答