gpt4 book ai didi

jQuery 超大不垂直拉伸(stretch)

转载 作者:太空宇宙 更新时间:2023-11-04 12:54:00 25 4
gpt4 key购买 nike

我有一张 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>

最佳答案

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

需要修改以下代码:

horizontal_center: 0, // left align background

另请参阅我更新的 fiddle ,了解如何正确地进行操作。所有 javascript 都放在 javascript 部分,您不需要 html 和 body 标签,您使用左侧的菜单添加 jquery,并添加外部资源(例如超大库也带有左侧的菜单。

关于jQuery 超大不垂直拉伸(stretch),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25966192/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com