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

最终效果见 ：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. 通过RMAN克隆11g数据库（基于active database）

    11g的RMAN duplicate 可以通过Active databaseduplicate和Backup-based duplicate两种方法实现.这里的测试使用的是Active databas ...

  2. 使用Eclipse开发及测试Spark的环境搭建及简单测试

    一.下载专门开发的Scala的Eclipse 1.下载地址:http://scala-ide.org/download/sdk.html,或链接:http://pan.baidu.com/s/1hre ...

  3. 将SWF文件用作资源打包

    使用Flash开发网页游戏少不了与各种美术资源打交道.对于静态资源的那就是各种图片,对于会动的资源可以考虑直接做成swf.制作成swf的美术资源又可以分为两种:一种是直接将关键帧罗列在主时间轴上,那么 ...

  4. C#中 Thread，Task，Async/Await，IAsyncResult 的那些事儿！

    说起异步,Thread,Task,async/await,IAsyncResult 这些东西肯定是绕不开的,今天就来依次聊聊他们 1.线程(Thread) 多线程的意义在于一个应用程序中,有多个执行部 ...

  5. (译)AngularJS1.3.0 开发者指南(四) -- 控制器

    理解Controllers 在AngularJS中, Controller是一个Javascript构造函数, 常常被用来扩展 Angular Scope 对象. 控制器通过 ng-controlle ...

  6. Linux系统（三）系统基础扫盲大全

    序言 如果大家都爱装逼,一般会偏爱使用安装最小化的liunx系统,那么你的系统就不带图形化的桌面功能,这样对于一个想装B的初学者来说,Liunx就是黑漆马虎,一望无际的黑屏,黑屏,如何快速的对liun ...

  7. NSMutableAttributedString

    开发过程中,经常会遇到动态计算行高的问题, - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)op ...

  8. jQuery的拾色器

    代码如下 1.js <link href="css/farbtastic.css" rel="stylesheet" /> <script t ...

  9. MVC中登录页图片验证码总结

    直接上代码了 using System;using System.Collections.Generic;using System.Drawing;using System.Drawing.Imagi ...

  10. android开发过程中踩过的坑

    1) 4.X下 viewgroup 不一定会向下传递requestLayout,当onlayout的速度比较慢(比如子View比较复杂之类的原因),系统会跳帧!此时子View下层的view可能就不会再 ...