0

一番下の中央にある 2 つのタブを作成しようとしています。クリックすると、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

4

1 に答える 1

0

まず第一に、あなたのサイトには多くの注意が必要です。他のことをする前に、読みやすいテキストを用意する必要があります...

つまり、次を使用して透明性を模倣できます。

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

タブを上にスライドさせるには、 http://www.bennadel.com/blog/1827-Using-jQuery-s-SlideUp-and-SlideDown-Methods-With-Bottom-Positioned-のような jQuery のスライド アニメーションを使用する必要があります。 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();
            }



        });
});

正直なところ、プロに相談する必要があるように見えますが、本当に学び、自分でやりたい場合は、探しているものが得られるまで、さまざまなブラウザーでアニメーションを練習してください!

于 2012-09-05T13:05:05.777 に答える