繁体   English   中英

jQuery超大不垂直拉伸

[英]jQuery Supersized Not Stretching Vertically

我有一个1920x1200的背景图片,使用jQuery Supersized调整了尺寸。 垂直尺寸调整不正确; 当我调整浏览器的大小时,宽度受到限制时会出现一个缝隙(并且必须垂直填充以进行补偿,但不是)。

我从另一位用户调整了这些设置,该用户的1920x1200图像调整了尺寸。 我想念什么?

首先,CSS:注意高度/宽度为100%:

* {
    margin: 0;
    padding: 0;
}

#supersized a {
    background: none repeat scroll 0 0 #111;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -30;
}

#supersized a.activeslide {
    z-index: -10;
}

插入的JS:

<link media="screen" type="text/css" href="css/master.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
<script src="js/supersized.core.3.2.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

            jQuery(function($){

                $.supersized({

                        //Functionality
                    slideshow : 0, //Slideshow on/off
                    autoplay : 1, //Slideshow starts playing automatically
                    start_slide : 1, //Start slide (0 is random)
                    random : 0, //Randomize slide order (Ignores start slide)
                    slide_interval : 6000, //Length between transitions
                    transition : 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                    transition_speed : 500, //Speed of transition
                    new_window : 1, //Image links open in new window/tab
                    pause_hover : 0, //Pause slideshow on hover
                    keyboard_nav : 0, //Keyboard navigation on/off
                    performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                    image_protect : 1, //Disables image dragging and right click with Javascript
                    image_path : 'img/', //Default image path
                    //Size & Position
                    min_width : 0, //Min width allowed (in pixels)
                    min_height : 0, //Min height allowed (in pixels)
                    vertical_center : 1, //Vertically center background
                    horizontal_center : 1, //Horizontally center background
                    fit_portrait : 1, //Portrait images will not exceed browser height
                    fit_landscape : 0, //Landscape images will not exceed browser width
                    //Components
                    navigation : 0, //Slideshow controls on/off
                    thumbnail_navigation : 0, //Thumbnail navigation
                    slide_counter : 0, //Display slide numbers
                    slide_captions : 0, //Slide caption (Pull from "title" in slides array)                 

                    slides  :   [ {image : 'example.com/image.png', title : 'Test'} ]
                });
            });

        </script>

根据我们的对话和您的新问题,这是一个没有中心的工作提琴。 http://jsfiddle.net/manishie/35qc7yht/

您需要修改以下代码:

horizontal_center: 0, // left align background

另外,请参阅我更新的小提琴,以了解如何正确地进行操作。 所有javascript都在javascript部分中,您不需要html和body标签,您可以使用左侧的菜单添加jquery,还可以添加外部资源(例如超大型库,左侧的菜单也是如此)。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM