调整浏览器窗口大小时内容消失

时间：2012-11-30 02:25:38

标签： javascript html browser resize

我正在建立一个网站，我有一点问题。 当我在浏览器上使用全尺寸窗口打开它时没有问题但是，当我更改窗口的大小并使其变小时，文本消失，图像内容大小也会改变。

必须使用javascript或css。如果你能看到解决这个问题的任何方法，请给我一个建议。

谢谢！

这是HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Untitled Document</title>
        <link href="../css/style.css" rel="stylesheet"
        type="text/css" />
        <script src="../css/SpryTabbedPanels.js" type="text/javascript"></script>
        <link href="../css/SpryTabbedPanels.css" rel="stylesheet" type="text/css"
        />
        <link rel='stylesheet' id='NextGEN-css' href='http://www.markandlona.com/core/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0'
        type='text/css' media='screen' />
        <link rel='stylesheet' id='colorpicker.css-css' href='http://www.markandlona.com/core/wp-content/themes/crius/js/colorpicker/css/colorpicker.css?ver=1.2'
        type='text/css' media='all' />
        <link rel='stylesheet' id='fancybox_css-css' href='http://www.markandlona.com/core/wp-content/themes/crius/js/fancybox/jquery.fancybox.css?ver=1.2'
        type='text/css' media='all' />
        <link rel='stylesheet' id='fancybox_thumb_css-css' href='http://www.markandlona.com/core/wp-content/themes/crius/js/fancybox/jquery.fancybox-thumbs.css?ver=1.2'
        type='text/css' media='all' />
        <link rel='stylesheet' id='grid_css-css' href='../css/grid.css' type='text/css'
        media='all' />
        <link rel='stylesheet' id='google_fonts-css' href='http://fonts.googleapis.com/css?family=Alice&#038;ver=3.3.2'
        type='text/css' media='all' />
        <link rel='stylesheet' id='jquery.lightbox.min.css-css' href='http://www.markandlona.com/core/wp-content/plugins/wp-jquery-lightbox/styles/lightbox.min.css?ver=1.3.4'
        type='text/css' media='all' />
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.9995'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js?ver=1.06'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.ui.js?ver=1.2'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/colorpicker.js?ver=1.2'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/fancybox/jquery.fancybox.pack.js?ver=1.2'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/fancybox/jquery.fancybox-thumbs.js?ver=1.2'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.easing.js?ver=1.2'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.nivoslider.js?ver=1.2'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.touchwipe.1.1.1.js?ver=1.2'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.validate.js?ver=1.2'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/browser.js?ver=1.2'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.backstretch.js?ver=1.2'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/hint.js?ver=1.2'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.flip.min.js?ver=1.2'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/fancybox/jquery.mousewheel-3.0.6.pack.js?ver=1.2'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jquery.jplayer.min.js?ver=1.2'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/kenburns.js?ver=1.2'></script>
        <script type='text/javascript' src='http://www.markandlona.com/core/wp-content/themes/crius/js/jwplayer.js?ver=1.2'></script>
        <script type='text/javascript' src='../css/custom.js'></script>
        <style type="text/css">
            .post_header h2, h1, h2, h3, h4, h5 {
                color: #222222;
            }
            .nav li a {
                font-size:30px;
            }
            .nav li ul li a {
                font-size:21px;
            }
            h1 {
                font-size:40px;
            }
            h2 {
                font-size:32px;
            }
            h3 {
                font-size:26px;
            }
            h4 {
                font-size:24px;
            }
            h5 {
                font-size:22px;
            }
            h6 {
                font-size:18px;
            }
            a {
                color:#000000;
                font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
            }
            #nav_wrapper, #thin_nav, .post_date {
                background: #ffffff;
                overflow: visible;
                position: absolute;
                visibility: visible;
                width: 310px;
            }
            input[type=submit], input[type=button], a.button {
                background: #000000;
                text-shadow: -1px 0 1px #333;
            }
            input[type=submit], input[type=button], a.button {
                color: #ffffff;
            }
            input[type=submit]:hover, input[type=button]:hover, a.button:hover {
                color: #ffffff;
            }
            input[type=submit], input[type=button], a.button {
                border: 1px solid #111111;
            }
            .post_header h2, h1, h2, h3, h4, h5 {
                color: #222222;
            }
            h1, h2, h3, h4, h5, h6, .nav li a, #kenburns_title, #kenburns_desc, .personal_contact h6 {
                font-family:'Alice';
            }
            h1, h2, h3, h4, h5, h6, .nav li a, #gallery_title, #gallery_desc, .nav li a, .nav_page_number li {
                text-transform: none;
            }
            .nav li a, .nav_page_number li {
                color: #000000;
            }
            .nav li ul {
                border-left: 1px solid #000000;
            }
            .nav li.current-menu-item > a, .nav li > a:hover, .nav li > a.hover, .nav li > a:active, .nav li.current-menu-parent > a, .nav li.current-menu-item ul li a:hover, .nav li ul li a:hover, .nav li ul li:hover a, .nav li ul li.current-menu-item a {
                color: #ff8e01;
            }
            h1.menu_header, #footer {
                color: #919191;
            }
        </style>
        <link href="../css/screen.css" rel="stylesheet" type="text/css"
        />
        <style type="text/css">
            h1, h2, h3, h4, h5, h6 {
                font-family: Dosis;
            }
        </style>
    </head>

    <body>
        <!-- Begin logo -->
        <!-- End logo -->
        <!-- Begin main nav -->
        <div id="nav_wrapper">
            <div class="nav_wrapper_inner">
                <div id="menu_border_wrapper">  <a id="custom_logo" class="logo_wrapper" href="http://www.markandlona.com/core"><img src="../images/verrisgolf_small.jpg" alt="" width="151" height="42"/></a>

                    <ul
                    id="main_menu" class="nav">
                        <li id="menu-item-418" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-418"><a href="http://www.markandlona.com/core/">HOME</a>
                        </li>
                        <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87"><a href="http://www.markandlona.com/core/about">ABOUT</a> 
                        </li>
                        <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://www.markandlona.com/core/visual">COLLECTIONS</a>

                            <ul class="sub-menu">
                                <li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a href="http://www.markandlona.com/core/visual/models">A/W 2012</a>
                                </li>
                                <li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94"><a href="http://www.markandlona.com/core/visual/movie">S/S 2012</a>
                                </li>
                            </ul>
                        </li>
                        <li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://www.markandlona.com/core/product%ef%bc%8b">ARCHIVES</a>

                            <ul
                            class="sub-menu">
                                <li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://www.markandlona.com/core/product%ef%bc%8b/men">A/W 2011</a>
                                </li>
                                <li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://www.markandlona.com/core/product%ef%bc%8b/women">S/S 2011</a>
                                </li>
                                <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://www.markandlona.com/core/product%ef%bc%8b/men">A/W 2010</a>
                                </li>
                                <li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://www.markandlona.com/core/product%ef%bc%8b/women">S/S 2010</a>
                                </li>
                                </ul>
                        </li>
                        <li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"><a href="http://www.markandlona.com/core/press%ef%bc%8b">BLOG</a>

                        </li>
                        <li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="http://www.markandlona.com/core/news">ONLINE STORE</a>
                        </li>
                        <li id="menu-item-519" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-519"><a href="http://www.markandlona.com/core/shoplist">SHOP LIST</a>
                        </li>
                        </ul>
                </div>
            </div>
        </div>
        </div>
    </body>

</html>

这是我的JavaScript：

var $j = jQuery.noConflict();

/* jquery.imagefit 
 *
 * Version 0.2 by Oliver Boermans <http://www.ollicle.com/eg/jquery/imagefit/>
 *
 * Extends jQuery <http://jquery.com>
 *
 */
(function($) {
    $.fn.imagefit = function(options) {
        var fit = {
            all : function(imgs){
                imgs.each(function(){
                    fit.one(this);
                    })
                },
            one : function(img){
                $(img)
                    .width('100%').each(function()
                    {
                        $(this).height(Math.round(
                            $(this).attr('startheight')*($(this).width()/$(this).attr('startwidth')))
                        );
                    })
                }
        };

        this.each(function(){
                var container = this;

                // store list of contained images (excluding those in tables)
                var imgs = $('img', container).not($("table img"));

                // store initial dimensions on each image 
                imgs.each(function(){
                    $(this).attr('startwidth', $(this).width())
                        .attr('startheight', $(this).height())
                        .css('max-width', $(this).attr('startwidth')+"px");

                    fit.one(this);
                });
                // Re-adjust when window width is changed
                $(window).bind('resize', function(){
                    fit.all(imgs);
                });
            });
        return this;
    };
})(jQuery);

$j.fn.getIndex = function(){
    var $jp=$j(this).parent().children();
    return $jp.index(this);
}

jQuery.fn.extend({
  slideRight: function() {
    return this.each(function() {
        jQuery(this).show();
    });
  },
  slideLeft: function() {
    return this.each(function() {
        jQuery(this).hide();
    });
  },
  slideToggleWidth: function() {
    return this.each(function() {
      var el = jQuery(this);
      if (el.css('display') == 'block') {
        el.slideRight();
      } else {
        el.slideLeft();
      }
    });
  }
});

$j.fn.setNav = function(){
    $j('#main_menu li ul').css({display: 'none'});

    $j('#main_menu li').each(function()
    {   
        var $jsublist = $j(this).find('ul:first');

        $j(this).hover(function()
        {   
            $jsublist.css({opacity: 1});

            $jsublist.stop().css({overflow:'visible', height:'auto', display:'none'}).fadeIn(200, function()
            {
                $j(this).css({overflow:'visible', height:'auto', display: 'block'});
            }); 
        },
        function()
        {   
            $jsublist.stop().css({overflow:'visible', height:'auto', display:'none'}).fadeOut(200, function()
            {
                $j(this).css({overflow:'visible', display:'none'});
            }); 
        }); 

    });

    $j('#main_menu li').each(function()
    {

        $j(this).hover(function()
        {   
            $j(this).find('a:first').addClass('hover');
        },
        function()
        {   
            $j(this).find('a:first').removeClass('hover');
        }); 

    });

    $j('#menu_wrapper .nav ul li ul').css({display: 'none'});

    $j('#menu_wrapper .nav ul li').each(function()
    {   

        var $jsublist = $j(this).find('ul:first');

        $j(this).hover(function()
        {   
            $jsublist.css({opacity: 1});

            $jsublist.stop().css({overflow:'visible', height:'auto', display:'none'}).fadeIn(200, function()
            {
                $j(this).css({overflow:'visible', height:'auto', display: 'block'});
            }); 
        },
        function()
        {   
            $jsublist.stop().css({overflow:'visible', height:'auto', display:'none'}).fadeOut(200, function()
            {
                $j(this).css({overflow:'visible', display:'none'});
            }); 
        }); 

    });

    $j('#menu_wrapper .nav ul li').each(function()
    {

        $j(this).hover(function()
        {   
            $j(this).find('a:first').addClass('hover');
        },
        function()
        {   
            $j(this).find('a:first').removeClass('hover');
        }); 

    });
}

$j(document).ready(function(){ 

    $j(document).setNav();

    $j('#thin_nav').mouseenter(
        function() {
            setTimeout(function() {
                $j('#nav_wrapper').animate({"right": "0px"}, { duration: 300 });
                $j(this).css('display', 'none');
            }, 300);
        }
    );

    $j('#nav_wrapper').mouseleave(
        function() {
            $j(this).animate({"right": "-250px"}, { duration: 300 });
            $j('#thin_nav').css('display', 'block');
        }
    );

    $j('#nav_wrapper').touchwipe({
        wipeRight: function(){ 
            $j('#nav_wrapper').animate({"right": "-250px"}, { duration: 300 });
            $j('#thin_nav').css('display', 'block');
        }
    });

    $j('#thin_nav').touchwipe({
        wipeLeft: function(){ 
            $j('#nav_wrapper').animate({"right": "0px"}, { duration: 300 });
            $j('#thin_nav').css('display', 'none');
        }
    });

    $j('.pp_gallery a').fancybox({ 
        padding: 0,
        overlayColor: '#000', 
        transitionIn: 'fade',
        transitionOut: 'fade',
        overlayOpacity: 0.9
    });

    $j('.flickr li a').fancybox({ 
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : {
            title   : {
                type: 'outside'
            },
            overlay : {
                opacity : 0.9,
                css : {
                    'background-color' : '#000'
                }
            },
            thumbs  : {
                width   : 60,
                height  : 60
            }
        }
    });

    $j('a.fancy-gallery').fancybox({ 
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : {
            title   : {
                type: 'outside'
            },
            overlay : {
                opacity : 0.9,
                css : {
                    'background-color' : '#000'
                }
            },
            thumbs  : {
                width   : 60,
                height  : 60
            }
        }
    });

    $j('.img_frame').fancybox({ 
        padding: 0,
        overlayColor: '#000', 
        overlayOpacity: 0.9
    });

    $j('.lightbox_youtube').fancybox({ 
        padding: 0,
        overlayColor: '#000', 
        transitionIn: 'fade',
        transitionOut: 'fade',
        overlayOpacity: 0.9,
        scrolling: 'no'
    });

    $j('.lightbox_vimeo').fancybox({ 
        padding: 0,
        overlayColor: '#000', 
        transitionIn: 'fade',
        transitionOut: 'fade',
        overlayOpacity: 0.9,
        scrolling: 'no'
    });

    $j('.project_single').fancybox({ 
        padding: 0,
        overlayColor: '#000', 
        transitionIn: 'fade',
        transitionOut: 'fade',
        overlayOpacity: 0.9,
        scrolling: 'no'
    });

    $j('input[title!=""]').hint();

    $j('textarea[title!=""]').hint();

    $j('.one_fourth.gallery4').hover(
        function(){
            var $jthis = $j(this);
            $jthis.children('a').children('img').stop().animate({
                    'height':'185px',
                    'top':'0px',
                    'left':'0px'
                }, 400);

        },
        function(){
            var $jthis = $j(this);
            $jthis.children('a').children('img').stop().animate({
                'height':'200px',
                'top':'0px',
                'left':'0px'
                }, 400);
        }
    );

    $j('.one_third.gallery3').hover(
        function(){
            var $jthis = $j(this);
            $jthis.children('a').children('img').stop().animate({
                    'height':'240px',
                    'top':'0px',
                    'left':'0px'
                }, 400);
        },
        function(){
            var $jthis = $j(this);
            $jthis.children('a').children('img').stop().animate({
                    'height':'260px',
                    'top':'0px',
                    'left':'0px'
                }, 400);
        }
    );

    $j('.one_half.gallery2').hover(
        function(){
            var $jthis = $j(this);
            $jthis.children('a').children('img').stop().animate({
                    'height':'320px',
                    'top':'0px',
                    'left':'0px'
                }, 400);
        },
        function(){
            var $jthis = $j(this);
            $jthis.children('a').children('img').stop().animate({
                'height':'340px',
                'top':'0px',
                'left':'0px'
                }, 400);
        }
    );


    //Firefoxがフリーズするのでブロック
    //$j('.post_img').hover(
//      function(){
//          var $jthis = $j(this);
//          $jthis.children('a').children('img').stop().animate({
//                  'height':'250px',
//                  'top':'0px',
//                  'left':'0px'
//              }, 400);
//      },
//      function(){
//          var $jthis = $j(this);
//          $jthis.children('a').children('img').stop().animate({
//              'height':'260px',
//              'top':'0px',
//              'left':'0px'
//              }, 400);
//      }
//  );

    //$j('.post_img').click(
//      function(event){
//          $j(this).children('a').trigger('click');
//      }
//  );

    var calScreenHeight = $j(window).height()-108;
    $j('#page_content_wrapper').css('top', '0px');

    setTimeout(function() {
        $j('#menu_wrapper').fadeIn();
        $j('#jp_interface_1').fadeIn();
        $j('#controls').fadeIn();
        $j('#page_content_wrapper').fadeIn();
        $j('.page_control').fadeIn();
        $j('#page_maximize').trigger('click');
        $j('#tray-button').trigger('click');
    }, 1012);

    var miniRightPos = 1012;

    $j('#page_minimize').click(function(){
        var calScreenHeight = $j(window).height()-120;

        $j(this).css('display', 'none');
        $j('#page_maximize').css('display', 'block');
        $j('#page_content_wrapper').animate({ 'left': -miniRightPos+'px' }, 200);
        $j('.page_control').animate({ 'left': '332px' }, 0);
        $j('.personal_contact').fadeOut('slow');
        $j('.gallery_social').fadeOut('slow');
        $j('#kenburns_title').fadeIn('slow');
        $j('#kenburns_desc').fadeIn('slow');
    });

    $j('#page_maximize').click(function(){
        var calScreenHeight = $j(window).height()-120;

        $j(this).css('display', 'none');
        $j('#page_minimize').css('display', 'block');
        $j('#page_content_wrapper').animate({ 'left': '332px' }, 400);
        $j('.page_control').animate({ 'left': miniRightPos+'px' }, 400);
        $j('.personal_contact').fadeIn('slow');
        $j('.gallery_social').fadeIn('slow');
        $j('#kenburns_title').fadeOut('slow');
        $j('#kenburns_desc').fadeOut('slow');
    });

    // Create the dropdown base
    $j("<select />").appendTo("#menu_border_wrapper");

    // Create default option "Go to..."
    $j("<option />", {
       "selected": "selected",
       "value"   : "",
       "text"    : "- Main Menu -"
    }).appendTo("#menu_border_wrapper select");

    // Populate dropdown with menu items
    $j(".nav li").each(function() {
     var current_item = $j(this).hasClass('current-menu-item'); 
     var el = $j(this).children('a');
     var menu_text = el.text();

     if($j(this).parent('ul.sub-menu').length > 0)
     {
        menu_text = "- "+menu_text;
        $j('ul.sub-menu li').css('display', 'block');
     }

     if($j(this).parent('ul.sub-menu').parent('li').parent('ul.sub-menu').length > 0)
     {
        menu_text = el.text();
        menu_text = "- - "+menu_text;

     }

     if(current_item)
     {
        $j("<option />", {
             "selected": "selected",
             "value"   : el.attr("href"),
             "text"    : menu_text
         }).appendTo("#menu_border_wrapper select");
     }
     else
     {
        $j("<option />", {
            "value"   : el.attr("href"),
            "text"    : menu_text
        }).appendTo("#menu_border_wrapper select");
     }
    });

    $j("#menu_border_wrapper select").change(function() {
        window.location = $j(this).find("option:selected").val();
    });

    //  $j('.sub-menu').touchwipe({
//          wipeRight: function(){ 
//              $j('.sub-menu').animate({"left": "0px"}, { duration: 300 });
//          $j('ul.sub-menu').css('display', 'block');
//          }
//    });
//    

});

1 个答案:

答案 0 :(得分：0)

可能有几个原因导致这种情况发生，但我可以指出，网页的性能会因许多http请求而变得非常糟糕。

您需要捆绑您的css和js文件并将其压缩至少，并采用某种缓存策略。我强烈建议您研究这个主题。

相关问题
最新问题