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: ;
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之手风琴图片的更多相关文章
- 一款基于jquery的手风琴图片展示效果
今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- jQuery横向手风琴图片滑块
jQuery横向手风琴图片滑块是一款非常不错的jQuery特效横向手风琴图片滑块插件,可以自动播放,也可以鼠标滑过时切换.+ 欢迎喜欢的朋友下载研究 源码下载页:http://www.huiyi8.c ...
- html、css、js实现手风琴图片滑动
手风琴图片滑动是我最近学的一个图片的效果,感觉不错,分享给大家. 最终效果见 :http://gjhnstxu.me/squeezebox/demo.html 详细代码如下: html代码: < ...
- 基于jquery横向手风琴效果
基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览 源码下载 效果图如下: <div class="flash&quo ...
- jQuery拖动剪裁图片作为头像
图片上传是许多网站的一个常用的功能,有时需要对上传的图片做初步的选择裁剪,比如上传头像.下面就是一个使用HTML5+jQuery实现的图片上传裁剪特效,可以对选择要上传的图片做缩小.放大.拖动和裁剪, ...
- js和jquery如何获取图片真实的宽度和高度
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...
- 使用jquery插件实现图片延迟加载技术（懒加载）
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- 如何解决谷歌浏览器下jquery无法获取图片的尺寸
代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没 ...
- jQuery轻量级京东图片轮播代码等
http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码 查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...
随机推荐
- poj 3501 Escape from Enemy Territory 二分+bfs
水题,不解释. #include<stdio.h> #include<math.h> #include<cstring> #include<algorithm ...
- 让sublime text 3默认新建GBK文件
想让sublime text支持显示或者保存中文,需要安装插件convertToUTF8,具体安装可以问度娘. 安装插件以后,想让保存的html文件支持中文,可以通过ctrl+shift+C来完成.但 ...
- JQuery UI Widget Factory官方Demo
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 也谈读书和书籍选择问题(C#)
前言 读到一篇.net程序员应该看什么书?深有感触.以前曾经用C#也开发过几年的东西.在那里对相关语言和开发都有了一定的了解.这里,结合自己当初的一些体会和见识把一些比较好的书籍也和大家分享一下.这一 ...
- Spark Core源代码分析: Spark任务运行模型
DAGScheduler 面向stage的调度层,为job生成以stage组成的DAG,提交TaskSet给TaskScheduler运行. 每个Stage内,都是独立的tasks,他们共同运行同一个 ...
- 更新mac自带的python
mac lion自带的python是2.7版本的,有点儿低,要使用一些应用的时候还需要3.3以上的,这时可以用以下的方法更新mac自带的python. 先去python的官网下载最新的python,并 ...
- 初步认知MySQL metadata lock(MDL)
http://blog.itpub.net/26515977/viewspace-1208250/ 概述 随着5.5.3引入MDL,更多的Query被“Waiting for table metada ...
- LeetCode: Palindrome Partition
LeetCode: Palindrome Partition Given a string s, partition s such that every substring of the partit ...
- Python实践之（七）逻辑回归（Logistic Regression）
机器学习算法与Python实践之(七)逻辑回归(Logistic Regression) zouxy09@qq.com http://blog.csdn.net/zouxy09 机器学习算法与Pyth ...
- java_log4j多文件配置
今天配置了log4j中写多个文件的内容,配置了半天才搞出来,为了避免类似问题,写个博客吧. 首先说一下需求,每天要在7个文件夹中生成文件,文件格式为xxx.log.2000.01.01,自己开发个写文 ...