当前位置:u赢电竞手机版 > u赢电竞竞猜app > jquery animate实现鼠标放上去显示离开隐藏效果u赢

jquery animate实现鼠标放上去显示离开隐藏效果u赢

文章作者:u赢电竞竞猜app 上传时间:2019-05-20

实现效果图
u赢电竞竞猜app 1 
加载图片
u赢电竞竞猜app 2 
实现方式:

1、CSS样式:

在jsp页面中加入

复制代码 代码如下:

样式

@CHARSET "UTF-8";
* html .showbox,* html .overlay {
position: absolute;
top: expression(eval(document.documentElement.scrollTop) );
}
#AjaxLoading {
border: 1px solid #8CBEDA;
color: #37a;
font-size: 12px;
font-weight: bold;
}
#AjaxLoading div.loadingWord {
width: 180px;
height: 50px;
line-height: 50px;
border: 2px solid #D6E7F2;
background: #fff;
}
#AjaxLoading img {
margin: 10px 15px;
float: left;
display: inline;
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 998;
width: 100%;
height: 100%;
_padding: 0 20px 0 0;
background: #f6f4f5;
display: none;
}
.showbox {
position: fixed;
top: 0;
left: 50%;
z-index: 9999;
opacity: 0;
filter: alpha(opacity = 0);
margin-left: -80px;
}

复制代码 代码如下:

2、JS:

.progress{z-index: 2000}
.mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #2F2F2F}

复制代码 代码如下:

节点

/**
* 加载动画窗口
*
* @author dendy
* @since 2013-7-19 10:13:05
*/
function getLoadingHtml(msg) {
if(!msg) msg = "加载";
var html = "<div id='loadingDiv'>"

复制代码 代码如下:

  • "<div style='height: 1325px; display: none; opacity: 0;' class='overlay'></div>"
  • "<div style='opacity: 0; margin-top: 250px;' id='AjaxLoading' class='showbox'>"
  • "<div class='loadingWord'>"
  • "<img src='" Util.getContentPath() "/images/ajax-loader.gif'>" msg "中,请稍候..."
  • "</div>"
  • "</div>"
  • "<div style='height: 1200px;'></div>"
  • "</div>";
    return html;
    }
    function ajaxLoadingInit(msg) {
    var loadingDiv = getLoadingHtml(msg);
    var h = $(document).height();
    $(".overlay").css({"height": h});
    var div = $("body").find("#loadingDiv");
    div.remove();
    $("body").append($(loadingDiv));
    }
    /**
    * 开始显示loading,在ajax执行之前调用
    * @param msg 操作消息,"加载", "保存", "删除"
    */
    function startLoading(msg) {
    ajaxLoadingInit(msg);
    $(".overlay").css({'display':'block','opacity':'0.8'});
    $(".showbox").stop(true).animate({'margin-top':'300px','opacity':'1'},200);
    }
    /**
    * 加载完成后隐藏,在ajax执行完成后(complete)调用
    */
    function endLoading() {
    $(".showbox").stop(true).animate({'margin-top':'250px','opacity':'0'},400);
    $(".overlay").css({'display':'none','opacity':'0'});
    }

<img id="progressImgage" class="progress" style="display:none" alt="" src="/ajax-loader.gif"/>
<div id="maskOfProgressImage" class="mask" style="display:none"></div>

3、调用例子:

本文由u赢电竞手机版发布于u赢电竞竞猜app,转载请注明出处:jquery animate实现鼠标放上去显示离开隐藏效果u赢

关键词: