html(1)——转圈等待效果+鼠标移动悬浮显示相关信息

转圈等待效果：

html:

 <div id="loading" style="display:none"><img src="/scripts/easyui/themes/default/images/loading.gif"  alt="" />正在处理数据,请稍候...</div>

css:

        #loading{
            width:170px;
            height:25px;
            border:3px solid #C3DAF9;
            position:absolute;
            top:300px;
            left:600px; 
            z-index:10000; 
            background-color:#F7F9FC;
            line-height:25px;
            vertical-align:middle;
            font-size:11pt;
             display:none;
             }

js:

//显示加载数据
function ShowDiv() {
    $("#loading").show();
}
//隐藏加载数据
function HiddenDiv() {
     $("#loading").hide();
}

//ajax自带的属性执行上面的function
$.ajax({
                async: true,
                beforeSend: function () {
                    ShowDiv();
                },
                complete: function () {
                    HiddenDiv();
                },
                url: "" ,
                success: function (data) {},
 })

鼠标移动悬浮显示相关信息：

html:

<div id="mydiv1"  style="padding:2px;display:none"></div>

css:

         #mydiv1{
            width:auto;
            border:1px solid black;
            background-color:white;
            position:absolute;
            z-index:10000; /*设置元素的堆叠顺序*/
            vertical-align:middle;
            font-size:6pt;/*字体大小*/
             }

js:

//在fullcalendar上进行的操作
eventMouseover: function (calEvent, jsEvent, view) {
                    var t1 = calEvent.title;
                    show(calEvent, 'mydiv1');
                },
eventMouseout: function (calEvent, jsEvent, view) {
                    hide(calEvent, 'mydiv1');
                },

//用到以下两个function
//悬浮显示
 function show(obj, id) {
            document.getElementById('mydiv1').innerHTML = obj.title;
            var objDiv = $("#" + id + "");
            $(objDiv).css("display", "block");
            $(objDiv).css("left", event.clientX + document.body.scrollLeft - document.body.clientLeft);
            $(objDiv).css("top", event.clientY + document.body.scrollTop - document.body.clientTop + 20);
        }
        //悬浮隐藏
        function hide(obj, id) {
            var objDiv = $("#" + id + "");
            $(objDiv).css("display", "none");
        }

 

两者差不多吧，记录一下！