广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    javascript获取页面鼠标光标位置

    2018-04-16 10:56:46 次阅读 稿源:互联网
    广告
    function mousePosition(evt){if(evt.pageX || evt.pageY){return {x:evt.pageX,y:evt.pageY};}return {x:evt.clientX + document.body.scrollLeft - document.body.clientLeft,y:evt.clientY + document.body.scrollTop - document.body.clientTop};}function mouseMove(evt){var e = evt || window.event;var m = mousePosition(evt);document.getElementById('xx').value= m.x;document.getElementById('yy').value= m.y;}// document.onmousemove = mouseMove;document.onmousemove = function(e){var e = e || window.event;var m = mousePosition(e);document.getElementById('xx').value= m.x;document.getElementById('yy').value= m.y;}</script><input id="xx" type="text"/><input id="yy" type="text"/>

    在线演示

    假如使用的是jquery的话,则直接使用jQuery的e.pageX和e.pageY则行,里面已经封装好了。

    最近的一个项目用到了这个JS,需要判断鼠标光标是否移入了某个块的区域,当进入时,则停止循环滚动,当出来时,则继续滚动

    //两秒后调用var dteamPos = $(".dteam-con-pos");var dteamList = $("#dteamList");function AutoScroll(){ //循环向左滚动var _scroll = $("#firstDteam > ul");//ul往左边移动200px_scroll.filter(':not(:animated)').animate({marginLeft:"-200px"},1000,function(){//把第一个li丢最后面去_scroll.css({marginLeft:0}).find("li:first").appendTo(_scroll);});var _scroll2 = $("#secondDteam > ul");//ul往左边移动200px_scroll2.filter(':not(:animated)').animate({marginLeft:"-200px"},1000,function(){//把第一个li丢最后面去_scroll2.css({marginLeft:0}).find("li:first").appendTo(_scroll2);});var _scroll3 = $("#thirdDteam > ul");//ul往左边移动200px_scroll3.filter(':not(:animated)').animate({marginLeft:"-200px"},1000,function(){//把第一个li丢最后面去_scroll3.css({marginLeft:0}).find("li:first").appendTo(_scroll3);});}var flag = 1;var _scrolling;if(flag == 1){_scrolling=setInterval(AutoScroll,2000);}var index;$(".dteam-con").mouseover(function(e){// e.stopPropagation();var x = 10;var y = 10;var self = $(this);var _html = self.html();dteamPos.html('');dteamPos.html(_html);if(dteamPos.html() != ''){clearInterval(_scrolling);}var dteamLeft = self.offset().left - x;var dteamTop = self.offset().top - y;dteamPos.css({top:dteamTop,left:dteamLeft,display:"block"})});var dteamList = $('#dteamList"), dteamPost = $(".dteamPos"), dteamListTop, dteamlistHeight, dteamlistBottom;function resetPos(evt){dteamListTop = dteamList.offset().top;dteamlistHeight = dteamList.height();dteamlistBottom = parseInt(dteamListTop + dteamlistHeight);if((evt.pageY <dteamListTop) || (evt.pageY > dteamlistBottom)){if(dteamPos.html() != ''){dteamPos.html('');dteamPos.hide();_scrolling=setInterval(AutoScroll,2000);}}}$(document).mousemove(function(e){// e.stopPropagation();resetPos(e);});$(window).on("resize",function(e){resetPos(e);})

    代码各种复杂

    一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。

    广告
    广告
    广告