＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞     ＜html ＞
    ＜head＞
    ＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" /＞
    ＜title＞jquery鼠标跟随效果＜/title＞
    ＜script type="text/javascript" src="jquery-1.4.2.min.js"＞＜/script＞     ＜div id="wrap" ＞       ＜div ＞
        ＜div class="mainbox"＞＜/div＞
        ＜div class="mainbox"＞＜/div＞
        ＜div class="mainbox"＞＜/div＞
        ＜div class="mainbox"＞＜/div＞
        ＜div class="mainbox"＞＜/div＞
      ＜/div＞       ＜div ＞
        ＜div class="mainbox"＞＜/div＞
        ＜div class="mainbox"＞＜/div＞
        ＜div class="mainbox"＞＜/div＞
        ＜div class="mainbox"＞＜/div＞
        ＜div class="mainbox"＞＜/div＞
      ＜/div＞       ＜div ＞
        ＜div class="mainbox"＞＜/div＞
        ＜div class="mainbox"＞＜/div＞
        ＜div class="mainbox"＞＜/div＞
        ＜div class="mainbox"＞＜/div＞
        ＜div class="mainbox"＞＜/div＞
      ＜/div＞
    ＜/div＞     ＜div ＞＜/div＞
    ＜br /＞
    ＜br /＞
    ＜br /＞
    ＜br /＞
    ＜br /＞
    ＜p id="float"＞数据读取中...＜br /＞数据读取中...＜br /＞数据读取中...＜br /＞数据读取中...＜br /＞数据读取中...＜br /＞数据读取中...＜br /＞数据读取中...＜br /＞数据读取中...＜br /＞数据读取中...＜br /＞数据读取中...＜br /＞数据读取中...＜br /＞数据读取中...＜br /＞＜/p＞
    ＜/body＞
    ＜/html＞
    
    ```
    

     CSS代码：
    
    * {
     margin:0;
     padding:0;
     border:0;
    }
    .mainbox {
     width:150px;
     height:150px;
     background:#333;
     float:left;
     margin-right:30px;
    }
    #float {
     border:1px solid #333;
     background:#999;
     padding:10px;
     position:absolute;
     left:0;
     top:0;
     z-index:9999;
     display:none;
    }
    ```
    

     Javascript代码：
    
    ＜script type="text/javascript"＞
    var floatX,floatY,boxX,boxY,pageX,pageY;                      //定义六个变量。
    var cX = document.documentElement.clientWidth;                //网页可见区域宽
    var cY = document.documentElement.clientHeight;               //网页可见区域高
    $(document).ready(function(){ 
    $('#wrap').css({height:cY});          //给Id为wrap的元素添加高度
    //从这里开始
    $('.mainbox').hover(function(){          //给class为mainbox的元素添加鼠标滑动效果。
      $(this).mousemove(function(event){
        pageX = event.clientX + $(window).scrollLeft();        //clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
    
          
        pageY = event.clientY + $(window).scrollTop();             //clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的垂直坐标。
    
    
        boxX = $('#float').outerWidth(true);                       //获取第一个匹配元素外部宽度（默认包括补白和边框）
        boxY = $('#float').outerHeight(true);       //获取第一个匹配元素外部高度（默认包括补白和边框）
        if ((cX - event.clientX) ＜ (boxX + 35)){
          floatX = pageX - boxX - 15;
        }else{
          floatX = pageX + 15;
        }
        if ((cY - event.clientY) ＜ (boxY + 10)){
          floatY = pageY - boxY - 10;
        }else{
          floatY = pageY + 10;
        } 
        $('#float').css({top: floatY, left: floatX});
        $('#float').show();
      });
    },function(){
      $('#float').hide();
    })
    $(window).resize(function() {                                 //当窗口改变大小时触发的函数
      cX = document.documentElement.clientWidth;
      cY = document.documentElement.clientHeight;
      });
    })
    ```


jquery div 跟随 鼠标 效果 实现 ie firefox chrome safari