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

最终效果见 ：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. WebSocket协议再认识

    WebSocket出现之前 在线聊天室.在线客服系统.评论系统.WebIM等这些应用有一个共同点,就是用户不需要去刷新浏览器就能够从服务器获得最新的数据,这就用到了推送技术. WebSocket出现之 ...

  2. Libcurl细说

    libcurl教程   原文地址:http://curl.haxx.se/libcurl/c/libcurl-tutorial.html 译者:JGood(http://blog.csdn.net/J ...

  3. 从零开始学习C#——HelloWorld（一）

    从零开始学习C# 老规矩Hello World 您的第一个程序 visual studio 如何使用就不说了 //编程的开始,Hello World! program in C# using Syst ...

  4. mac下导出kindle单词本的单词

    平常都是用kindle来看电子书,偶尔也会看上一些英文书籍,不可避免的会遇到不少陌生的单词,而kindle专门针对这种需求,做了不少优化,可以直接在kindle上面查阅单词,甚至可以背单词.但是毕竟不 ...

  5. input中的disabled 和 readonly的区别

    1.Readonly只针对input(text / password)和textarea有效, 而disabled对于所有的表单元素都有效, 2.但是表单元素在使用了disabled后,当我们将表单以 ...

  6. C/C++中的联合体

    C/C++中的联合体 利用union可以用相同的存储空间存储不同型别的数据类型,从而节省内存空间.当访问其内成员时可用"."和"->"来直接访问. 当多个 ...

  7. 来一波CSS兼容问题小总结吧

    1.DOCTYPE 影响 CSS 处理; 2.火狐 谷歌等浏览器 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...

  8. Omi教程-组件通讯

    组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点 通过在组件上声明 data 传递给子节点 父容器设置 childrenData ...

  9. API内部文件读取

    直接上代码吧 尝试将项目复制后建一个新的项目,结果总是有问题,不过可以把原项目转换为新项目,方法如下: 1.项目右键在android tools 有个 rename application packa ...

  10. jquery.validate提示错误方法

    修改jquery.validate提示错误方法,将错误信息用弹出框提示 <script src="@Url.Content("~/Scripts/jquery.validat ...