61、桌面图标的排列

61、桌面图标的排列

脚本说明:

第一步:把如下代码加入<body>区域中

<script>

//桌面图标距离与菜单效果

ico_top=10;

ico_left=10;

ico_bottom=30;

ico_x=65;

ico_y=65;

function setico()

{

/*Haiwa@20:45 2002-8-26*/

divCount = document.all.ico.all.tags("DIV");

for (i=0; i<divCount.length; i++) {

obj = divCount(i);

win_y=document.body.clientHeight-ico_top-ico_bottom;//图标的纵坐标范围

n=Math.round(win_y/ico_y);//每列可排列的个数

num=i+1;

if (n!=0){

l=Math.round(num/n+0.49);//图标的列数

numy=i-n*l+n;//在每一列中图标的序数

obj.style.left=l*ico_x-ico_x+ico_left;

obj.style.top=numy*ico_y+ico_top;

}

}

}

</script>

<style>

div{font-size:12px}

.icon{position: absolute; top: -100; left: -100; width: 56; height: 45;font-family:Tahoma;color:#FFFFFF}

</style>

<div id=ico>

<!-- 桌面图标 -->

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">0</font>

<br>My Folder</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">1</font>

<br>Open Folder</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">2</font>

<br>My Text</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">3</font>

<br>My Word</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">4</font>

<br>My Folder</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">5</font>

<br>My Folder</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">6</font>

<br>Waiting</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">7</font>

<br>Typer</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">8</font>

<br>Mouse</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">9</font>

<br>My Folder</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">)</font>

<br>My Folder</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">!</font>

<br>My Folder</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">@</font>

<br>My Folder</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">#</font>

<br>My Folder</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">$</font>

<br>My Folder</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">%</font>

<br>My Folder</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">^</font>

<br>My Folder</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">&</font>

<br>My Book</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">*</font>

<br>My Mail</p></div>

 

<div id="ico1" class=icon><p align="center">

<font face="Wingdings" style="font-size:32px">(</font>

<br>My Phone</p></div>

 

</div>

<script>setico();</script>

 

 

第二步:把<body>中的内容改为:

<body onresize=setico(); onselectstart="return false" onload="setico();" bgcolor="#336699">

 

Write a comment

Comments: 0