2 
$(window).mousemove(function(e) {

   if(e.pageX > $(this).width()/2) {
       console.log('im on right');
    }else {
        console.log('im on left');
    }

});

简单明了，它可以工作，但是当：

$(window).mousemove(function(e) {

   if(e.pageX > $(this).width()/2) {
       $(this).addClass('horizontal');
    }else {
       $(this).addClass('vertical');
    }

});

它不起作用（没有任何变化），我错过了什么吗？

就此而言的CSS：

.horizontal { cursor: w-resize; }
.vertical { cursor: n-resize; }
4

4 回答 4

2

您正在向对象添加一个类Window。Window 对象没有等效的 HTML 元素，因此您不能对其应用 CSS。相反，您应该使用HTML标签或BODY标签。

IE

$('html').addClass('class');

第二个问题是您正在添加类而不删除其他类。一旦用户将鼠标移动到屏幕的两侧DOM，您应用 的对象CSS将具有两个类，两者.horizontal和.vertical。要解决此问题，请使用removeClass().

IE

$('html').mousemove(function(e) {

   if(e.pageX > $('html').width()/2) {
       $('html').removeClass('vertical');
       $('html').addClass('horizontal');
   } else {
       $('html').removeClass('horizontal');
       $('html').addClass('vertical');
   }

});

编辑：

默认情况下，FireFox'HTML元素的尺寸不等于浏览器Window。由于mousemove事件在HTML元素上，所以只会在页面有内容的区域触发。要解决此问题，请让HTML元素填满整个屏幕，而不管内容如何。

html {
   width: 100%;
   height: 100%;
}
于 2013-04-13T17:55:20.683 回答
1

在 Firefox 上工作的jsFiddle 演示

这可能是因为一旦添加您就不会删除类

看看这个作品是否适合你

if(e.pageX > $(this).width()/2) {
       $('body').addClass('horizontal');
       $('body').removeClass('vertical');
 }else {
       $('body').removeClass('horizontal');
       $('body').addClass('vertical');
 }

正如adeneo所指出的那样，我使用$('body')而不是$(this)您添加类window

于 2013-04-13T17:50:37.803 回答
1

您不能将类添加到窗口。因此替换this为body.

$(window).mousemove(function(e) {

   if(e.pageX > $(this).width()/2) {
       $('body').addClass('horizontal');
    }else {
       $('body').addClass('vertical');
    }

});
于 2013-04-13T17:53:30.140 回答
0

我可能错了，但您上面的代码看起来像是在尝试添加window我认为不可能的类。试试这个-：

$(window).mousemove(function(e) {
   $this = $('body');
   if(e.pageX > $(this).width()/2) {
       $this.addClass('horizontal');
    }else {
       $this.addClass('vertical');
    }
});
于 2013-04-13T17:50:29.453 回答