0

所以我有两张图片，一张用于高于 1440 像素的宽分辨率，一张用于更低的分辨率。我有一个按钮来切换这张图片，不幸的是我不知道如何让它工作，所以它会在 1440 像素以下的传说图像或 1440 像素以上的雇员图像上切换。另外，现在我的 toggle_off 功能不适用于我尝试的 js 以使其工作。

CSS：

.p_works
{
    width:100%;
}
@media (min-width: 1440px){
        #art1
        {
            display:inline;
        }
        #art1_lores
        {
            display:none;
        }
        #art2
        {
            display:none;
        }
        #art2_lores
        {   
            display:none;
        }
        }
@media (max-width: 1440px){
        #art1
        {
            display:none;
        }
        #art1_lores
        {
            display:inline;
        }
        #art2
        {
            display:none;
        }
        #art2_lores
        {   
            display:none;
        }
        }

我真的不知道javascript所以这是我确定是错误的尝试，我什至不知道我是否需要为mathcmedia加载脚本。

Javascript：

<script type="text/javascript">
    function toggle_on(id) {
        var hires = document.getElementById(id);
        var lores = document.getElementById(id) +'_lores';
        if (window.matchmedia("(min-width: 1440px)").matches) {
            hires.style.display = 'inline';
        }
        else {
            lores.style.display = 'inline';
        }
    }
    function toggle_off(id) {
        var e = document.getElementById(id);
        if(e.style.display = 'inline') 
        e.style.display = 'none';
    }
</script>

HTML：

<a href="#" onclick="toggle_on('art1'); toggle_off('art2'); toggle_off('art2_lores')">
            <img class="icons" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/icons/typewriter.jpg" alt="typewriter"/>
</a>
<a href="#" onclick="toggle_on('art2'); toggle_off('art1'); toggle_off('art1_lores');">
            <img class="icons" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/icons/wasting-water.jpg" alt="wasting water"/>
</a>
<img class="p_works" id="art1" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/Typewriter.jpg" alt="typewriter"/>
<img class="p_works" id="art1_lores" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/lores/Typewriter.jpg" alt="typewriter"/>
<img class="p_works" id="art2" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/wasting-water.jpg" alt="wasting water"/>
<img class="p_works" id="art2_lores" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/wasting-water.jpg" alt="wasting water"/>

你可以看到我在这里： http ://www.dillonbrannick.com/redesign

按钮在右侧；图标，只有前两个应该像我的代码一样工作，但它们没有。

代码笔

4

2 回答 2

2

也许这样：

window.onresize = function(event) {
      var w=window.outerWidth;
      var h=window.outerHeight;


      // Size specific code here
}
于 2013-08-04T02:10:32.310 回答
0 
function toggle_on_hires(id) {
        var e = document.getElementById(id);
        var w = window.innerWidth;
        if(w > 1440){
            e.style.display = 'inline';
        }
        else{
            e.style.display = 'none';
        }
    }
    function toggle_on_lores(id) {
        var e = document.getElementById(id);
        var w = window.innerWidth;
        if(w <= 1440){
            e.style.display = 'inline';
        }
        else{
            e.style.display = 'none';
        }
    }

然后我用toggle_on_hires 调用#art1，用toggle_on_lores 调用#art1_lores。所以现在它会在窗口分辨率低于 1440 像素宽时切换较低分辨率的图像，而在高于 1440 像素时切换更高分辨率的图像。

于 2013-08-04T12:23:36.040 回答