手风琴效果 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这 ...
随机推荐
- js移动端自适应动态设置html的fontsize
JS设计移动端页面时会遇到自适应问题,大多数都知道用rem来设置页面的比例大小,下面就来说几种常见的html中的fontsize设置方法: 1.使用flexible.js插件库. 淘宝就是利用这个来 ...
- Oracle中的一些基本操作
关于Oracle中的一些基本操作,包括表空间操作,用户操作,表操作 --创建表空间 create tablespace itheima datafile 'I:\oracle\table\itheim ...
- 20个Python代码段，你需要立刻学会，好用到哭！
Python是一种非BS编程语言.设计简单和易读性是它广受欢迎的两大原因.正如Python的宗旨:美丽胜于丑陋,显式胜于隐式. 记住一些帮助提高编码设计的常用小诀窍是有用的.在必要时刻,这些小诀窍能够 ...
- Java生鲜电商平台-SpringCloud微服务开发中的数据架构设计实战精讲
Java生鲜电商平台-SpringCloud微服务开发中的数据架构设计实战精讲 Java生鲜电商平台: 微服务是当前非常流行的技术框架,通过服务的小型化.原子化以及分布式架构的弹性伸缩和高可用性, ...
- 在 sql server 中批量删除表
通过查询系统表,可以批量获得 drop 语句,执行即可... select 'drop table '+name+';' from sys.tables
- tomcat配置通过域名访问项目
tomcat配置通过域名访问项目,是修改conf/server.xml里面的配置信息实现.具体如下: (1)修改Connector节点的port属性值 <Connector port=" ...
- redis分享
Redis介绍 ´Redis是一种基于键值对的NoSQL数据库. ´Redis基于内存来存放数据. ´速度快,官方给出读写性能可达到10万/秒(数据存内存,C语言实现,单线程架构). ´丰富的数据结构 ...
- typora使用说明
一级标题 # 空格 编写内容 二级标题 ## 空格 编写内容 有序内容 1.+Tab 无序内容 -+Tab 代码块 print("hello wrold") typora快捷键 c ...
- 8.python3实用编程技巧进阶（三）
3.1.如何实现可迭代对象和迭代器对象 #3.1 如何实现可迭代对象和迭代器对象 import requests from collections.abc import Iterable,Iterat ...
- 6.GC垃圾回收算法和垃圾收集器的关系
JAVAGC垃圾回收机制和常见垃圾回收算法 推荐博客:JVM垃圾回收机制和常见垃圾回收算法 JVM的内存结构.垃圾回收算法