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");
        }

 

兩者差不多吧，記錄一下！