javascript - 填充屏幕和滚动时图像的纵横比

标签 javascript css resize aspect-ratio

我正在开发一个可以在 www.musidoraland.co.uk 上运行的站点。我有四张图片，无论屏幕大小如何，我都需要填充背景，并且在它们被拉伸(stretch)或压扁的那一刻仍然保持它们的纵横比。但是，我也使用 javascript 来滚动图像，发现我尝试保持宽高比的任何东西往往会停止滚动或根本不起作用。 我真的很感激任何人可能提供的任何帮助、建议或建议，并在此先感谢您。 我的代码是(包含我认为可能有效但无效的 javascript):

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Beauchamp&#39;s Corporate offers a unique service for clients wishing to design a special product for their business.">
<title>Beauchamp&#39;s Corporate</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="transify.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
    $('#maximage').cycle({
        fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        speed: 1000,
        timeout: 7000,
        prev: '#arrow_left',
        next: '#arrow_right'
    });
$('#content').transify({opacityOrig:.7});
$('#menu li').transify({opacityOrig:.7});
    });

    var theWindow        = $(window),
        $bg              = $("#maximage"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(function() {
        resizeBg();
    }).trigger("resize");

</script>
<body>

<div id="logo" style="position:relative;">
<img src="images/logo8.png" alt="Beauchamp's Corporate" width="300px" style="position:absolute;">
</div>

        <div id="cycle-loader">
         </div>   

        <div id="maximage">
            <img src="images/luggagelabel5.jpg" alt="" />
            <img src="images/wallet2.jpg" alt="" />
            <img src="images/luggagelabel4.jpg" alt="" />
            <img src="images/coasters2.jpg" alt="" />        
        </div>

        <a href="" id="arrow_left" class="button trans" title="Previous Photo"></a>

        <a href="" id="arrow_right" class="button trans" title="Next Photo"></a>  

<div id="pages">

            <div id="nav">

                <ul id="menu">
                    <li id="product">Our Product</li>
                    <li id="contact">Contact Us</li>
                </ul>

            </div>

            <div id="content">

                <div id="copy">

                    <div class="page product">

                        <p>We offer a consultation meeting in which we discuss client requirements, design ideas, 
packaging options, budgets, lead times and more...
                            <br />
                        We have a number of designs already in production which we can edit & brand with the client logo or...
                            <br />
                        Following this initial meeting, we produce product drawings, quotes, source leather samples and materials 
specific to this product. Samples can be produced once drawings have been approved by the client.
                            <br />
                        Lead times, delivery schedules and product prices are unique to the client and indervidually calculated 
according to the specific client reqirements.
                            <br />
                        Where possible Beauchamp&#39;s aims to produce products in one of our UK factories however should it be required we will use factories further afield. </p>

                    </div>

                    <div class="page contact">


                        <p>For further information:
                            <br />
                        <em>Email:</em> <a href="info@beauchampsoflondon.com">info@beauchampsoflondon.com</a>
                            <br />
                        <em>Address:</em> 35 Bruton Street, London, W1J 6QY 
                            <br />
                        <em>Website:</em> <a href="www.beauchampscorporate.com">www.beauchampscorporate.com</a>
                            <br />
                        <em>Fashion Accessories Website:</em> <a href="www.beauchampsoflondon.com">www.beauchampsoflondon.com</a></p>

                    </div>

                </div>

            </div>


        </div>      
<script type="text/javascript">
    $.extend(jQuery.easing,
    {
        easeInOutQuart: function(x, t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
            return - c / 2 * ((t -= 2) * t * t * t - 2) + b;
        }
    });
$(function() {
        $('.page').hide();
        $('#menu li').click(
            function() {  
                var content_id = $(this).attr('id');

                $('#menu li').addClass('off');
                $(this).removeClass('off');

                if ($('.page').is(':visible')) 
                {
                    $('.page').hide();
                    $('.'+content_id).show();
                }
                else
                {
                    $('#pages').animate({ height: '300px', easing: 'easeInOutQuart' });

                        console.log($(this).attr('id'));
                    $('.'+content_id).show();
                }  
            });
    });

    $(function() {
        var open = false;
        $('#maximage').click(
            function() {
                $('#pages').animate({ 
                    height: '40px', 
                    easing: 'easeInOutQuart'
                },
                function(){
                    $('.page').hide();
                    $('#menu li').removeClass('off');
                });

            });
            });
            </script>
</body>
</html>

CSS:

    body {
margin:0;
padding:0;
background: #FFFFFF;
}

#logo{
width:300px;
height:149px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}

a.button {
display:block;
width:50px;
height:50px;
margin-top:200px;
opacity: 0.6%;
}

a#arrow_left{
float:left;
background: url('../images/arrowleft1.jpg') no-repeat;
position: relative;
z-index: 100;
}

a#arrow_right{
float:right;
background: url('../images/arrowright1.jpg') no-repeat;
position: relative;
z-index: 100;
}

.trans {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}

#maximage { 
height: 100%; 
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000; 
 }

#maximage img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000; 
}

#pages {
margin:0px;
width:100%;
padding:0px;
bottom:0;
position:fixed;
text-align:center;
height:40px;
}

#pages #content {
margin:0;
font-size: 18px;
}

#content {
width:100%;
padding:0px;
background: url('../images/transparent.jpg') repeat;
overflow:hidden;
}

.product {
padding:0px 0px 0px 0px;
}

.contact {
padding:40px 0px 120px 0px;
}

#nav {
margin:0px auto 0px auto;
width:912px;
padding:0px;
text-align:center;
overflow:hidden;
}

#menu {
clear:both;
width:369px;
margin:0 auto;  
}

#menu li {
font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
float:left;
width:auto;
background: #A68538 repeat;
margin-right:0px;
cursor:pointer;
}

#menu li#contact {
margin:0;
border-left: none;
}

li {
background: #A68538;
list-style: none;
border: 1px solid #000000 ;
width:150px;
text-align:center;
padding:10px;
display:inline;
}

#copy {
width:700px;
margin: 0 auto 0 auto;
}

em {
font-style: normal;
font-weight: bold;
}

最佳答案

试试这个 http://jsfiddle.net/AxjND/它也应该适用于调整大小，但它会在调整大小时重新启动幻灯片。

主要变化

$(document).ready(function() {
    if ($(window).width() * .66625 < $(window).height()) {
    $('#maximage').cycle({
        fx: 'scrollHorz', 
        speed: 1000,
        timeout: 7000,
        width: $('#maximage').width(),
        height: $('#maximage').width() * .66625,
        fit: 1,                
        prev: '#arrow_left',
        next: '#arrow_right'
    });
    } else {
    $('#maximage').cycle({
        fx: 'scrollHorz',
        speed: 1000,
        timeout: 7000,
        width: $('#maximage').height() / .66625,
        height: $('#maximage').height(),
        fit: 1,                
        prev: '#arrow_left',
        next: '#arrow_right'
    });
    }
    if ($(window).width() > $('#maximage').width()) {
        $('#maximage').css({'left': (($(window).width() - $('#maximage').width()) / 2) + 'px'});
    }

和

function resizeBg() {
        $('#maximage').cycle('destroy');
        if ($(window).width() * .66625 < $(window).height()) {
    $('#maximage').cycle({
        fx: 'scrollHorz',
        speed: 1000,
        timeout: 7000,
        width: $(window).width(),
        height: $(window).width() * .66625,
        fit: 1,                
        prev: '#arrow_left',
        next: '#arrow_right'
    });
    } else {
    $('#maximage').cycle({
        fx: 'scrollHorz',
        speed: 1000,
        timeout: 7000,
        width: $(window).height() / .66625,
        height: $(window).height(),
        fit: 1,                
        prev: '#arrow_left',
        next: '#arrow_right'
    });
    }
    if ($(window).width() > $('#maximage').width()) {
        $('#maximage').css({'left': (($(window).width() - $('#maximage').width()) / 2) + 'px'});
    }


    }

    $(window).resize(function() {
        resizeBg();
    }).trigger("resize");

关于javascript - 填充屏幕和滚动时图像的纵横比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12536767/

上一篇：jquery - 动态div定位依次在下方

下一篇：html - 视觉对齐轮播内容和正文的 CSS 解决方案

相关文章：

css - IE 11 开发者工具 : Inspect CSS :focus

css - 为什么 Windows 上的 safari、chrome 或 firefox 不支持 `cursor:context-menu`？但它是通过IE9和Opera吗？

javascript - 为什么 JavaScript 可以在除 Chrome 之外的任何浏览器中执行？

javascript - 使用 Ajax 提交表单

javascript - iframe 设置了错误的宽度

javascript - 类型功能在选择下拉列表中不可用

html - jqGrid调整大小问题

Html/Css 随浏览器大小变化调整大小和裁剪

针对不同 mime 类型调整 PHP 图像大小

javascript - 返回一个数组的函数，该数组在特定索引处具有特定顺序的数字

©2024 IT工具网  联系我们