jQuery之手风琴图片

时间：2021-07-08 17:42:08
<!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: ;

            padding: ;

        }

       #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:   10px 2px rgba(,,,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:   25px 10px rgba(,,,0.4);

                -moz-transition: all .5s;

                -webkit-transition: all .5s;

                transition: all .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: ;

                bottom: ;

                width: 640px;

                background: rgba(,,,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-</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-</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-</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-</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-</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-</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 {
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/>

jQuery之手风琴图片的更多相关文章

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

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  2. jQuery横向手风琴图片滑块

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

  3. html、css、js实现手风琴图片滑动

    手风琴图片滑动是我最近学的一个图片的效果,感觉不错,分享给大家. 最终效果见 :http://gjhnstxu.me/squeezebox/demo.html 详细代码如下: html代码: < ...

  4. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

  5. jQuery拖动剪裁图片作为头像

    图片上传是许多网站的一个常用的功能,有时需要对上传的图片做初步的选择裁剪,比如上传头像.下面就是一个使用HTML5+jQuery实现的图片上传裁剪特效,可以对选择要上传的图片做缩小.放大.拖动和裁剪, ...

  6. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  7. 使用jquery插件实现图片延迟加载技术（懒加载）

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  8. 如何解决谷歌浏览器下jquery无法获取图片的尺寸

    代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没 ...

  9. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

随机推荐

  1. 51Nod 1268 和为K的组合

    51Nod  1268  和为K的组合 1268 和为K的组合 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 给出N个正整数组成的数组A,求能否从中选出若干个,使 ...

  2. 将Vim改造为强大的IDE—Vim集成Ctags&sol;Taglist&sol;Cscope&sol;Winmanager&sol;NERDTree&sol;OmniCppComplete（有图有真相）（转）

    1.安装Vim和Vim基本插件首先安装好Vim和Vim的基本插件.这些使用apt-get安装即可:lingd@ubuntu:~/arm$sudo apt-get install vim vim-scr ...

  3. 查&ZeroWidthSpace;看&ZeroWidthSpace;和&ZeroWidthSpace;设&ZeroWidthSpace;置&ZeroWidthSpace;o&ZeroWidthSpace;r&ZeroWidthSpace;a&ZeroWidthSpace;c&ZeroWidthSpace;l&ZeroWidthSpace;e&ZeroWidthSpace;数&ZeroWidthSpace;据&ZeroWidthSpace;库&ZeroWidthSpace;的&ZeroWidthSpace;最&ZeroWidthSpace;大&ZeroWidthSpace;连&ZeroWidthSpace;接&ZeroWidthSpace;数

    当前的连接数 select count(*) from v$process; 设置的最大连接数(默认值为150) select value from v$parameter where name = ...

  4. C语言学习-01第一个C语言程序

    一 C语言的历史 C语言是一门通用计算机编程语言,应用广泛.C语言的设计目标是提供一种能以简易的方式编译.处理低级存储器.产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言. 尽管C语言提供 ...

  5. CentOS系统Apache服务器优化详解

    1.Apache优化 Apache能够在CentOS系统正常运行.但是,对于访问量稍大的站点,Apache的这些默认配置是无法满足需求的,我们仍需调整Apache的一些参数,使Apache能够在大访问 ...

  6. HDFS的dfs&period;replication不同验证

    对于上传文件到hdfs上时,当时hadoop的副本系数是几,这个文件的块数副本数就会有几份,无论以后你怎么更改系统副本系统,这个文件的副本数都不会改变,也就说上传到分布式系统上的文件副本数由当时的系统 ...

  7. boost 正则表达式 regex

    boost 正则表达式 regex   环境安装 如果在引用boost regex出现连接错误,但是引用其他的库却没有这个错误,这是因为对于boost来说,是免编译的,但是,正则这个库 是需要单独编译 ...

  8. 云栖大会上宣布即将开源的手淘Atlas什么来头？

    在刚刚过去的云栖大会上,手淘宣布其移动容器化框架Atlas将于2017年年初开源,对这个框架,在过去团队对外部做过一些分享,外界也一直对其十分关注,到现在它终于即将开源了. 本文将介绍Atlas的设计 ...

  9. Java循环一个对象的所有属性，并通过反射给这些属性赋值&sol;取值

    Java循环一个对象的所有属性,并通过反射给这些属性赋值/取值 说到循环遍历,最常见的遍历数组/列表.Map等.但是,在开发过程中,有时需要循环遍历一个对象的所有属性.遍历对象的属性该如何遍历呢?查了 ...

  10. html css 伪样式

    伪类的分类及作用: 引自W3School教程伪元素的分类及作用: 这里就不进行多的描述,原文地址:http://www.it165.net/design/html/201406/2643.html

相关文章