[Js]跟随鼠标移动的div

例子:鼠标移动到一块东西上,出现提示文本框,并且提示文本框跟着鼠标的位置动

document.οnmοuseοver=function(ev){

    var oEvent=ev||event;

    var box=document.getElementById("box");

    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;        //前面是兼容非谷歌浏览器,后面是兼容谷歌浏览器

    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

    box.style.top=oEvent.clientX+scrollTop+'px';     //clientX,clientY是可视区的距离,一般来说用到clientX,clientY,就一定要加滚动距离

    box.style.left=oEvent.clientY+scrollLeft+'px';

}

 

延伸例子:鼠标移动,一串小东西跟着动

分析:一堆div在同一个位置,后面一个div跟着前面一个div动,第一个div跟着鼠标动

window.οnlοad=function(){

    var div=document.getElementsByTagName("div");

    var i;

    document.οnmοusemοve=function(ev){

        var oEvent=ev||event;

        for(i=div.length-1;i>0;i--){

            div[i].style.left=div[i-1].style.left;

            div[i].style.top=div[i-1].style.top;

        }

        div[0].style.left=oEvent.clientX+'px';

        div[0].style.top=oEvent.clientY+'px';  

    };

}

转载于:https://www.cnblogs.com/zhangwenkan/p/3591962.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值