javascript 跟踪效果

lmh2072005

浏览: 113815 次
性别:
来自: 深圳

最近访客更多访客>>

Hmily25

luyueyue

lalalalalsa

CvShrimp

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js
css
js DOM

javascript 跟踪

<!DOCTYPE HTML>
<html>
<head>
<title> trails </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
*{margin:0;padding:0;}
.box{
    position:absolute;
    border:1px solid #000;
    border-radius:5px;
    color:green;
    width:10px;
    height:10px;
    line-height:3px;
    text-indent:3px;
    text-align:center;
}
</style>
</head>

<body>
    <div id="box" style="left:100px;top:100px;" class="box">.</div>
    <div id="box1" style="left:300px;top:400px;" class="box">.</div>
    <div id="box2" style="left:500px;top:500px;" class="box">.</div>
<script>
    function tracker(obj){
        this.aim = obj.aim || 'mouse'; //目标默认为鼠标
        this.aimLeft = 0; //表示当前目标的位置
        this.aimTop = 0;
        this.trailsman = obj.trails; //跟踪者
        this.trailsLeft = parseInt(this.trailsman.style.left,10); //表示当前跟踪者的位置
        this.trailsTop = parseInt(this.trailsman.style.top,10);
        this.setPos = function(){
            var dis = Math.sqrt(Math.pow((this.aimLeft-this.trailsLeft), 2) + Math.pow((this.aimTop - this.trailsTop), 2)),
                angleX = (this.aimLeft-this.trailsLeft)/dis,
                angleY = (this.aimTop - this.trailsTop)/dis,
                speed = obj.speed || 2,
                speedX = speed * angleX,
                speedY = speed * angleY;
            this.trailsLeft += speedX;
            this.trailsTop += speedY;
            this.trailsman.style.left = this.trailsLeft + 'px';
            this.trailsman.style.top = this.trailsTop + 'px';
        }

    }
    var box = document.getElementById('box');
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    var eg = [box,box1,box2];
    for(var i = 0,j = eg.length;i < j;i++){
        (function(i){
            eg[i] = new tracker({
                trails:eg[i]
            });
            if(eg[i].aim == 'mouse'){
                addEvent(document,"mousemove",function(e){
                    eg[i].aimLeft = getMos(e).x, //表示当前目标的位置
                    eg[i].aimTop = getMos(e).y;
                });
            }
            setInterval(function(){eg[i].setPos();},10); //设置跟踪者的位置
        })(i)

    }
    function addEvent(obj,type,fn){
        if(obj.attachEvent){
            obj.attachEvent("on"+type,fn);
        }else if(obj.addEventListener){
            obj.addEventListener(type,fn,false);
        }
    }
    function getMos(e){
        var x = y = 0,
            e = e || window.event,
            doc = document.documentElement || document.body;
        if(e.pageX){
            x = e.pageX;
            y = e.pageY;
        }else{
            x = e.clientX + doc.scrollLeft - doc.clientLeft;
            y = e.clientY + doc.scrollTop - doc.clientTop;
        }
        return {x:x,y:y};
    }
</script>
</body>
</html>

setPos.rar (1.2 KB)
下载次数: 1

分享到：

记录下用到的treecombobox | iframe编辑器1

2012-03-21 14:06
浏览 1051
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论