位置 : 首页 > 经验分享 > JQUERY > Jquery 获取鼠标位置坐标

Jquery 获取鼠标位置坐标

时间:2018-05-05   收藏
//计算坐标函数 var Mouse = function(e){ mouse = new MouseEvent(e); leftpos = mouse.x + divoffset; toppos = mouse.y + divoffset; } //获取鼠标坐标函数

Jquery 获取鼠标位置坐标

var divoffset = 10;    //显示层离鼠标的距离

        $(document).ready(function(){
                var tooltip = $("#tooltip");//获取显示层

                var toolContent = $("#toolContent");//获取显示内容层

                $('#thumbs > li').bind('mouseover',function(e){//查找a对象,并给对象创建onmouseover事件--这里可以替换成其他的如:div($('div').bind()),ul下的 li $('ul > li').bind()
                    Mouse(e);//计算显示层的位置
                    toolContent.html("<li>显示内容</li>");//显示内容--PS:自己改成动态获取
                    tooltip.css({ top: toppos ,left: leftpos  });//给显示层定义CSS--当前计算出的位置
                    tooltip.stopAll().pause(300).fadeTo(200,1);//显示效果
                }).bind('mousemove',function(e){//给对象创建mousemove事件
                    Mouse(e);//计算显示层的位置
                    tooltip.css({ top: toppos ,left: leftpos  });//给显示层定义CSS--当前计算出的位置--随时改变位置
                }).bind('mouseout',function(){//给对象创建mouseout事件
                    tooltip.stopAll().fadeTo(500,0, function(){$(this).hide();});//隐藏效果
                });
        });

        //计算坐标函数
        var Mouse = function(e){
            mouse = new MouseEvent(e);
            leftpos = mouse.x + divoffset;
            toppos = mouse.y + divoffset;
        }
        //获取鼠标坐标函数
        var MouseEvent = function(e) {
            this.x = e.pageX
            this.y = e.pageY
        }


keywords: Jquery 鼠标位置坐标


    浏览排行榜
    最新文字信息
返回顶部 关注新浪微博 关注腾讯微博