Question

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

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

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

谢谢！

Answer 1

你必须在这样的事件上创建一个鼠标：

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

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

Answer 2

您好，您可以使用 CSS 以及

为鼠标悬停效果提供 Image Glow
请查看现场演示： http://jsbin.com/inenet/12/edit

or you can read the tutorial of css hover effects

Answer 3

你在找这样的东西吗？

Zurb Glow Button

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

HoverAlls jquery plugin

Answer 4

正如您在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节目

鼠标悬停上的图像发光？

4 个答案: