0

だから私は2つの画像を持っています。この画像を切り替えるボタンがありますが、残念ながらそれを機能させる方法がわからないため、1440px 未満の lores 画像または 1440px を超える Hires 画像を切り替えます。さらに、私の 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

ボタンは右側にあります。アイコン、私のコードでは最初の2つだけが機能するはずですが、機能しません。

コードペン

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 を呼び出しました。そのため、ウィンドウの解像度が幅 1440px 未満の場合は低解像度の画像を切り替え、それを超える場合は高解像度の画像を切り替えます。

于 2013-08-04T12:23:36.040 に答える