60、跟随鼠标旋转的星星
类别: JavaScript教程 
====1、将以下代码加入HTML的<HEAD></HEAD>之间：
<script>
<!-- Beginning of JavaScript -
var x,y
var step=5
var flag=1
var pause
var timersmall
var timerbig
var isbigcircle=1
var pause=50
var bigradius
var smallradius=50
var startwinkel=1
var imgnumber=12
var imgsrc="xingxing.gif" //显示的图片
var xcenter
var xcenter
var pi= Math.PI
function onresizer() {
clearTimeout(timerbig)
clearTimeout(timersmall)
initiate()
}
function initiate() {
var initiatetimer=setTimeout("initiate2()",2000)
}
function initiate2() {
if (document.layers) {
xcenter=Math.floor(screen.width/2)
ycenter=Math.floor(window.innerHeight/2)
}
if (document.all) {
xcenter=Math.floor(document.body.clientWidth/2)
ycenter=Math.floor(document.body.clientHeight/2)
}
bigradius=ycenter
bigcircle()
}
function handlerMM(e){
x = (document.layers) ? e.pageX : event.clientX
y = (document.layers) ? e.pageY : event.clientY
flag=1
}
function bigcircle() {
if (isbigcircle==1) {
if (document.all) {
for (i=1; i<=imgnumber; i++) {
var thisspan = eval("document.all.span"+(i)+".style")
thisspan.posLeft=((xcenter-20)*Math.cos(startwinkel*(pi/180)))+xcenter
thisspan.posTop=((ycenter-20)*Math.sin(startwinkel*(pi/180)))+ycenter
startwinkel=startwinkel+30
}
}
if (document.layers) {
for (i=1; i<=imgnumber; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=((xcenter-150)*Math.cos(startwinkel*(pi/180)))+(xcenter-145)
thisspan.top=((ycenter-20)*Math.sin(startwinkel*(pi/180)))+ycenter
startwinkel=startwinkel+30
}
}
step=step+5
startwinkel=step
timerbig=setTimeout("bigcircle()",pause)
}
else {
isbigcircle=0
clearTimeout(timerbig)
}
}
function presmallcircle() {
isbigcircle=0
clearTimeout(timerbig)
smallcircle()
}
function prebigcircle() {
isbigcircle=1
clearTimeout(timersmall)
bigcircle()
}
function smallcircle() {
if (isbigcircle==0) {
if (document.all) {
for (i=1; i<=imgnumber; i++) {
var thisspan = eval("document.all.span"+(i)+".style")
thisspan.posLeft=(smallradius*Math.cos(startwinkel*(pi/180)))+x
thisspan.posTop=(smallradius*Math.sin(startwinkel*(pi/180)))+y
startwinkel=startwinkel+30
}
}
if (document.layers) {
for (i=1; i<=imgnumber; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=(smallradius*Math.cos(startwinkel*(pi/180)))+x
thisspan.top=(smallradius*Math.sin(startwinkel*(pi/180)))+y
startwinkel=startwinkel+30
}
}
step=step+5
startwinkel=step
timersmall=setTimeout("smallcircle()",pause)
}
else {
isbigcircle=0
clearTimeout(timersmall)
}
}
window.onoad=initiate()
// - End of JavaScript - -->
</script>
<style>
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
font-family:Verdana;
color:FF0000
}
.explain {
position:absolute;
top:40px;
left:10px;
width:560px;
color: 000000;
text-align:center;
font-size:9pt;
font-family:Arial;
font-weight:bold;
}
A { font-family: Arial,Helvetica,sans-serif;
color: #000000;
text-decoration:underline
}
A:visited {
color: #000000;
}
</style>
====2、将以下代码加入HTML的<BODY></BODY>之间：
<script>
<!-- Beginning of JavaScript -
for (i=1;i<=imgnumber;i++) {
document.write("<span id=\'span"+i+"\' class=\'spanstyle\'>")
document.write("<img src=\'"+imgsrc+"\'>")
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
document.onresize = onresizer;
// - End of JavaScript - -->
</script>
<div id="source" class="explain"><a href="http://www.4ico.com"
target="_blank" onMouseOver="presmallcircle()" onMouseOut="prebigcircle()">
<p>把鼠标指向这个连接看一下是不是很棒的效果！换成你自己的图片就行了。</a></p></div>
<script>
<!-- Beginning of JavaScript -
var x,y
var step=5
var flag=1
var pause
var timersmall
var timerbig
var isbigcircle=1
var pause=50
var bigradius
var smallradius=50
var startwinkel=1
var imgnumber=12
var imgsrc="xingxing.gif" //显示的图片
var xcenter
var xcenter
var pi= Math.PI
function onresizer() {
clearTimeout(timerbig)
clearTimeout(timersmall)
initiate()
}
function initiate() {
var initiatetimer=setTimeout("initiate2()",2000)
}
function initiate2() {
if (document.layers) {
xcenter=Math.floor(screen.width/2)
ycenter=Math.floor(window.innerHeight/2)
}
if (document.all) {
xcenter=Math.floor(document.body.clientWidth/2)
ycenter=Math.floor(document.body.clientHeight/2)
}
bigradius=ycenter
bigcircle()
}
function handlerMM(e){
x = (document.layers) ? e.pageX : event.clientX
y = (document.layers) ? e.pageY : event.clientY
flag=1
}
function bigcircle() {
if (isbigcircle==1) {
if (document.all) {
for (i=1; i<=imgnumber; i++) {
var thisspan = eval("document.all.span"+(i)+".style")
thisspan.posLeft=((xcenter-20)*Math.cos(startwinkel*(pi/180)))+xcenter
thisspan.posTop=((ycenter-20)*Math.sin(startwinkel*(pi/180)))+ycenter
startwinkel=startwinkel+30
}
}
if (document.layers) {
for (i=1; i<=imgnumber; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=((xcenter-150)*Math.cos(startwinkel*(pi/180)))+(xcenter-145)
thisspan.top=((ycenter-20)*Math.sin(startwinkel*(pi/180)))+ycenter
startwinkel=startwinkel+30
}
}
step=step+5
startwinkel=step
timerbig=setTimeout("bigcircle()",pause)
}
else {
isbigcircle=0
clearTimeout(timerbig)
}
}
function presmallcircle() {
isbigcircle=0
clearTimeout(timerbig)
smallcircle()
}
function prebigcircle() {
isbigcircle=1
clearTimeout(timersmall)
bigcircle()
}
function smallcircle() {
if (isbigcircle==0) {
if (document.all) {
for (i=1; i<=imgnumber; i++) {
var thisspan = eval("document.all.span"+(i)+".style")
thisspan.posLeft=(smallradius*Math.cos(startwinkel*(pi/180)))+x
thisspan.posTop=(smallradius*Math.sin(startwinkel*(pi/180)))+y
startwinkel=startwinkel+30
}
}
if (document.layers) {
for (i=1; i<=imgnumber; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=(smallradius*Math.cos(startwinkel*(pi/180)))+x
thisspan.top=(smallradius*Math.sin(startwinkel*(pi/180)))+y
startwinkel=startwinkel+30
}
}
step=step+5
startwinkel=step
timersmall=setTimeout("smallcircle()",pause)
}
else {
isbigcircle=0
clearTimeout(timersmall)
}
}
window.onoad=initiate()
// - End of JavaScript - -->
</script>
<style>
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
font-family:Verdana;
color:FF0000
}
.explain {
position:absolute;
top:40px;
left:10px;
width:560px;
color: 000000;
text-align:center;
font-size:9pt;
font-family:Arial;
font-weight:bold;
}
A { font-family: Arial,Helvetica,sans-serif;
color: #000000;
text-decoration:underline
}
A:visited {
color: #000000;
}
</style>
====2、将以下代码加入HTML的<BODY></BODY>之间：
<script>
<!-- Beginning of JavaScript -
for (i=1;i<=imgnumber;i++) {
document.write("<span id=\'span"+i+"\' class=\'spanstyle\'>")
document.write("<img src=\'"+imgsrc+"\'>")
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
document.onresize = onresizer;
// - End of JavaScript - -->
</script>
<div id="source" class="explain"><a href="http://www.4ico.com"
target="_blank" onMouseOver="presmallcircle()" onMouseOut="prebigcircle()">
<p>把鼠标指向这个连接看一下是不是很棒的效果！换成你自己的图片就行了。</a></p></div>
- 上一篇: 59、跟随鼠标的十字架
- 下一篇: 61、渐县显播放文字
