zoukankan      html  css  js  c++  java
  • jQuery,title、仿title功能整理

    如图:仿 title="查看"

    note="查看",note 可换成其他

    样式:

    /*重写,标签title层*/
    #titleRewrite {position:absolute; z-index:5999; padding:2px 10px; border-radius:3px; color:#fff; background:#5B697B; -webkit-box-shadow: 1px 1px 3px #ccc; -moz-box-shadow: 1px 1px 3px #ccc; box-shadow: 1px 1px 3px #ccc;}

    JS:
    $(function() {
        $("[note]").each(function() {
            var a = $(this);
            var note = a.attr('note');
            if (note == undefined || note == "") return;
            a.data('note', note)
                .removeAttr('note')
                .on('mouseover mouseout', function(e) {
                    if (e.type == 'mouseover'){
                        var offset = a.offset();
                        $("<div id="titleRewrite"></div>").appendTo($("body")).html(note).css({ top: offset.top + a.outerHeight(), left: offset.left + a.outerWidth()/2 + 10 }).fadeIn(function () {
                            setTimeout(function () { $(this).remove(); }, $(this).text().length*800);
                        });
                        //console.log('111');
                    }else {
                        setTimeout(function (){
                            $("#titleRewrite").remove();
                        }, 150);
                        //console.log('000');
                    }
                });
                /*.hover(function (e) {
                    /!*var xx = e.originalEvent.x || e.originalEvent.layerX || 0;
                     var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
                     //$(this).text(xx + '---' + yy);
                     $("<div id="titleRewrite"></div>").appendTo($("body")).html(title).css({ top: yy + 10, left: xx + 10 }).fadeIn(function () {
    
                     var pop = $(this);
                     setTimeout(function (){
                     pop.remove();
                     }, pop.text().length*800);
    
                     });    *!/
    
                    var offset = a.offset();
                    $("<div id="titleRewrite"></div>").appendTo($("body")).html(note).css({ top: offset.top + a.outerHeight(), left: offset.left + a.outerWidth()/2 + 10 }).fadeIn(function () {
                        setTimeout(function () { $(this).remove(); }, $(this).text().length*800);
                    });
    
                },function(){
                    setTimeout(function (){
                        $("#titleRewrite").remove();
                    }, 150);
                });*/
        });
    });
  • 相关阅读:
    Linux-文件目录管理
    20. 有效的括号
    242. 有效的字母异位词
    387. 字符串中的第一个唯一字符
    136. 只出现一次的数字
    14. 最长公共前缀
    268. 丢失的数字
    169. 多数元素
    26. 删除有序数组中的重复项
    283. 移动零
  • 原文地址:https://www.cnblogs.com/xiangsj/p/5884889.html
Copyright © 2011-2022 走看看