Question

我正在尝试制作两个以底部为中心的标签，点击后整个内容上升并显示内容 - 就像他们在www.hunterandsand.com上所做的一样，但我似乎无法弄清楚他们是如何做到的用他们的代码。他们如何让它变得透明。任何帮助都非常有用，谢谢。

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">
$(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'
    });
</script>
</script>
<body>

        <div id="logo"><img src="images/logo1.jpg" alt="Beauchamp's Corporate"></div>

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

        <div id="maximage">
            <img src="images/boat1.jpg" alt="" />
            <img src="images/car1.jpg" alt="" />
            <img src="images/dock1.jpg" alt="" />
            <img src="images/glass1.jpg" alt="" />
            <img src="images/hotel1.jpg" alt="" />   
            <img src="images/table1.jpg" alt="" />         
        </div>

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

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

            <div id="nav">

                <ul id="menu">
                    <li id="services">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 />
                        Email: <a href="info@beauchampsoflondon.com">info@beauchampsoflondon.com</a>
                            <br />
                        Address: 35 Bruton Street, London, W1J 6QY 
                            <br />
                        Website: <a href="www.beauchampscorporate.com">www.beauchampscorporate.com</a>
                            <br />
                        Fashion Accessories Website: <a href="www.beauchampsoflondon.com">www.beauchampsoflondon.com</a></p>

                    </div>

                </div>

            </div>


        </div>      

</body>
</html>

的CSS：

#logo{
width:180px;
height:113px;
margin-left:auto;
margin-right:auto;
margin-top:-10px;
}

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

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

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

#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; 
}
li {
list-style:none;
}

要查看它正在运行 - www.musidoraland.co.uk

Answer 1

首先，您的网站需要大量关注。在你做任何其他事情之前，必须有可读的文字......

那说你可以通过使用：

来模仿他们的透明度

#[Tab_Container] {background:transparent url([Image_Dir]/[Transparent_Image.EXT]) repeat;}

要使标签向上滑动，您应该使用jQuery的滑动动画，例如http://www.bennadel.com/blog/1827-Using-jQuery-s-SlideUp-and-SlideDown-Methods-With-Bottom-Positioned-Elements.htm

这似乎是您的示例网站如何执行此操作：

$(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();
            }



        });
});

说实话，看起来你应该咨询专业人士，但如果你真的想学习并自己动手练习不同浏览器中的动画，直到你得到你想要的东西！

屏幕底部的选项卡，单击时会显示内容

1 个答案: