0

我想要实现的目标是，如果窗口大小大于 400，#box2颜色变为黑色（当 onhover on 时#box1），如果小于 400，#box2颜色变为黄色。

我以为我完成了这个任务，但是我发现我总是需要刷新页面才能看到效果。一旦窗口大小发生变化，jQuery 就不会立即工作。

我是否需要使用 ajax 或其他东西来使 jQuery 响应工作？

在线示例：http: //jsfiddle.net/dFbXr/

这是我的代码

HTML:
    <div id="box1">
        <div id="box2"></div>
    </div>

jQuery:
    function colorchange(){
     if($(window).width() > 400){
        $("#box1").mouseover(function(){
        $("#box2").css('background','black');
         }).mouseout(function(){
             $("#box2").css('background','blue');
     });
      }else{
     $("#box1").mouseover(function(){
     $("#box2").css('background','yellow');
    }).mouseout(function(){
          $("#box2").css('background','blue');
    });
    }
    }      

    colorchange();

CSS:
    #box1{
        display: block;
        background:red;
        background-size: 100%;
        position: relative;
        padding-bottom: 60%;
    }

    #box2{
        display:block;
        background:blue;
        position:absolute;
        height:70px;
        width:70px;
        right:50%;
        top:50%;
        margin: -35px -35px 0 0;
      }
4

3 回答 3

3

您需要colorchange()在页面首次加载和调整窗口大小时调用您的函数。有一个“调整大小”事件，您可以使用如下代码处理：

$(window).on("resize",colorchange);

请注意，colorchange它作为参数传递给不带括号的.on()函数 ，即not 。没有括号传递对函数的引用，带括号立即调用函数并传递其结果。colorchangecolorchange()

演示：http: //jsfiddle.net/dFbXr/1/

您提到了 Ajax，但 Ajax 与手头的问题完全无关：它用于从 Web 服务器发送和/或接收数据，而无需重新加载整个页面。

于 2013-03-04T21:21:52.817 回答
1

您只调用该colorchange()函数一次——您需要在调整窗口大小时再次调用它，否则它只会通过您的 if-else 一次。

您需要将此 jQuery 添加到您的代码中：

$(window).on("resize",colorchange);
于 2013-03-04T21:23:17.030 回答
0

如果您只支持CSS3浏览器并且不想依赖 JavaScript，则可以使用媒体查询来实现相同的目的，方法是更改:hover​​按屏幕大小的效果。

这是一个简单的例子：http: //jsfiddle.net/dFbXr/2/

于 2013-03-04T21:28:19.147 回答