javascript - 是否有任何技术或插件来照亮元素（按钮）？

Question

我试图使用“jquery-illuminate”（http://www.tonylea.com/2011/jquery-illuminate）

但是，这在我的网络服务（jQuery1.9.1）上不起作用

谁能告诉我如何照亮一个元素（按钮）？我试过这个。但这只是隐藏和显示元素。
我想点亮一个按钮:(

(function(t){
    var func = arguments.callee;
    if(t) func.rest=t*2;
    if(--func.rest>=0) $(".btn#illuminate").fadeTo(800,(func.b = !!!func.b) ? 0.5 : 1,func);
})(3);

score 2 · Accepted Answer

发光按钮（HTML & CSS）：

HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Glowing buttons</title>
</head>
<body>

    <!-- Blue -->
    <a href="#" class="button blue">Hello World</a>

    <!-- Yellow -->
    <a href="#" class="button yellow">Hello World</a>

    <!-- White -->
    <a href="#" class="button white">Hello World</a>

</body>
</html>

指南针 (SCSS)：

@import "compass/css3/images";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/animation";

body {
    background: #000 url('http://subtlepatterns.com/patterns/office.png');
    padding: 30px;
    font-family: "Helvetica Neue", "Helvetica", sans-serif;
}

/* Blue Shadow */
@include keyframes(blue) {
    0%, 100%{
        @include box-shadow(1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5));
    }
    50% {
        @include box-shadow(0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0));
    }
}

/* Yellow Shadow */
@include keyframes(yellow) {
    0%, 100%{
        @include box-shadow(1px 0px 19px 4px rgba(255, 245, 3, 1), inset 0px 0px 10px rgba(255, 255, 255, 0.5));
    }
    50% {
        @include box-shadow(0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0));
    }
}

/* White Shadow */
@include keyframes(white) {
    0%, 100%{
        @include box-shadow(1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5));
    }
    50% {
        @include box-shadow(0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0));
    }
}

/* Button */
.button {
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    @include border-radius(10px 0);
    margin-right: 20px;
}

/* Blue Background */
.blue {
    text-shadow: 0px 1px 0px #83e0f7;
    @include background-image(linear-gradient(top, #87e0fd, #53cbf1));
    @include animation(blue 2s infinite);
}

/* Yellow Background */
.yellow {
    text-shadow: 0px 1px 0px #faffc7;
    @include background-image(linear-gradient(top, #fff966, #f3fd80));
    @include animation(yellow 2s infinite);
}

/* White Background */
.white {
    text-shadow: 0px 1px 0px #fff;
    @include background-image(linear-gradient(top, #fff, #ccc));
    @include animation(white 2s infinite);
}

CSS：

body {
  background: black url("http://subtlepatterns.com/patterns/office.png");
  padding: 30px;
  font-family: "Helvetica Neue", "Helvetica", sans-serif; }

/* Blue Shadow */
@-moz-keyframes blue {
  0%, 100% {
    -moz-box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -moz-box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-webkit-keyframes blue {
  0%, 100% {
    -webkit-box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-o-keyframes blue {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@keyframes blue {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

/* Yellow Shadow */
@-moz-keyframes yellow {
  0%, 100% {
    -moz-box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -moz-box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-webkit-keyframes yellow {
  0%, 100% {
    -webkit-box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-o-keyframes yellow {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@keyframes yellow {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

/* White Shadow */
@-moz-keyframes white {
  0%, 100% {
    -moz-box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-webkit-keyframes white {
  0%, 100% {
    -webkit-box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-o-keyframes white {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@keyframes white {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

/* Button */
.button {
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px 0;
  border-radius: 10px 0;
  margin-right: 20px; }

/* Blue Background */
.blue {
  text-shadow: 0px 1px 0px #83e0f7;
  background-image: -webkit-linear-gradient(top, #87e0fd, #53cbf1);
  background-image: -moz-linear-gradient(top, #87e0fd, #53cbf1);
  background-image: -o-linear-gradient(top, #87e0fd, #53cbf1);
  background-image: linear-gradient(to bottom, #87e0fd, #53cbf1);
  -webkit-animation: blue 2s infinite;
  -moz-animation: blue 2s infinite;
  -o-animation: blue 2s infinite;
  animation: blue 2s infinite; }

/* Yellow Background */
.yellow {
  text-shadow: 0px 1px 0px #faffc7;
  background-image: -webkit-linear-gradient(top, #fff966, #f3fd80);
  background-image: -moz-linear-gradient(top, #fff966, #f3fd80);
  background-image: -o-linear-gradient(top, #fff966, #f3fd80);
  background-image: linear-gradient(to bottom, #fff966, #f3fd80);
  -webkit-animation: yellow 2s infinite;
  -moz-animation: yellow 2s infinite;
  -o-animation: yellow 2s infinite;
  animation: yellow 2s infinite; }

/* White Background */
.white {
  text-shadow: 0px 1px 0px #fff;
  background-image: -webkit-linear-gradient(top, #ffffff, #cccccc);
  background-image: -moz-linear-gradient(top, #ffffff, #cccccc);
  background-image: -o-linear-gradient(top, #ffffff, #cccccc);
  background-image: linear-gradient(to bottom, #ffffff, #cccccc);
  -webkit-animation: white 2s infinite;
  -moz-animation: white 2s infinite;
  -o-animation: white 2s infinite;
  animation: white 2s infinite; }

演示： http ://codepen.io/arbaoui_mehdi/details/yoCnx

注意：我使用动画罗盘插件在 compass中应用 css3 动画。

score 1 · Accepted Answer

您说您正在尝试使用“jquery-illuminate”（http://www.tonylea.com/2011/jquery-illuminate）但是，这在 [您的] Web 服务（jQuery1.9.1）上不起作用

我用这个设置做了一个离线演示，它可以工作：

<head>  
<script src="jquery_1.9.1.js"></script> 
<script src="jquery-ui_1.10.3.js"></script>
<script src="jquery.illuminate.0.7.js"></script>
<script>
window.onload = function(){
  if(true){ 
     var input = $(".box#input");
     $(document).scrollTop(input .offset().top - 60);
     var v = input.val();
     input.val('');
     input.focus().val(v);
     input.focus()

     $(".btn#illuminate").illuminate({'intensity': '0.3'
             ,'color': '#98cb00','blink': 'true'
             ,'blinkSpeed': '1200', 'outerGlow': 'true'
             ,'outerGlowSize': '30px','outerGlowColor': '#98cb00'
    });
  }
}
</script>
</head>

<body>

如果您发布错误消息，我们可能会使其正常工作。

您使用的是哪个版本的 jquery-ui？
你也使用 twitter 引导程序吗？

更新

更新1：`TypeError: $(...).illuminate is not a function`

难道是文件路径不正确？如果我将路径更改为不存在的位置，我会在 chrome 30 的开发工具中收到此错误：

在此处输入图像描述

更新 2：

jquery.illuminate.0.7.js与firefox 22一起使用，jquery_1.9.1.js并jquery-ui_1.10.3.js导致以下错误：TypeError: $.css(...) is undefined指向jquery.illuminate.0.7.js:223 第223行是以下方法：

$.cssHooks.boxShadowBlur = {
     get: function ( elem, computed, extra ) {
             return $.css(elem, support.boxShadow).split(rWhitespace)[5];
     },
     set: function( elem, value ) {
             elem.style[support.boxShadow]=
                 insert_into($.css(elem,support.boxShadow),value,5);                
     }
};

在 Firefox 控制台中出现了几条警告/错误消息：

CSS 警告：`Unknown property 'box-sizing' more information see this question
JS 错误：TypeError: $.css(...) is undefined仍在搜索更多信息

搜索 jquery 或 jquery-ui 中的更改$.css尚未产生任何结果，但$.css 似乎仍在使用中（或此处）。在jquery 的源代码中，函数 css 也包括在内：

jQuery.fn.extend({
        css: function (name, value) {
            return jQuery.access(this, function (elem, name, value) {
                var styles, len,
                    map = {},
                    i = 0;

                if (jQuery.isArray(name)) {
                    styles = getStyles(elem);
                    len = name.length;

                    for (; i < len; i++) {
                        map[name[i]] = jQuery.css(elem, name[i], false, styles);
                    }

                    return map;
                }

                return value !== undefined ?
                    jQuery.style(elem, name, value) :
                    jQuery.css(elem, name);
            }, name, value, arguments.length > 1);
        },

我将尝试通过自己提出问题来了解更多信息。

更新 - 解决方案是修改 jQuery 照明插件。

用户 Dave 做得非常出色，并找到了 light 在 firefox 22 中不起作用的原因。您可以在我的问题 plugin-illuminate-0-7-incompatible-to-jquery-1-9-1-or-jquery中找到他的解决方案-ui-1-10-3。请为 Dave 的努力、调试以及出色的 javascript 和 jQuery 知识点赞。

score 0 · Accepted Answer

确保您设置了正确的参数

JSFIDDLE http://jsfiddle.net/kevinPHPkevin/P9GXa/

$(document).ready(function(){

    $('#button').illuminate({

        'intensity': '0.3',

        'color': '#98cb00',

        'blink': 'true',

        'blinkSpeed': '1200',

        'outerGlow': 'true',

        'outerGlowSize': '30px',

        'outerGlowColor': '#98cb00'

    });

});

javascript - 是否有任何技术或插件来照亮元素（按钮）？

3 回答 3

更新

更新1：TypeError: $(...).illuminate is not a function

更新 2：

更新 - 解决方案是修改 jQuery 照明插件。

Related

Reference

更新1：`TypeError: $(...).illuminate is not a function`