侧边广告下拉效果

 演示地址：http://www.17sucai.com/preview/229618/2015-03-27/%E6%89%8B%E6%9C%BA%E6%BB%91%E5%8A%A8/demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>手机</title>

    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .buttomtitle {
            width: 280px;
            height: 50px;
            background: url(../images/toptitle.png) no-repeat;
            background-position: bottom;
            background-position: left;
        }

        /* accordion_container */
        .accordion_container {
            margin: 0 auto;
            width: 280px;

        }

        .accordion_container .content, .accordion_container .tab {
            width: 260px;

        }

        .accordion_container .tab {
            background: #fafafa;
            height: 30px;
            float: left;

        }

        .accordion_container .tab a:hover {
            color: #F00;
            text-decoration: underline;
        }

        .accordion_container .tab a {
            color: #4B7196;
            text-decoration: none;
        }

        a {
            color: inherit
        }

        .accordion_container .tab span {
            float: left;
            margin-top: 10px;
        }

        .accordion_container .tab strong {
            margin-left: 15px;
            float: left;
            margin-top: 10px;
        }

        .accordion_container .tab {
            padding: 10px;

        }

        .accordion_container .content {
            width: 280px;
            height: 120px;
            width: 280px;
        }

        .accordion_container .content img {
            display: block;
            width: 100px;
            height: 100px;
            float: left;
            margin: 10px;
        }

        .accordion_container .first {
            z-index: 5;
            top: 0px;
        }

        .accordion_container .second {
            z-index: 4;
            top: 49px;
        }

        .accordion_container .third {
            z-index: 3;
            top: 98px;
        }

        .accordion_container .four {
            z-index: 2;
            top: 147px;
        }

        .accordion_container .file {
            z-index: 1;
            top: 196px;
        }

        .accordion {
            position: relative;
            overflow: hidden;
            height: 400px;
        }

        .accordion > div {
            position: absolute;
            left: 0px;
            border-left: 1px solid #aaa;
            border-right: 1px solid #aaa;
            left: -1px;
            cursor: pointer;
            background-color: #FFF;
            width: 280px;
        }

        .hide {
        }

        .word {
            width: 130px;
            height: 80px;
            float: right;
            margin-top: 25px;
            margin-right: 20px;
            text-decoration: none;
        }

        .word p a {
            color: #4B7196;
            line-height: 20px;
            text-decoration: none;
        }

        .word p a:hover {
            color: #F00;
            text-decoration: none;
        }
    </style>

    <script type="text/javascript" src="js/jquery.min.js">
    </script>
    <script>
        (function ($) {
            $.fn.jaccordion = function () {
                $(this).each(function () {
                    var c = $(this).children().length;
                    var d = Array(c - 1);
                    var e = Array(c - 1);
                    $(this).children().each(function (a) {
                        if (a == (c - 1))return;
                        e[a] = $(this).position().top;
                        d[a] = $(this).position().top - $(this).children().outerHeight()
                    });
                    var f = this;
                    $(this).children().mouseenter(function () {
                        var a = $(f).children().index(this);
                        var b = $(f).children().index($(f).children('[class~="current"]'));
                        if (!$(this).hasClass('current')) {
                            if (b > a) {
                                for (var i = b - 1; i >= a; i--) {
                                    $($(f).children().get(i)).stop(false, false);
                                    to_top = e[i] + 'px';
                                    $($(f).children().get(i)).animate({top: to_top})
                                }
                            } else if (b < a) {
                                for (var i = b; i < a; i++) {
                                    $($(f).children().get(i)).stop(false, false);
                                    to_top = d[i] + 'px';
                                    $($(f).children().get(i)).animate({top: to_top})
                                }
                            }
                            $(f).children().removeClass('current');
                            $(this).addClass('current')
                        }
                    })
                })
            }
        })(jQuery);
    </script>
</head>
<body>
<div class="accordion_container">
    <div class="buttomtitle"></div>
    <div class="accordion">
        <div class="first current">
            <div class="content"><img src="images/shouji_buttom1.jpg"/>

                <div class="word"><p>价格：<em style="color:#F00;"><strong>￥6088</strong></em></p><br/>

                    <p><a href="#">国强宏利机吾大世</a></p></div>
            </div>
            <div class="tab"><span><img src="images/tea1.jpg"/></span> <strong><a href="#" target="_blank">苹果 iPhone 6
                Plus</a></strong></div>
        </div>
        <div class="second">
            <div class="content second"><a href="#" target="_blank"><img src="images/shouji_buttom2.jpg"/></a>

                <div class="word"><p>价格：<em style="color:#F00;"><strong>￥2999</strong></em></p><br/>

                    <p><a href="#">盛旺鸿运电脑经营</a></p></div>
            </div>
            <div class="tab"><span><img src="images/tea2.jpg"/></span> <strong><a href="#" target="_blank">OPPO
                R5</a></strong></div>
        </div>
        <div class="third">
            <div class="content third"><a href="#" target="_blank"><img src="images/shouji_buttom3.jpg"/></a>

                <div class="word"><p>价格：<em style="color:#F00;"><strong>￥4999</strong></em></p><br/>

                    <p><a href="#">八一数码手机专营</a></p></div>
            </div>
            <div class="tab"><span><img src="images/tea3.jpg"/></span> <strong><a href="#" target="_blank">索尼Xperia
                Z3</a></strong></div>
        </div>
        <div class="four">
            <div class="content four"><a href="#" target="_blank"><img src="images/shouji_buttom4.jpg"/></a>

                <div class="word"><p>价格：<em style="color:#F00;"><strong>￥5399</strong></em></p><br/>

                    <p><a href="#">八一数码手机专营</a></p></div>
            </div>
            <div class="tab"><span><img src="images/tea4.jpg"/></span> <strong><a href="#" target="_blank">三星GALAXY
                Note4</a></strong></div>
        </div>
        <div class="file">
            <div class="content file"><a href="#" target="_blank"><img src="images/shouji_buttom5.jpg"/></a>

                <div class="word"><p>价格：<em style="color:#F00;"><strong>￥999</strong></em></p><br/>

                    <p><a href="#">宏达手机旗舰店</a></p></div>
            </div>
            <div class="tab"><span><img src="images/tea5.jpg"/></span> <strong><a href="#" target="_blank">中兴V5 Max</a></strong>
            </div>
        </div>
    </div>
</div>
</div> </body>
</html>

侧边广告下拉效果

推荐阅读