日期:2014-05-16  浏览次数:20290 次

javascript-特效

?

事件

<body onmousedown="show_coords(event)">

function show_coords(ev){

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

}

?

遮罩滚动层

<html>

<head>

<script language="javascript" type="text/javascript" >

? ? 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>?

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body >

? ? <div id="content">

? ? ? ? ? ?<input type="button" value="OK" id="btnOK" onclick="StartGO()"/> <br>

? ? ? ? ? ?大家好!<br>

? ? ? ? ? ?底部有数字内容!

? ? ? ? ? ?滚动遮罩层

? ? ? ? ? ?指定遮罩层

? ? ? ?</div>

? ? <div style="margin-top:1000px">123</div>

</body>

</html>

?

js层:

<html>

? ? ? ? <head>

<script language="javascript" type="text/javascript">

? ? ? ? ? ? ? ? function openFloat(obj) {

?

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

?

? ? ? ? ? ? ? ? ? ? ? ? floatArea = document.getElementById("ok");

?

? ? ? ? ? ? ? ? ? ? ? ? var leftpos = 0,toppos = 0;

? ? ? ? ? ? ? ? ? ? ? ?