javascript-特效

事件

function show_coords(ev){

alert("X 坐标: " + ev.clientX + ", Y 坐标: " + ev.screenX)

}

遮罩滚动层

<html>

<head>

var timerID = 0;//必须的

function StartGO(){

var bgObj0=document.createElement("div");

bgObj0.style.position="absolute";

bgObj0.style.backgroundColor="#eeeeee";

if(document.all){

bgObj0.style.filter = "alpha(opacity=50)";

}else{

bgObj0.style.MozOpacity = 0.5;

bgObj0.style.opacity = 0.5;

}

bgObj0.style.top = "0px";

bgObj0.style.left = "0px";

bgObj0.style.width = "100%"

var s_height=document.body.scrollHeight;

if(s_height<window.screen.availHeight){

s_height=window.screen.availHeight;

}

bgObj0.style.height=s_height+"px"//设置高度

bgObj0.style.zIndex = 1000;

var bgObj=document.createElement("div");

bgObj.style.position="absolute";

bgObj.style.backgroundColor="#ff0000";

bgObj.style.top = "300px";

bgObj.style.left = "300px";

bgObj.style.width = "300px"

bgObj.style.height = "300px"

bgObj.style.zIndex = 1001;

document.body.appendChild(bgObj0);

document.body.appendChild(bgObj);

//关闭按钮//也可以这样写啊？

var c = document.createElement("div");

c.innerHTML = "关闭";

c.style.cssText = "text-decoration:underline; cursor:pointer;";

c.onclick = function(){

document.body.removeChild(bgObj);

document.body.removeChild(bgObj0);

clearInterval(timerID);//clearInterval() 方法可取消由 setInterval() 设置的 timeout。

document.body.scrollTop="0px";

};

bgObj.appendChild(c);

clearInterval(timerID);

//clearInterval() 方法可取消由 setInterval() 设置的 timeout。

timerID = setInterval(function(){move(bgObj);}, 10);

//timerID = setInterval(move,10,bgObj);等效于上面的

alert(timerID);//如果页面不刷新timerID为2,3,4,5递增的

//setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

//setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

}

function move(obj){

if(obj){

obj.style.top = document.body.scrollTop +300+ "px";

}

</script>

<body >

大家好！<br>

底部有数字内容！

滚动遮罩层

指定遮罩层

</div>

</body>

</html>

js层：

<html>

<head>

function openFloat(obj) {

// alert(floatArea+floatArea.offsetLeft+"-"+floatArea.offsetTop); //[object HTMLDivElement]160-262

floatArea = document.getElementById("ok");

var leftpos = 0,toppos = 0;

var pObject = obj.offsetParent;

//if (pObject){

//leftpos += pObject.offsetLeft;

//toppos += pObject.offsetTop;

//alert( pObject+pObject.offsetLeft+"-"+pObject.offsetTop);//[object HTMLBodyElement]0-0

//alert(obj+obj.offsetLeft+"-"+obj.offsetTop); //[object HTMLInputElement]190-292

//}

//alert(leftpos);

while(pObject){//必须的，能否合并于if，用coupon_release.html测试？？？？？？？？？？

leftpos += pObject.offsetLeft;

toppos += pObject.offsetTop;

alert(pObject+leftpos+"-"+pObject.offsetLeft);

pObject = pObject.offsetParent;

}

//alert(0);

//alert(floatArea+floatArea.offsetLeft+"-"+floatArea.offsetTop);//[object HTMLDivElement]160-262

floatArea.style.left = (leftpos) + "px";

alert(floatArea.style.left);

floatArea.style.top = (obj.offsetTop + toppos + obj.offsetHeight - 1) + "px";

//alert(floatArea+floatArea.offsetLeft+"-"+floatArea.offsetTop);//[object HTMLDivElement]190-312

floatArea.innerHTML="<a href='javascript:closeFloat();'>关闭</a><br>test层中表单<br>"

+"<form><input type='text' name='name' id='name'/><br></form>"

floatArea.style.width = "300px";

floatArea.style.height = "300px";

floatArea.style.border = "#ff0000 1px solid";

floatArea.style.background="#eeeeee";

floatArea.style.display = "block";

}

function closeFloat() {

floatArea = document.getElementById("ok");

floatArea.innerHTML = "";

floatArea.style.display = "none";

}

</script>

</head>

<body >

<h1>测试DIV层</h1>

hello,wnj<br>

</div>

</div>

</from>

</body>

</html>

猜你喜欢