个人中心
gpt4 book ai didi

jquery - 屏幕底部的选项卡，单击时随内容上升

转载 作者：行者123 更新时间：2023-11-28 13:42:00 26 4
gpt4 key购买 nike

我正在尝试制作两个位于底部居中的选项卡，当单击时整个选项卡会上升并显示内容 - 就像他们在 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

最佳答案

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

也就是说，您可以使用以下方式模仿它们的透明度:

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



        });
});

老实说，您似乎应该咨询专业人士，但如果您真的想学习并自己动手，请在不同浏览器中练习动画，直到获得所需内容!

关于jquery - 屏幕底部的选项卡，单击时随内容上升，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12281800/

26 4 0
文章推荐： css - 寻找应用的 CSS
文章推荐： JavaScript 坐标显示为大于图像宽度和高度
文章推荐： swift - 从 Firebase 闭包返回数据
文章推荐： html - 如何使用 JavaScript 在 Firefox 鼠标悬停时显示图像的灰度版本？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com