Home > Web Front-end > JS Tutorial > Javascript mask layer and loading effect code_javascript skills

Javascript mask layer and loading effect code_javascript skills

WBOY
Release: 2016-05-16 17:27:14
Original
977 people have browsed it
Copy code The code is as follows:

//loading
function showLoad(tipInfo) {
var iWidth = 120; //The width of the pop-up window;
var iHeight = 0; //The height of the pop-up window;
var scrolltop = 0;
var scrollleft = 0;
var cheight = 0 ;
var cwidth = 0;
var eTip = document.createElement('div');
eTip.setAttribute('id', 'tipDiv');
eTip.style.position = ' absolute';
eTip.style.display = 'none';
eTip.style.border = 'solid 0px #D1D1D1';
eTip.style.backgroundColor = '#4B981D';
eTip .style.padding = '5px 15px';
if(document.body.scrollTop){//This is a js compatible
scrollleft=document.body.scrollLeft;
scrolltop=document.body. scrollTop;
cheight=document.body.clientHeight;
cwidth=document.body.clientWidth;
}
else{
scrollleft=document.documentElement.scrollLeft;
scrolltop=document .documentElement.scrollTop;
cheight=document.documentElement.clientHeight;
cwidth=document.documentElement.clientWidth;
}
iHeight = eTip.offsetHeight;
var v_left=(cwidth-iWidth )/2 scrollleft; //
var v_top=(cheight-iHeight)/2 scrolltop;
eTip.style.left = v_left 'px';
eTip.style.top = v_top 'px';
eTip.innerHTML = '  ' tipInfo '';
try {
document.body.appendChild(eTip);
} catch (e) { }
$("#tipDiv").css( "float", "right");
$("#tipDiv").css("z-index", "99");
$('#tipDiv').show();
ShowMark();
}
function closeLoad() {
$('#tipDiv').hide();
HideMark();
}
//Display mask Gray layer
function ShowMark() {
var xp_mark = document.getElementById("xp_mark");
if (xp_mark != null) {
//Set DIV
xp_mark.style. left = 0 "px";
xp_mark.style.top = 0 "px";
xp_mark.style.position = "absolute";
xp_mark.style.backgroundColor = "#000";
xp_mark.style.zIndex = "1";
if (document.all) {
xp_mark.style.filter = "alpha(opacity=50)";
var Ie_ver = navigator["appVersion" ].substr(22, 1);
if (Ie_ver == 6 || Ie_ver == 5) { hideSelectBoxes(); }
}
else { xp_mark.style.opacity = "0.5"; }
xp_mark.style.width = "100%";
xp_mark.style.height = "100%";
xp_mark.style.display = "block";
}
else {
//Add div explainDiv to the page, note that it must be the first element immediately following the body. Otherwise IE6 will not work properly.
$("body").prepend("");
ShowMark(); //Continue to call back to yourself
}
}
//Hide the gray layer
function HideMark() {
var xp_mark = document.getElementById("xp_mark");
xp_mark.style.display = "none";
var Ie_ver = navigator["appVersion"].substr(22, 1);
if (Ie_ver == 6 || Ie_ver == 5) { showSelectBoxes(); }
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template