logo标签列表

如何使用JavaScript根据页面更改logo？

javascripthtmlimage
3
我正在尝试设置我的标志，以显示更大的标志用于桌面设备，而对于像智能手机这样的较小设备则使用较小的图像...

到目前为止，这是我尝试过的内容，但它无法正常工作。

有人可以帮帮我吗？我的代码有什么问题吗？

<html>
<head>
<script type="text/javascript">
function load(){
    document.getElementById('logo').src = displaylogo();
}
function displaylogo(){
    if ($(window).width() < 1024) {// code for small viewports
        return "http://i.imgur.com/ozYV740.png"; // small logo
    } 
    else {// code for large viewports
        return "http://i.imgur.com/RMV6Af0.png"; //big logo
    }
}
</script>
</head>
<body onload="load()">
    <img src="http://i.imgur.com/RMV6Af0.png" id="logo" name="logo" title="The original logo is the big logo"/>
</body>
</html>
5
阅读 @media 相关内容。 - jdepypere
2
如果没有jQuery，那段代码将无法运行，检查窗口宽度的正确方式是使用jQuery。如果你真的需要JS解决方案，请尝试window.innerWidth < 1024。 - PlantTheIdea
正如@arbitter所建议的那样，使用@media来更改您的单个图像的大小，而不是尝试加载两个单独的图像。 - Shaun
请按建议使用@media，并确保导入jQuery，"$"通常是jQuery的速记符号，因此为了使您的代码至少运行，请使用它。 - ronnyfm
我添加了jQuery，但是只有在页面重新加载后图像才会更改... - m3tsys
显示剩余3条评论
3个回答
3

您应该使用CSS媒体查询来处理您的网页在不同设备上的显示。这些查询允许您根据用户屏幕宽度应用不同的样式。

例如，如果要调整Logo适应手机，请尝试：

/* Desktops (>480px) */
#logo {
  width: 200px;
  height: 200px;
}

/* iPhone landscape (480px) */
@media screen and (max-width: 480px) {
  #logo {
    width: 100px;
    height: 100px;
  }
}

教程：使用CSS3媒体查询创建网站移动版本的方法，请参考该链接。
2
尝试使用媒体查询。
<head>
     <style>
          .logo {
                width: //logo-width
                height : //logo-height
                background-image : url('http://i.imgur.com/RMV6Af0.png');
           }

           @media only screen 
           and (max-device-width : 1024px) {
                .logo {
                    width: //logo-width
                    height : //logo-height
                    background-image : url('http://i.imgur.com/ozYV740.png');
                }
           }
     </style>
</head>
<body>
<div class="logo">
</div>
</body>
1
由于您没有使用jQuery，尝试在您的情况下使用以下代码：
要在JS中工作：
if (window.innerWidth < 1024) {// code for small viewports
    //^^^^^^^^^^^

如果您想使用jQuery：

function displaylogo() {
    if ($(window).width() < 1024) {
        $("#logo").attr("src","http://i.imgur.com/ozYV740.png"); // small logo
    } 
    else {
        $("#logo").attr("src","http://i.imgur.com/RMV6Af0.png"); //big logo
    } 
}

$(window).resize(function () {
    displaylogo();
});
$(document).ready(function () {
    displaylogo();
});

我建议使用CSS代替：

我建议使用CSS：

<span id="logo"></span>

CSS：
#logo {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url(http://i.imgur.com/ozYV740.png) no-repeat; /* small */
}
@media screen and (min-width: 1024px) {
    #logo {
        width: 100px;
        height: 100px;
        background: url(http://i.imgur.com/RMV6Af0.png) no-repeat; /* big */
    }
}
@m3tsys，我添加了更多信息。 - Vahid Hallaji
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接