Jquery之手风琴图片

时间：2016-04-21 13:20:36 阅读：144 评论：0 收藏：0 [点我收藏+]

标签：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jquery之手风琴图片</title>
    <base target="_blank" />
    <style>
        #cdp * {
            margin: 0;
            padding: 0;
        }

       #cdp ul {
            list-style: none;
        }

       #cdp a {
            text-decoration: none;
        }

       #cdp img {
            border: none;
        }

        #cdp {
            width: 845px;
            height: 320px;
            overflow: hidden;
            margin: 80px auto;
            box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);
        }

            #cdp ul {
                width: 3000px;
            }

            #cdp li {
                display: block;
                width: 140px;
                height: 320px;
                position: relative;
                float: left;
                border-left: 1px solid #aaa;
                box-shadow: 0 0 25px 10px rgba(0,0,0,0.4);
                -moz-transition: all 0.5s;
                -webkit-transition: all 0.5s;
                transition: all 0.5s;
            }

                #cdp li img {
                    display: block;
                    width: 640px;
                }

            #cdp ul:hover li {
                width: 40px;
            }

            #cdp ul li:hover {
                width: 640px;
            }

            #cdp .title {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 640px;
                background: rgba(0,0,0,0.5);
            }

                #cdp .title a {
                    display: block;
                    color: #fff;
                    font-size: 16px;
                    padding: 20px;
                }
    </style>

</head>
<body>
    <div id=‘cdp‘>
        <ul>
            <li>
                <div class=‘title‘>
                    <a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html">bigbang-001</a>
                </div>
                    <img src=‘http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-001.jpg‘>
            </li>
            <li>
                <div class=‘title‘>
                    <a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html">bigbang-002</a>
                </div>
                    <img src=‘http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-003.jpg‘>
            </li>
            <li>
                <div class=‘title‘>
                    <a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html">bigbang-003</a>
                </div>
                    <img src=‘http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-005.jpg‘>
            </li>
            <li>
                <div class=‘title‘>
                    <a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html">bigbang-004</a>
                </div>
                    <img src=‘http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-006.jpg‘>
            </li>
            <li>
                <div class=‘title‘>
                    <a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html">bigbang-005</a>
                </div>
                    <img src=‘http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-002.jpg‘>
            </li>
            <li>
                <div class=‘title‘>
                    <a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html">bigbang-006</a>
                </div>
                    <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-004.jpg">
            </li>
        </ul>
    </div>
</body>
</html>

run:

技术分享

Jquery之手风琴图片

标签：

原文地址：http://www.cnblogs.com/caidupingblogs/p/5416414.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行