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 {
            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:

时间: 2024-10-08 19:35:20

Jquery之手风琴图片的相关文章

一款基于jquery的手风琴图片展示效果

今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="page-container"> <div class="flex-container"> <div class="country netherlands"> <div> Nethe

jQuery横向手风琴图片滑块

jQuery横向手风琴图片滑块是一款非常不错的jQuery特效横向手风琴图片滑块插件,可以自动播放,也可以鼠标滑过时切换.+ 欢迎喜欢的朋友下载研究 源码下载页:http://www.huiyi8.com/sc/8397.html

18款jquery抽屉式手风琴导航特效代码分享

jquery hover抽屉式导航图片展开收缩代码 jQuery仿瑞丽鼠标滑过图片手风琴展开特效 jQuery扁平风格的图标导航手风琴切换代码 jQuery左右滑动手风琴轮播切换特效 jQuery仿AnG无双科技滑动手风琴特效源码 jquery图片信息列表选项卡左右切换代码 jQuery hover水滴导航切换选项卡栏目代码 jquery手风琴菜单制作横向菜单切换手风琴效果代码 jquery水平滑动手风琴菜单鼠标点击图片展示手风琴菜单代码 jQuery仿艺龙旅行网图片手风琴特效 jQuery C

18款jquery抽屉式手风琴导航特效代码

jquery hover抽屉式导航图片展开收缩代码 jQuery仿瑞丽鼠标滑过图片手风琴展开特效 jQuery扁平风格的图标导航手风琴切换代码 jQuery左右滑动手风琴轮播切换特效 jQuery仿AnG无双科技滑动手风琴特效源码 jquery图片信息列表选项卡左右切换代码 jQuery hover水滴导航切换选项卡栏目代码 jquery手风琴菜单制作横向菜单切换手风琴效果代码 jquery水平滑动手风琴菜单鼠标点击图片展示手风琴菜单代码 jQuery仿艺龙旅行网图片手风琴特效 jQuery C

基于jquery横向手风琴效果

基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash"> <div class="con"> <ul> <li class="current ti1"> <h3>关于我们</h3> <div class="show"> &

jQuery实现的图片等比例缩放效果

jQuery实现的图片等比例缩放效果:如果一个容器中放一个比容器还要大的图,那就可能就造成布局出现问题,就算是不容器大,有时候也看起来不够美观,这时候就要限制图片的尺寸,当然不能变形,否则就难看了,下面就介绍一下如何使用jQuery实现等比例缩放效果.代码如下: <div id="demo"> <img src="a.jpg" width="800" height="300" alt="图片&quo

jquery实现的图片延时加载插件

jquery实现的图片延时加载插件: 在很多网站尤其是图片站,都采用了图片延时加载效果,这样可以有效的减轻服务器的压力,有点自然不言而喻了,下面就和大家分享一个图片延时加载的插件,希望能够给大家带来一定的帮助. 代码如下: <script type="text/javascript"> (function( $ ){ $.fn.imglazyload=function( options ) { var o=$.extend({ attr:'lazy-src', contai

谷歌浏览器下jquery无法获取图片的尺寸解决方案

谷歌浏览器下jquery无法获取图片的尺寸解决方案: 本章节介绍一下在谷歌浏览器下利用jquery无法获取图片尺寸的现象,而在IE和火狐浏览器下能够正常获得,当然也不是任何时候都无法获取图片尺寸,下面就来介绍一下如何解决此问题. 代码如下: $(document).ready(function(){   var img_h=$img.height();    var img_w=$img.width();  }) 以上代码在IE和火狐中没有问题,但是在谷歌中可能会出现问题,之所以没货的尺寸就是因

常用的jQuery九宫格布局图片展示特效代码

jquery九宫格布局图片鼠标经过遮罩显示文字效果 jQuery图片九宫格布局鼠标悬停显示文字效果代码 jquery九宫格图片制作鼠标悬停图片滑动展示特效 jquery仿qq图片九宫格布局点击按钮图片换一换效果代码 jQuery响应式图片九宫格布局点击图片查看大图效果代码 jquery hover事件鼠标悬停九宫格图片高亮显示代码 jQuery百度新闻文字列表九宫格布局鼠标悬停文字滑动效果代码 jquery hover九宫格图片鼠标悬停上下滑动图片切换显示代码 jquery win8风格九宫格布