码迷,mamicode.com
首页 > Web开发 > 详细

JS跟随鼠标旋转的图片

时间:2015-08-12 01:08:54      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:

<html>
    <head>
    <title>JS跟随鼠标旋转的图片丨Daniel wellington</title>
    <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="/images/7caidy.ico"
    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>
    </head>
    <body bgcolor="#FFFFFF">
    <p align="center"> </p>
    <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" style="left: 111px; top: 143px"><a href="#nogo"
    onMouseOver="presmallcircle()" onMouseOut="prebigcircle()">
    <p>快把鼠标指向这个!看一下是不是很棒的效果!</p>
    </a>
    </div>
    <p><br>
    <br>
    </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p align="center" style="line-height: 20px"><font color="#666666"><span
    style="font-size: 9pt"><br>
    </span></font><span
    style="font-size: 9pt"><br>
    </span></p>
    <span
    style="font-size: 9pt">
    <p align="center" style="line-height: 20px">
    <font face="Arial, Helvetica, sans-serif" color="#666666"></font>  </p>
    </span></body>
    </html>
    <br><br><hr>

 

JS跟随鼠标旋转的图片

标签:

原文地址:http://www.cnblogs.com/youtianxia/p/4722704.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!