zoukankan      html  css  js  c++  java
  • [Js]跟随鼠标移动的div

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

    document.onmouseover=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.onload=function(){

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

        var i;

        document.onmousemove=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';  

        };

    }

  • 相关阅读:
    【NOIP2006T】作业调度方案
    「NOIP2012P」寻宝
    51Nod1084 矩阵取数问题 V2
    51Nod1294 修改数组
    51nod1122 机器人走方格V4
    多项式相关模板#1
    51Nod1514 美妙的序列
    Jzoj5674 香槟
    Jzoj5669 排列
    Jzoj5665 奥立卡的诗
  • 原文地址:https://www.cnblogs.com/zhangwenkan/p/3591962.html
Copyright © 2011-2022 走看看