87,993
社区成员
发帖
与我相关
我的任务
分享JS 多个元素位置变换
<html>
<head>
<title>太空旅行</title>
<style type="text/css">
.star{
position:absolute;
visibility:visible;
top:50px;
width:50px;
height:50px;
font-size:1px;
background:white;
}
</style>
<script type="text/javascript">
var starnum=75;
var xoFFset,yoFFset,w_x,w_y,tmpx,tmpy,scrlx,scrly;
function getstartpos(n)//定义星星的初始位置
{
var obj=document.getElementById(n).style;
obj.deltay=Math.floor(Math.random()*10);
obj.deltax=Math.floor(Math.random()*10);
obj.xdir=(Math.floor(Math.random()*2)==1)? "+":"-";
obj.ydir=(Math.floor(Math.random()*2)==1)? "+":"-";
obj.counter=1;
obj.width=5;
obj.height=5;
obj.pixelTOP=yoFFset+document.body.scrollTop;
obj.pixelLeft=xoFFset+document.body.scrollLeft;
}
function movestar(n)
{
var starN=document.getElementById(n).style;
tmpx=starN.deltax*starN.counter+starN.counter;
tmpy=starN.deltay*starN.counter+starN.counter;
starN.width=starN.counter/3;
starN.height=starN.counter/3;
scrlx=document.body.scrollLeft;
scrly=document.body.scrollTop;
if((starN.pixelLeft+tmpx>=w_x+scrlx)|| (starN.pixelTop+tmpy>=w_y+scrly)|| (starN.pixelLeft-tmpx<=scrlx) || (starN.pixelTOP-tmpy<=scrly))
{
getstartpos(starN);
}
else
{
starN.top=tmpy;
starN.left=tmpx;
}
starN.counter++;
}
function animate()
{
for(i=1;i<=starnum;i++)
{
movestar("star"+i);
}
setTimeout("animate()",100);
}
function findwindowparams()
{
w_x=document.body.clientWidth;
w_y=document.body.clientHeight;
xoFFset=w_x/2;
yoFFset=w_y/2;
for(i=1;i<=starnum;i++)
{
getstartpos("star"+i);
}
}
window.onresize=findwindowparams;
window.onload=function start()
{
findwindowparams();
animate();
}
</script>
</head>
<body bgColor="#999999">
</body>
<script type="text/javascript">
for(i=1;i<=starnum;i++)
{
document.writeln("<div class='star' id='star"+i+"' ></div>");
}
</script>
</html>
getstartpos()函数设置的style 属性什么意思啊？网上查也没有这么用的
<head>
<title>太空旅行</title>
<style type="text/css">
.star{
position:absolute;
visibility:visible;
top:50px;
width:50px;
height:50px;
font-size:1px;
background:white;
}
</style>
<script type="text/javascript">
var starnum=75;
var xoFFset,yoFFset,w_x,w_y,tmpx,tmpy,scrlx,scrly;
function getstartpos(n)//定义星星的初始位置
{
var obj=document.getElementById(n).style;
obj.deltay=Math.floor(Math.random()*10);
obj.deltax=Math.floor(Math.random()*10);
obj.xdir=(Math.floor(Math.random()*2)==1)? "+":"-";
obj.ydir=(Math.floor(Math.random()*2)==1)? "+":"-";
obj.counter=1;
obj.width=5;
obj.height=5;
obj.pixelTOP=yoFFset+document.body.scrollTop;
obj.pixelLeft=xoFFset+document.body.scrollLeft;
}
function movestar(n)
{
var starN=document.getElementById(n).style;
tmpx=starN.deltax*starN.counter+starN.counter;
tmpy=starN.deltay*starN.counter+starN.counter;
starN.width=starN.counter/3;
starN.height=starN.counter/3;
scrlx=document.body.scrollLeft;
scrly=document.body.scrollTop;
if((starN.pixelLeft+tmpx>=w_x+scrlx)|| (starN.pixelTop+tmpy>=w_y+scrly)|| (starN.pixelLeft-tmpx<=scrlx) || (starN.pixelTOP-tmpy<=scrly))
{
getstartpos(starN);
}
else
{
starN.top=tmpy;
starN.left=tmpx;
}
starN.counter++;
}
function animate()
{
for(i=1;i<=starnum;i++)
{
movestar("star"+i);
}
setTimeout("animate()",100);
}
function findwindowparams()
{
w_x=document.body.clientWidth;
w_y=document.body.clientHeight;
xoFFset=w_x/2;
yoFFset=w_y/2;
for(i=1;i<=starnum;i++)
{
getstartpos("star"+i);
}
}
window.onresize=findwindowparams;
window.onload=function start()
{
findwindowparams();
animate();
}
</script>
</head>
<body bgColor="#999999">
</body>
<script type="text/javascript">
for(i=1;i<=starnum;i++)
{
document.writeln("<div class='star' id='star"+i+"' ></div>");
}
</script>
</html>
getstartpos()函数设置的style 属性什么意思啊？网上查也没有这么用的
...全文
请发表友善的回复…
发表回复
Any_King 2017-11-07
- 打赏
- 举报
怪不得在不同的浏览器上值和效果不一样。这样的话就不多花时间搞懂了。
天际的海浪 2017-11-05
- 打赏
- 举报
w3c网站上没有的属性当然都是不符合w3c标准的啊，那些大都是老版本IE所独有的属性，在新版本IE11和别的浏览器都不支持的。
Any_King 2017-11-05
- 打赏
- 举报
我之前也在w3c上找过没找见，版主大大能具体说一下在哪吗？
斯洛文尼亚旅游 2017-11-02
- 打赏
- 举报
http://www.w3school.com.cn/jsref/dom_obj_style.asp
Web开发学习资料推荐
Web前端开发教程
jquery attr prop 区别
Web开发学习资料推荐
Web前端开发教程
jquery attr prop 区别
