老项目page跳转增加loading效果-jquery impromptu
上次是自己写的js来实现loading页面,这次很简单,直接使用jquery的一个插件来完成:
可以从http://trentrichardson.com/Impromptu/index.php下载jquery-impromptu.min.js
使用上,直接这样:
var msg = '<img src="images/loading_animation.gif"/><div align="center">Loading...</div>' $.prompt(msg,{buttons:{}});
效果如下:
我这里用的是jquery-impromptu网上demo自带的css,如下:
/* ------------------------------ Impromptu's ------------------------------ */ .jqifade{ position: absolute; background-color: #aaaaaa; } div.jqi{ width: 400px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; position: absolute; background-color: #ffffff; font-size: 11px; text-align: left; border: solid 1px #eeeeee; /* border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; */ padding: 7px; } div.jqi .jqicontainer{ font-weight: bold; } div.jqi .jqiclose{ position: absolute; top: 4px; right: -2px; width: 18px; cursor: default; color: #bbbbbb; font-weight: bold; } div.jqi .jqimessage{ padding: 10px; line-height: 20px; color: #444444; } div.jqi .jqibuttons{ text-align: right; padding: 5px 0 5px 0; border: solid 1px #eeeeee; background-color: #f4f4f4; } div.jqi button{ padding: 3px 10px; margin: 0 10px; background-color: #2F6073; border: solid 1px #f4f4f4; color: #ffffff; font-weight: bold; font-size: 12px; } div.jqi button:hover{ background-color: #728A8C; } div.jqi button.jqidefaultbutton{ /*background-color: #8DC05B;*/ /*background-color: #BF5E26;*/ background-color: #BACCE4; } .jqiwarning .jqi .jqibuttons{ background-color: #BF5E26; }