Question

我正在尝试用JavaScript替换CSS媒体查询，以便我可以在我的主页上使用带有文本的CSS动画（英雄图像）。我想要文本淡入。寻找替代方案，我得出结论，js是实现这一目标的最佳（也是最简单）方法。我已经尝试过switch和if / else但是遇到了太多的语法错误，我知道的东西太少了。* HTML

JS开关脚本＆GT;

$(document).ready(function() {

text = text.replace(new RegExp(replacement, 'g'), '');

    switch $(window).innerWidth() {
    case 0:
        max-width <= 320;
        break;
    case 1:
        max-width <= 480;
        var str = " indexPhoto_320.jpg";
        var res = str.replace("indexPhoto_320.jpg", "indexPhoto_450.jpg");
        break;
    case 2:
        max-width <= 768;
        var str = " indexPhoto_320.jpg";
        var res = str.replace("indexPhoto_320.jpg", "indexPhoto_835.jpg");
        break;
    case 3:
        max-width <= 1260;
        var str = " indexPhoto_320.jpg";
        var res = str.replace("indexPhoto_320.jpg", "indexPhoto_1000.jpg");
        break;                    
    case 4:
        max-width <= 1420;
        var str = " indexPhoto_320.jpg" ;
        var res = str.replace("indexPhoto_320.jpg", "indexPhoto_1000.jpg");
        break;
    case 4:
        max-width > 1420;   
        var str = " indexPhoto_320.jpg";
        var res = str.replace("indexPhoto_320.jpg", "indexPhoto_1200.jpg");
        break;                    
    default:
        break;
    }}

JS ifElse var intViewportWidth = window.innerWidth;

$(document).ready(function() {


     if intViewportWidth  > 320 && <=480
         $("img").attr("src", $(this).attr("src").replace("indexPhoto_320.jpg" width"320" height"474").      ("indexPhoto_450.jpg" width"450" height"630");

     else if intViewportWidth >480 && <=768 
         $("img").attr("src", $(this).attr("src").replace("indexPhoto_320.jpg" width"320" height"474"). ("indexPhoto_450.jpg" width"450" height"630");



    else if intViewportWidth  >768 && <=1024
         $("img").attr("src", $(this).attr("src").replace("indexPhoto_320.jpg" width"320" height"474"). ("indexPhoto_835.jpg" width"835" height"1024");
        var res = str.


    else if intViewportWidth  >1024 && <=1260
         $("img").attr("src", $(this).attr("src") replace("indexPhoto_320.jpg" width"320" height"474"). ("indexPhoto_1000.jpg" width"1000" height"667");


    else if intViewportWidth  >1260 && <= 1420
         $("img").attr("src", $(this).attr("src") replace("indexPhoto_320.jpg" width"320" height"474"). ("indexPhoto_1000.jpg" width"1000" height"667");


    else  
         $("img").attr("src", $(this).attr("src") replace("indexPhoto_320.jpg" width"320" height"474"). ("indexPhoto_1200.jpg" width"1200" height"801");
            };

任何建议，帮助表示赞赏。我花了几天时间对这些东西感到困惑。

洛伦

用JavaScript替换css媒体查询

0 个答案: