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

最终效果见 ：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. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

  2. lo dash api

    https://lodash.com/docs 用 Lo-Dash 替换 underscore http://segmentfault.com/a/1190000000359484

  3. Flex 开发框架汇总

    1.现有成熟Flex框架   Cairngorm (Adobe Open Source) - MVC framework   PureMVC (Open Source) - MVC framework ...

  4. 用php 进行对文件的操作 （下）

    继续来说文件操作 新建一个文件夹或是删除一个文件夹,并不是只有右击一种方法,还可以用代码来操作 先来看没有运行代码之前的目录下有哪些文件 点击运行代码后再来看有没有增加名为aa的文件夹 添加成功 再来 ...

  5. MyEclipse+Tomcat开发Web项目时修改内容不能及时显示问题解决方法

    问题描述:MyEclipse+Tomcat开发Web项目时,修改的内容不能从浏览器即时显示 原因:缓存问题 解决方法:开启Tomcat的Debug模式 点击如下图红色标记中的图标(Restart th ...

  6. 【noip 2009】 乌龟棋 记忆化搜索&动规

    题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家控制一个乌龟棋子从起 ...

  7. Python系列之heapq内置模块

    heapq 是 python 的内置模块,源码位于 Lib/heapq.py ,该模块提供了基于堆的优先排序算法. 堆的逻辑结构就是完全二叉树,并且二叉树中父节点的值小于等于该节点的所有子节点的值.这 ...

  8. 【读书笔记】-- JavaScript模块

    在JavaScript编程中我们用的很多的一个场景就是写模块.可以看成一个简单的封装或者是一个类库的开始,有哪些形式呢,先来一个简单的模块. 简单模块 var foo = (function() { ...

  9. java byte【】数组与文件读写

    此文全文参考http://blog.csdn.net/sniffer_wang/article/details/7455701,自己加以改进应用,谢了 import java.io.ByteArray ...

  10. java学习阶段三：运算符和结构学习

    import java.util.Scanner;/* * JAVA中运算符的学习: * 算术运算符:+.-.*./ 和 %,两个整数相除,结果还是整数. * 赋值运算符:=.+=.-=.*=./=. ...