手风琴效果 animate
animate的手风琴效果
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul{
list-style: none;
} .wrap {
width: 1020px;
margin: 100px auto 0;
}
.wrap li{
width: 200px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var list = $("ul li");
list.each(function(index,item){
$(this).css('background','url(images/'+ (index + 1)+'.jpg)');
$(this).mouseenter(function(){
$(this).stop().animate({width:600},1000).siblings().stop().animate({width:100},1000)
})
$(this).mouseleave(function(){
list.stop().animate({width:200},1000);
})
})
</script>
手风琴效果 animate的更多相关文章
- 使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...
- jQuery效果之简单的手风琴效果
实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp" ...
- jQuery插件实例五：手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
- jQuery插件实例四：手风琴效果[无动画版]
手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...
- 基于jquery横向手风琴效果
基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览 源码下载 效果图如下: <div class="flash&quo ...
- js实现手风琴效果
之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> & ...
- jquery横向手风琴效果2
<!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...
- jquery横向手风琴效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于css3实现手风琴效果
终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...
随机推荐
- 洛谷 P2176（最短路）
###题目链接 洛谷 P2176 ### 题目大意: 已知农夫从 1 走到 N 点,一定走的是最短路.问你将某条路的长度变为其两倍后,农夫从 1 走到 N 点的路程最大增加多少,输出最大增量. 分析: ...
- Java读写分离实现
1.查看源码 AbstractRoutingDataSource类中有个determineTargetDataSource方法 protected DataSource determineTarget ...
- js常用但是不容易记住的代码
<!-- iframe 自适应高度度 --><iframe src="__CONTROLLER__/showlist" frameborder="0&q ...
- 基于 HTML5 WebGL 构建智能城市 3D 场景
前言 随着城市规模的扩大,传统的方式很难彻底地展示城市的全貌,但随着 3D 技术的应用,出现了 3D 城市群的方式以动态,交互式地把城市全貌呈现出来.配合智能城市系统,通过 Web 可视化的方式,使得 ...
- MongoDB for OPS 02：复制集 RS 配置
写在前面的话 对于生产环境而言,除非是非常不重要的业务,且该业务允许我们出现一定时间的停机,我们一般才会使用单节点,且该单节点必须要有完善的备份手段. RS 复制集 我们这里采取一主两从的方式搭建复制 ...
- HTTP 响应的分块传输
Transfer-Encoding 响应头用于告诉客户端服务器发送内容的编码格式. 其可选值有: chunked:数据分块发送.此时应缺省 Content-Length 响应头. compress:使 ...
- 谈谈EF Core实现数据库迁移
作为程序员,在日常开发中,记忆犹新的莫过于写代码,升级程序.升级程序包含两部分:一是,对服务程序更新:二是,对数据库结构更新.本篇博文主要介绍数据库结构更新,在对数据库升级时,不知道园友们是否有如下经 ...
- Linux帮助——常用命令
Linux帮助——常用命令 摘要:本文主要学习了Linux系统中常用的一些命令. uname命令 uname命令可以显示电脑以及操作系统的相关信息. 基本语法 uname [选项] 选项说明 -a:显 ...
- ES6入门系列 ----- 使用Proxy 实现观察者模式
观察者模式是指函数自动观察数据对象的变化, 一旦对象有变化,函数就会自动执行. 它定义了一种一对多的依赖关系,我们用Proxy来实现一个简单的观察者模式(PS: 初学我们认为 观察者模式 == 发布订 ...
- Mysql—存储引擎详解
存储引擎基本操作 查看数据库支持的所有的存储引擎 mysql> show engines; 查看数据库目前使用的引擎 mysql> show varlables like "%s ...