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

时间：2013-08-04 08:56:10

标签： javascript jquery css css3

我试图使用“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);

3 个答案:

答案 0 :(得分：2)

发光按钮（HTML＆amp; 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>

COMPASS（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

注意：我使用animation compass plugin在compass中应用css3动画。

答案 1 :(得分：1)

你说你是试图使用“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 bootstrap吗？

更新

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

可能是文件路径不正确吗？ 如果我将路径更改为非无效位置，我会在chrome 30的开发工具中获得此错误：

enter image description here

更新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中搜索jquery或jquery-ui中的更改尚未产生 $.css still seems to be in use（或here）以外的任何结果。在s ource of jquery the function css is included中也是如此：

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 illuminate插件。

用户Dave做得非常出色，并发现启用firefox 22无效的原因。您可以在my question plugin-illuminate-0-7-incompatible-to-jquery-1-9-1-or-jquery-ui-1-10-3找到他的解决方案。请给Dave一个赞成他的努力，他的调试和他出色的javascript和jQuery知识。

答案 2 :(得分：0)

确保您已设置正确的参数

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'

    });

});
相关问题
最新问题