一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

javascript中tips提示特效代码

时间:2014-05-08 编辑:简简单单 来源:一聚教程网

 代码如下 复制代码


Javascript :

// 提示插件
$.tips = function(ele, txt) {

    // 参数
    var r = true, // 插件返回值
        wrap = $('

'), // required包裹元素
        animationTime = 600,
        _this = this, // this
    ;

    // 显示提示框
    _this.show = function($this) {
        wrap
            .prepend(txt) // 当存在data-required属性时,提示框显示其值。
            .css({
                "left" : $this.offset().left + $this.outerWidth() / 2 - 16,
                "top" : $this.offset().top + $this.outerHeight() + 7
            })
        ;
        $("body").append(wrap);

        wrap.fadeIn(animationTime);

        // 移除提示框
        _this.hide($this);
    }

    // 隐藏提示框
    _this.hide = function ($this) {
        var timer = setTimeout(function(){
            _this.remove();
        }, 6000);
        $this.blur(function(){
            clearTimeout(timer);
            _this.remove();
        });
        $this.keydown(function(e) {
            clearTimeout(timer);
            _this.remove();
            $this.unbind("keydown");
        });
    }

    // 移除提示框
    _this.remove = function() {
        wrap.fadeOut(animationTime, function() {
            $(this).remove();
        });
    }

    _this.show(o.ele);
}
CSS :

/* tips提示框 { */
.tips {
    border: 1px solid #C7C7C7;
    background: #fff url(../img/required.gif) no-repeat 6px center;
    padding-right: 16px;
    padding-left: 33px;
    height: 32px;
    font: 14px/32px SimSun, 'Microsoft YaHei', SimHei;
    position: absolute;
    left: 40%;
    top: 300px;
    border-radius: 3px;
    color: #000;
    box-shadow: 0px 2px 5px 0px #c7c7c7;
    display: none;
}
.tips i, .tips b {
    position: absolute;
    width: 0;
    height: 0;
    border-width: 0 7px 7px 7px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
    top: -7px;
    left: 10px;
}
.tips b {
    top: -8px;
    border-color: transparent transparent #c7c7c7 transparent;
}
/* tips 提示框 } */

热门栏目