手风琴效果（jQuery）
简单的手风琴效果实现实际比看起来简单，只是改变当前的元素宽度和其他元素的宽度，其代码如下（图片什么的都要换成自己噢）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{width: 100%;height: 260px;margin: 10px auto;}
ul li{list-style: none;float: left;width: 200px;height: 260px;position: relative;}
ul li div{width: 100%;height: 260px;}
ul .text{width: 100%;height: 260px;background: rgba(0,0,0,0.2);position: absolute;}
.text h1{width: 30px;font-size: 30px;color: #fff;margin: 30px auto;}
.bg1{background: url("imgs/1.jpg") center;}
.bg2{background: url("imgs/2.jpg") center;}
.bg3{background: url("imgs/3.jpg") center;}
.bg4{background: url("imgs/4.jpg") center;}
.bg5{background: url("imgs/5.jpg") center;}
.bg6{background: url("imgs/6.jpg") center;}
</style>
<script src="libs/jquery-1.11.3.js"></script>
<script>
$(function () {
$('ul li').hover(function () {
$(this).find('.text').css('display','none');
$(this).stop().animate({
width : '400px'
}).siblings().stop().animate({
width : '160px'
});
}, function () {
$(this).children('.text').css('display','block');
$('ul li').stop().animate({
width : '200px'
})
})
})
</script>
</head>
<body>
<div class="box">
<ul>
<li class="li1">
<div class="text"><h1>简单手风琴1</h1></div>
<div class="bg1"></div>
</li>
<li>
<div class="text"><h1>简单手风琴2</h1></div>
<div class="bg2"></div>
</li>
<li>
<div class="text"><h1>简单手风琴3</h1></div>
<div class="bg3"></div>
</li>
<li>
<div class="text"><h1>简单手风琴4</h1></div>
<div class="bg4"></div>
</li>
<li>
<div class="text"><h1>简单手风琴5</h1></div>
<div class="bg5"></div>
</li>
<li>
<div class="text"><h1>简单手风琴6</h1></div>
<div class="bg6"></div>
</li>
</ul>
</div>
</body>
</html>
手风琴效果（jQuery）相关推荐
- html折叠 手风琴效果,jQuery制作效果超棒的手风琴折叠菜单
拉风的jQuery制作的手风琴折叠菜单,效果非常不错!这里是之前版本的改进版,主要是jquery代码改进 演示图: main.js $(function(){ var tmp = null, $tit ...
- 使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果 本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...
- 不得不爱开源 Wijmo jQuery 插件集（4）-【手风琴效果】(附页面展示和源码)
园子中的朋友大家好.在上一篇文章中我们,给大家介绍了 Wijmo Menu 的特性及使用方法.感谢园子中朋友的支持,朋友们的支持给我们写这一系列文章提供了很大的动力.在这篇文章中我们将介绍 Accor ...
- jQuery实现手风琴效果
jQuery实现手风琴效果,这里是纵向的,效果图如下: 在此处是当鼠标移动到p上面的时候,p下面的ol里面的内容显现出来 主要用了html,css,jQuery的知识 先把大致需要的东西写出来,此处用 ...
- 精心挑选12款优秀 jQuery 手风琴效果插件和教程
当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换.借助流行的 jQuery 框架,只需很少的 ...
- jquery插件手风琴效果
利用插件实现手风琴效果,偶尔有点小收获哦!哈哈 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- jquery实现简单的手风琴效果
最近看到我看的教学视频有不少手风琴效果,我也试着写一下,当做练习. 明天我放假,就要去找工作,不知道,我的前端之路,能不能正式开始. 菜鸟起飞的机会都没有,那就尴尬了. 纯属练习: 效果如图: htm ...
- 手风琴效果（js版本以及jquery版本）
最近又复习了jQuery的知识,既然jQuery是javascript的一个库.jQuery能做到的事情javascript也能做到.因此用这两种方法实现了图片手风琴效果 按照惯例,还是上代码吧,因为 ...
- 使用jQuery创建折叠式菜单（手风琴效果）
使用jQuery创建折叠式菜单(手风琴效果) 今天给大家介绍如何使用jQuery创建折叠式菜单,即通常所说的手风琴效果(accordion [əˈkɔ:rdiən]). 实现效果如下: 一.HTML代 ...
- jQuery快速入门（淘宝切换服饰、王者荣耀手风琴效果）
一.什么是jQuery jQuery 是一个快速.简洁的 JavaScript 库,其设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情. 二. ...
最新文章
- php mysql随机记录,php – 从MySQL中选择可变数量的随机记录
- 【NLP】文本分类还停留在BERT？对偶比学习框架也太强了
- 前端学习（3345）：数组方法的使用
- Google Colab 免费GPU 教程
- 【LeetCode】剑指 Offer 24. 反转链表
- 95-290-050-源码-内存管理-堆外内存与堆内内存概述
- 定期存款可以提前取出来吗_如果银行存款利率涨了，定期存款有必要取出再存吗？...
- AtCoder Beginner Contest 171 A - αlphabet
- idea创建springcloud项目_新手向，十分钟快速创建 Spring Cloud 项目
- Ubuntu Linux系统备份与还原命令技巧
- Doors软件安装以及DXL入门
- Android逆向分析之dex2jar异常处理的几种情况
- RRT算法原理和代码详解（快速扩展随机树）
- redis-trib.rb和redis-cli部署redis主从集群的异同
- 悼念《人月神话》作者 Fred Brooks
- 华为交换机配置时区_华为交换机配置命令
- 重磅：第十二届中国西部国际资本论坛盛大举办，分布式存储行业备受瞩目！
- 程序员必备 —— Git
- 求学贵在主动、坚持——兼谈学生行为礼仪
- 一个资深Java架构师告诉你我们是如何将一个项目做烂的