jQuery之手风琴图片

<!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 {
             845px;
            height: 320px;
            overflow: hidden;
            margin: 80px auto;
            box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);
        }

            #cdp ul {
                 3000px;
            }

            #cdp li {
                display: block;
                 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;
                     640px;
                }

            #cdp ul:hover li {
                 40px;
            }

            #cdp ul li:hover {
                 640px;
            }

            #cdp .title {
                position: absolute;
                left: 0;
                bottom: 0;
                 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>

<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 { 845px; height: 320px; overflow: hidden; margin: 80px auto; box-shadow: 0 0 10px 2px rgba(0,0,0,0.4); } #cdp ul { 3000px; } #cdp li { display: block; 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; 640px; } #cdp ul:hover li { 40px; } #cdp ul li:hover { 640px; } #cdp .title { position: absolute; left: 0; bottom: 0; 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/>

不努力，还要青春干什么？

相关阅读:
【Auto.js images.matchTemplate() 函数的特点】
Jquery动态bind绑定已有函数，函数自动执行的问题解决方法
浅谈javascript的运行机制
Git
下拉框的点击事件
点击其他区域菜单消失
Chrome 中的 JavaScript 断点设置和调试技巧
前端编辑工具有感
我的jsonp跨域问题
浅谈Json和jsonp

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