如何获取实时窗口宽度并将其应用于div中？

-2

我在我的项目中使用jQuery-1.11.0。我有一个水平菜单，它看起来像滑动菜单。我的问题是IE支持转换（我申请平滑滑动转换）。我的菜单适用于大多数浏览器，但不适用于IE9及更低版本。所以我决定用Jquery做这件事，我为此得到了解决方案。当我的网页加载时，它工作正常（我的计划是第一我会将left: calc(-100%+50px);添加到我的CSS，然后当我的折叠按钮点击我会改变这个CSS到left: 0px;，所以它会花费和agin当收起按钮点击它恢复到left: calc(-100%+50px);所以它但它看起来像jquery不能动画left: calc(-100%+50px);这种类型的CSS。我已经试过这与jquery .animate()方法。但问题是在开销菜单后，当我去折叠菜单它不显示任何滑动动画。的CSS菜单。

这是我第一次尝试jsfiddle
这里是我的第二次尝试jsfiddle
这里是我的最新ŧ ry jsfiddle

哪种方法最好，我能做些什么来解决这个问题？如何获取实时窗口宽度并将其应用于div中？

来源

2016-02-13 Shohidul Alam

这是另一个答案。我修复了你的javascript。应该调整大小。我所做的是调整大小并重新调整菜单的大小。这样，依赖于菜单的按钮就随之移动。以下是JavaScript代码。

(function($) { 
    $(".button").on("click", function() { 
     if ($(".menu").css("left") == "0px") { 
      $(".menu").stop().animate({ 
       left: -1 * $(window).width() + 30 
      }, 'slow'); 
     } else { 
      $(".menu").stop().animate({ 
       left: 0 
      }, 'slow'); 
     } 
    }); 

    $(window).resize(function() { 
     var width = $(window).width(); 

     $(".menu").css("width", width); 

     if ($(".menu").css("left") != "0px") { 
      $(".menu").css("left", (-1 * $(window).width() + 30)); 
     } 

    }); 

}(jQuery));

来源

2016-02-13 13:27:58

感谢大哥。有效！ –

要获得实况窗口宽度使用下面的代码：

window.innerWidth为您提供了窗口的宽度视而 window.width给你整个窗口的宽度。

感谢

来源

2016-02-13 08:57:23

为了让你必须牢记的窗口，用户可以调整自己的浏览器的宽度。这就是为什么我们用jQuery resize函数来包装我们的代码，以便实时更新宽度。检查以下代码：

$(function() { 
    $(window).resize(function() { 
     var width = $(window).width(); 
     // update the width of your element, the below line is just an example on how to do that 
     $("#someElementId").css("width", width); 
    }); 
});

来源

2016-02-13 09:57:10

它不起作用。 –

@ShohidulAlam此代码适用于调整大小，您需要在调整大小函数外调用它。在文档就绪行之后直接调用这个：$（“＃someElementId”）。css（“width”，$（window）.width（））; –

@ShohidulAlam我添加了缺少的分号，这是一个显示代码的bin：http://jsbin.com/gituzeneno/1/edit?js,console,output ||看看这个盒子是如何调整大小的，尽管它在CSS中宽度为50px。 –

如何获取实时窗口宽度并将其应用于div中？

回答

相关问题