Design My Virtual Home 之相册展示台

最新推荐文章于 2023-03-15 21:23:58 发布

hi_dzj

最新推荐文章于 2023-03-15 21:23:58 发布

阅读量1.3k

点赞数

分类专栏： css My Virtual Home HTML

本文链接：https://blog.csdn.net/hi_dzj/article/details/9244285

版权

HTML 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

My Virtual Home

5 篇文章 0 订阅

订阅专栏

本文介绍如何设计一个相册展示台，通过将照片分切成4份或多份，实现鼠标移过切换的效果。步骤包括页面切块、布局设置等，同时提供了相关CSS定位知识的参考资料。

摘要由CSDN通过智能技术生成

展示效果：

将照片分切成4份或多份，鼠标移动到对应块进行切换

实际效果参照：http://www.17sucai.com/pins/419.html

现在我们重新开始着手做吧！

第一步

首先将页面切成四个块

布局代码

 <div id="slide" class="slide bg1">
        <div class="slide_box bg1">
        </div>
        <div class="slide_box bg1">
        </div>
        <div class="slide_box bg1">
        </div>
        <div class="slide_box bg1">
        </div>
    </div>

css样式

 /*******start初始化********/
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td
        {
            margin: 0;
            padding: 0;
        }
        fieldset, img
        {
            border: 0;
        }
        /*******end********/
        .slide
        {
            width: 800px;
            height: 550px;
            margin: 0 auto;
            background: #000;
            border: 1px solid #d21bd4;
            overflow: hidden;
        }
        .slide_box
        {
            width: 24.8%;
            height: 550px;
            float: left;
            border-right: 1px solid #999;
            cursor: pointer;
            background-repeat: no-repeat;
        }
       .bg1
        {
            background-image: url(images/陈大师.jpg);
            background-size: cover;
        }
        .bg2
        {
            background-image: url(images/全家福2.jpg);
            background-size: cover;
        }
        .bg3
        {
            background-image: url(images/全家福3.jpg);
            background-size: cover;
        }
        .bg4
        {
            background-image: url(images/全家福4.jpg);
            background-size: cover;
        }

效果：

第二步

设置background-position来定位每一个小块的背景位置，以达到四个块合为一张图片，并利用JQuery对其进行动画处理

   <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">

        $(function() {

            /******start注册鼠标移动事件*******/
            $("#slide > .slide_box").mouseover(function() {
                var focusIndex = $(this).index(); //从0开始索引
                var c = "bg" + (focusIndex + 1);
                
                //对所有子块设置背景并设置初始的背景起点
                $(".slide_box").stop().css("backgroundPosition", "800px 0").removeClass("bg1 bg2 bg3 bg4").addClass(c);
                //依次滚动到对应的位置
                $("#slide > .slide_box:eq(0)").stop().animate({ backgroundPosition: "0 0" }, 1000);
                $("#slide > .slide_box:eq(1)").stop().animate({ backgroundPosition: "-200px 0" }, 2000);
                $("#slide > .slide_box:eq(2)").stop().animate({ backgroundPosition: "-400px 0" }, 3000);
                $("#slide > .slide_box:eq(3)").stop().animate({ backgroundPosition: "-600px 0" }, 4000,
                //执行完后将背景再次确定
				function() {
				    $(".slide_box,#slide").removeClass("bg1 bg2 bg3 bg4").addClass(c)
				}
			);

            });
        });
    </script>

目前只在chrome中测试，IE可能无效因为backgroundPosition它没有只有backgroundPosition-x，所以要兼容的话还得另做。

效果图：这是一个正在切换的效果

第三步

添加介绍栏

css样式

  /***********start主题介绍栏************/
        .slide_box .topicbox
        {
            position: absolute;
            left: 0;
            bottom: 0;
            width:100%;
            color:White;
        }
        .slide_box .topicbox .navtitle
        {
            height: 2.5em;
            line-height: 2.5em;
            overflow: hidden;
            font-size: 1.5em;
            text-align: center;
            border-bottom:solid 1px black;
        }
        .slide_box .topicbox .navsumary
        {
            padding: 0.6em;
            margin-bottom: 0.2em;
            font-size: 1em;
        }
        .slide_box div.bg
        {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
            left: 0;
            top: 0;
            background-color: #515151;
            filter: alpha(opacity=60);
            opacity: .6;
        }
        .topicbox .txt
        {
             z-index: 2;
              position:relative; /*相对论*/
        }
        .slide .topicbox .navtitle a, .slide .topicbox .navtitle a:link, .slide .topicbox .navtitle a:visited
        {
            color: #fff;
            text-decoration: none;
        }
        .slide .topicbox .navtitle a:hover
        {
            color: #fff;
            text-decoration: underline;
        }
        /***********end***********/

div布局

<body>
    <div id="slide" class="slide bg2">
        <div class="slide_box bg2" style="background-position: 0 0;">
            <div class=" topicbox">
                <div class="navtitle">
                    <div class="bg">
                    </div>
                    <div class="txt">
                        <a href="http://blog.csdn.net/hi_dzj">主题</a></div>
                </div>
                <div class="navsumary">
                    <div class="bg">
                    </div>
                    <div class="txt">
                        详细介绍</div>
                </div>
            </div>
        </div>
        <div class="slide_box bg2" style="background-position: -200px 0;">
            <div class=" topicbox" >
                <div class="navtitle">
                    <div class="bg">
                    </div>
                    <div class="txt">
                        <a href="http://blog.csdn.net/hi_dzj">主题</a></div>
                </div>
                <div class="navsumary">
                    <div class="bg">
                    </div>
                    <div class="txt">
                        详细介绍</div>
                </div>
            </div>
        </div>
        <div class="slide_box bg2" style="background-position: -400px 0;">
            <div class=" topicbox">
                <div class="navtitle">
                    <div class="bg">
                    </div>
                    <div class="txt">
                        <a href="http://blog.csdn.net/hi_dzj">主题</a></div>
                </div>
                <div class="navsumary">
                    <div class="bg">
                    </div>
                    <div class="txt">
                        详细介绍</div>
                </div>
            </div>
        </div>
        <div class="slide_box bg2" style="background-position: -600px 0;">
            <div class=" topicbox">
                <div class="navtitle">
                    <div class="bg">
                    </div>
                    <div class="txt">
                        <a href="http://blog.csdn.net/hi_dzj">主题</a></div>
                </div>
                <div class="navsumary">
                    <div class="bg">
                    </div>
                    <div class="txt">
                        详细介绍</div>
                </div>
            </div>
        </div>
    </div>
</body>

效果图