手风琴图片滑动是我最近学的一个图片的效果，感觉不错，分享给大家。

最终效果见 ：http://gjhnstxu.me/squeezebox/demo.html

详细代码如下：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴图片</title>
<link rel="stylesheet" type="text/css" href="demo.css">

<script type="text/javascript" src = "jquery.js"></script>
<script type="text/javascript" src = "demo.js"></script>
</head>
<body>
<div id="pic">
<ul>
<li class="pic1">
<a href="#">
<div class="txt">
<p class="p1">作者： 默默的沫沫</p>
<p class="p2">我的个人拉萨之旅 || 日光之城</p>
</div>
</a>
</li>
<li class="pic2">
<a href="#">
<div class="txt">
<p class="p1">作者： 默默的沫沫</p>
<p class="p2">我的个人成都之旅 || 美食之城</p>
</div>
</a>
</li>
<li class="pic3">
<a href="#">
<div class="txt">
<p class="p1">作者：默默的沫沫</p>
<p class="p2">我的个人丽江之旅 || 艳遇之城</p>
</div>
</a>
</li>
<li class="pic4">
<a href="#">
<div class="txt">
<p class="p1">作者： 默默的沫沫</p>
<p class="p2">我的个人南昌之旅 || 火热之城</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>

css代码：

*{
padding: 0px;
margin: 0px;
font-family: "微软雅黑";
list-style-type: none;
}
a{
text-decoration: none;
}
#pic{
width: 1100px;
height: 440px;
margin-top: 70px;
/*border: solid 1px red;*/
}
#pic ul li{
float: left;
width: 100px;
height: 440px;
}
#pic ul .pic4{
width: 800px;
}
.pic1{
background-image: url(img/1.jpg);
}
.pic2{
background-image: url(img/2.jpg);
}
.pic3{
background-image: url(img/3.jpg);
}
.pic4{
background-image: url(img/4.jpg);
width: 800px;
}

.txt{
background-color: #000;
background: rgba(0,0,0,0.5);
height: 440px;
width: 100px;
}
.txt p{
float: left;
color: #fff;
}
.txt .p1{
font-size: 12px;
width: 12px;　　　　　　　　　　//将文字大小和p1的宽度设为一样，就可以有文字呈一列显示的效果
padding: 25px 25px 0px 20px;
}
.txt .p2{
font-size: 14px;
width: 14px;
padding-top: 25px;
}

js代码：

$(function(){
$("#pic ul li").mouseover(function(){
$(this).stop(true).animate({width:"800px"},1000).siblings().stop(true).animate({width:"100px"},1000);       //animate()可以使图片滑动具有动画效果，stop(true)是图片滑动更加流畅，不加stop()则图片的反应比较慢
});
});

html、css、js实现手风琴图片滑动的更多相关文章

  1. 纯CSS3手风琴图片滑动特效

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 制作CSS3制作手风琴图片滑动效果,我们仅 ...

  2. webpack下css/js/html引用图片的正确方式

    在webpack的处理下,为了使引用的图片被打包编译(以把src的图片文件编译到dist中或者对src的文件进行base64编码),应使用如下引用方式: 1. 在html/ejs等中引用图片: 借助r ...

  3. 个人学习JQ插件编写成果：little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  4. javascript效果：手风琴、轮播图、图片滑动

    最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...

  5. js实现图片滑动显示效果

    js实现图片滑动显示效果 今天用户提出一个需求,要实现一个滑动显示新闻列表的效果,具体就是图片新闻自动滑动显示,鼠标移上去就停止滑动,移开就继续滑动:效果如下: 第一:先用HTML和CSS实现显示,主 ...

  6. 【javascript/css】Javascript+Css实现图片滑动浏览效果

    今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...

  7. JS切割图片-滑动门效果

    转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  8. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  9. Spring MVC程序中得到静态资源文件css,js,图片

    转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题, ...

随机推荐

  1. SVG的path的使用

    SVG的path的使用: 参考:http://justcoding.iteye.com/blog/2226354 <%@ page language="java" conte ...

  2. datatable 使用详细说明

    要注意的是,要被dataTable处理的table对象,必须有thead与tbody,而且,结构要规整(数据不一定要完整),这样才能正确处理.以下是在进行dataTable绑定处理时候可以附加的参数: ...

  3. win7如何安装mircosoft SDKs

    WIN7不能安装SDK 7.1是因为系统程序里含Microsoft .NET Framework 4 Extended和Microsoft .NET Framework 4 Client Profil ...

  4. FMS带宽的需求计算法

    在开始一个使用 FLASH MEDIA SERVER的项目开始之前,最好能够对你项目使用FLASH MEDIA SERVER 3的带宽需求进行计算.这样对你的项目最终的实现效果,会有一个稳定的结果:去 ...

  5. lufylegend库 LGraphics

    lufylegend库 LGraphics <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. POJ2185(KMP)

    Milking Grid Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 7896   Accepted: 3408 Desc ...

  7. [Linux] 使用openssl实现RSA非对称加密

    简单定义:公钥和私钥,加密和解密使用的是两个不同的密钥,所以是非对称 系统:ubuntu 14.04 软件:openssl java php 生成公钥私钥 使用命令生成私钥: openssl genr ...

  8. [工作总结] QA小鸟一年了

    夏至又至,在北京360的一年过去了.作为一名QA,我时常感到迷惑,如何靠大部分的手工测试+少部分的自动化测试来保证产品功能的质量.对于开发完成后,给到我手上的文件和功能说明,我很少有信心说能够通过自己 ...

  9. JAVA版A星算法实现

    import java.util.ArrayDeque; import java.util.ArrayList; import java.util.Collections; import java.u ...

  10. UI进阶 即时通讯之XMPP登录、注册

    1.XMPP环境搭建 http://www.cnblogs.com/fearlessyyp/p/5506644.html 第一次打开可能会有点儿慢,图片很多,步骤很详细,祝搭建成功. 2.工程中添加X ...