Question

我有问题。我想以低于980px的分辨率停止脚本，并将脚本完成的所有内容都带回来。因此，在更高的980px分辨率下，我希望脚本再次运行。我在stackoverflow上发现了类似的问题，链接question1 question2但是答案在那里并没有帮助我，虽然相同的脚本。

这是脚本

( function( $ ) {

$.fn.hoverfold = function( args ) {

    this.each( function() {

        $( this ).children( '.view' ).each( function() {

            var $item   = $( this ),
                img     = $item.children( 'img' ).attr( 'src' ),
                struct  = '<div class="slice s1">';
                    struct  +='<div class="slice s2">';
                        struct  +='<div class="slice s3">';
                            struct  +='<div class="slice s4">';
                                struct  +='<div class="slice s5">';
                                struct  +='</div>';
                            struct  +='</div>';
                        struct  +='</div>';
                    struct  +='</div>';
                struct  +='</div>';

            var $struct = $( struct );

            $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );

        } );

    });

};

} )

( jQuery );

请看JsFiddle并且不严格判断，我是js和jQuery的新手。谢谢你的帮助！

嗯，我看到他们投票支持这个问题的结束，原因是 - 我不清楚我想要什么。我希望这个脚本以更高的980px的分辨率工作，并且停止以低于980px的分辨率工作。正如我们从脚本中看到的那样，它将标签img转换为背景图像，我希望它的分辨率低于980pks，而不是。

如果我在分辨率更高的980px中打开浏览器并逐渐减少它，我希望当脚本980px将batskground-imago转回img时。我希望很清楚。

我试了很久并写了这段代码：

var MY_WIDTH=980;

var f=true;
var first=true;
var temp=new Array();
var temp2=new Array();
( function( $ ) {


function my_cancel () {
    $.makeArray($(".view")).forEach (function (a, i) {
        $(a).html(temp[i][0]);
    });
}

function my_do () {
    $.makeArray($(".view")).forEach (function (a, i) {
        $(a).html(temp2[i][0]);
    });
}

if ($(window).width()<MY_WIDTH) {
    f=true;
    //$.fn.hoverfold ();
    //my_cancel ();
}

function WindowSizeChange (){
    $("#size").html ($(window).width());
        if ($(window).width()>=MY_WIDTH){
        f=true;
        if (first==true) { $.fn.hoverfold (); first=false; }
        else my_do ();
    } else {
        if (f!=false) my_cancel (); 
        f=false;
    }
}   
$(window).on("load resize", WindowSizeChange);


$.fn.hoverfold = function() {
    if (f==true) {
        this.each( function() {
            var i=0;
            $( this ).children( '.view' ).each( function() {

                var $item   = $( this ),
                    img     = $item.children( 'img' ).attr( 'src' ),
                    struct  = '<div class="slice s1">';
                        struct  +='<div class="slice s2">';
                            struct  +='<div class="slice s3">';
                                struct  +='<div class="slice s4">';
                                    struct  +='<div class="slice s5">';
                                    struct  +='</div>';
                                struct  +='</div>';
                            struct  +='</div>';
                        struct  +='</div>';
                    struct  +='</div>';

                var $struct = $( struct );

                temp[i]=$item.find( 'img' );

                temp2[i]=temp[i].remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
                i++;
            } );    
        });
    }
};



} )( jQuery );

乍一看，一切运作良好，但这段代码隐藏了图片下面的按钮......我不知道如何防止它。

请参阅JsFiddle update DEMO

我还不清楚？

以超过980像素的分辨率打开EXAMPLE。你看到悬停效果了吗？你看到结构吗？在html中有1个标记<img>，但在检查器中，您将看到该脚本创建了5个div，并将此<img>标记共享为5个部分，并将每个部分放入div background-image。好的，现在将分辨率降低到979px。我希望在检查器中看到简单标记<img>，但没有任何效果。现在再次提高980px的分辨率。我希望再次看到悬停效果。

我希望这次大家都能理解。

Answer 1

赞here？我建议你这样做：

a）不要移除<img>元素，只需将所有漂亮的东西放在旁边：

( function( $ ) {
    $.fn.hoverfold = function( args ) {
                ...
                // Not removing the image, just appending ".slice" structure
                $item.append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
                ...             
    };
} )
( jQuery );

b）通过媒体查询轮流显示/隐藏<img>和.slice：

.view img{display: none}             /* This hides the image by default */

@media screen and (max-width:980px){ /* And if the screen width is 980px or less: */
    .view .slice{display: none}      /* ... the fancy rolling stuff is invisible,.. */
    .view img{display: block}        /* ... but the image shows up */
}

问题是：JS在加载时被触发，通常是在页面加载时（并非总是如此，但我们假设它是如此）。因此，您的脚本1）删除图像并在最开始时添加滚动结构，2）或者如果您放置$(window).width()条件则不会。并以您最初计划的方式撤消滚动效果（“停止脚本工作”）意味着完全撤消脚本在小页面大小上执行的所有更改，并在广泛的screend上再次重做它。很多不必要的工作。

相反，实践是：使用媒体查询直接在css中添加所有需要的元素并控制它们的外观（可见性，颜色，大小）甚至行为（转换，转换，悬停等等）。我们在查询上放置了一个条件（max-width:980px表示“在980px和更窄的屏幕上”），并且只有满足此条件时才会应用其中的所有规则。

如果您还不熟悉该技术，可以阅读CSS媒体查询here。

Answer 2

很抱歉，我对此问题感到很困惑。但是，如果您要保留图像（看起来像＆＃34;缩放＆＃34;和＃34;信息＆＃34;图像），则需要检查媒体查询。就像@Nit所说，你可能想要阅读CSS媒体查询。在您的980px媒体查询中删除以下样式：

.view .view-back .info {
    display: none;
}

.view .view-back .zoom {
    top: 230px;
}

（那是在＆＃34; style.css＆＃34;＆＃34; @media屏幕下的文件和（max-width：980px）＆＃34;。我本来是在jsFiddle编辑但是不能＆＃39 ; t似乎访问该文件。）

正在发生的事情是＆＃39;信息＆＃39;图像正在消失，缩放＆＃39;图像正在向下移动。同样，我不能100％确定这是否是您正在寻找的，但整个事情有点不清楚。我希望有所帮助。代码肯定存在其他一些有趣的问题，但我认为这是一个单独的问题。

编辑：如果你想删除＆＃34;脚本＆＃34;发生在980px，我认为你的意思是媒体查询作为一个整体。只需删除查询中包含的样式：

@media screen and (max-width: 980px) {

    /*Delete all styles here, or the entire @media block*/

}

window.resize（）函数并返回脚本执行的事实

2 个答案: