代码之家  ›  专栏  ›  技术社区  ›  Gops

将视图端口高度添加到Javascript插件

  •  0
  • Gops  · 技术社区  · 11 年前

    我有一个javascript横幅,它有一个默认的宽度和高度,我想添加视图端口高度。(我不能放100%或auto,因为插件不适用于此。我应该添加100px等值)。下面是javascript

            <script type="text/javascript">
    $(document).ready(function(){
       var h=$(window).height();
      $('#slideshow').fadeSlideShow({
            PlayPauseElement: false,
            NextElement: false,
            PrevElement: false,
            ListElement: false,
            width: '100%',
            height: h+'px'
        });
    
        });
    </script>
    

    请给我建议。。

    非常感谢

    1 回复  |  直到 11 年前
        1
  •  0
  •   Udit Bhardwaj    11 年前

    是的

    var h=$(window).height()
    

    在css(传递给插件对象的设置)中,您必须编写

    $('#slideshow').fadeSlideShow({
        PlayPauseElement: false,
        NextElement: false,
        PrevElement: false,
        ListElement: false,
        width: '100%',
        height: h+'px';
    });
    

    编辑 下面是使用SimpleFadeSlideShow插件进行全屏幻灯片放映的示例代码。但我仍然建议根据所需的幻灯片大小使用足够大的图像,以防止图像像素化。

    <html>
    <head>
    <script src="jq.js" type="text/javascript"></script>
    <script src="slideshow/fadeslideshow.js" type="text/javascript"></script>
    <link href="slideshow/demostylesheet.css" rel="stylesheet" type="text/css">
    <script>
    
    $(document).ready(function(){
    
    var h=$(window).height();
    var w=$(window).width();
    
    
    $('#slideshow').css({
    margin: '0px',
    padding: '0px'
    })
    
    $('body').css('overflow','hidden')
    
    $.when($('#slideshow').find('img').css
    ({
    width: w+'px',
    height: h+'px'
    })
    
    ).then($('#slideshow').fadeSlideShow({
        PlayPauseElement: false,
        NextElement: false,
        PrevElement: false,
        ListElement: false,
        width: w+'px',
        height: h+'px'
    })
    )
    
    
    
    $(window).on('resize',function(){
    
    $(document).ready(function(){
    
    $('body').css('overflow','visible')
    
    $(window).scrollTop($(window).height())
    
    $('#slideshow').find('*').css({
    
     width: $(window).width()+'px',
     height: $(window).height()+'px'
    })
    
    $('#slideshow').find('*').css({
       width: $(window).width()+20+'px',
       height: $(window).height()-$(window).scrollTop()+17+'px'
    })
    
    $(window).scrollTop(0);
    
    $('body').css('overflow','hidden')
    
    $('#slideshow').css({height : $(window).height()+'px', width: $(window).width()+'px'})
    
    
    })
    });
     });
    
    </script>
    
    </head>
    <body>
    <ul id="slideshow" style="width: 640px; height: 480px; position: relative; overflow: hidden;">
    
    <!-- This is the last image in the slideshow--> 
    <li style="position: absolute; width: 640px; height: 480px; display: list-item;">
        <img src="http://www.simplefadeslideshow.com/wp-content/themes/simplefadeslideshow_com/images/3.jpg" width="640" height="480" border="0" alt="">
    </li>
    <li style="position: absolute; width: 640px; height: 480px; display: list-item;">
        <img src="http://www.simplefadeslideshow.com/wp-content/themes/simplefadeslideshow_com/images/2.jpg" width="640" height="480" border="0" alt="">
    </li>
    <li style="position: absolute; width: 640px; height: 480px; display: list-item; opacity: 0.7128896457825363;">
        <img src="http://www.simplefadeslideshow.com/wp-content/themes/simplefadeslideshow_com/images/1.jpg" width="640" height="480" border="0" alt="">
    </li>
    <!-- This is the first image in the slideshow -->
    </ul>
    </body>
    </html>