一款基于jquery的手风琴显示详情
今天要各网友分享一款基于jquery的手风琴显示详情实例。当单击顶部箭头的时候,该项以手风琴的形式展示显示详情。效果图如下:
实现的代码。
html代码:
<div align="center">
<span class="openzone" zone="lestrois" id="autoclicklestrois">NOW, OPEN THE THREE !</span>
<div style="width: 800px">
<table border="0" cellpadding="10" cellspacing="5" width="100%">
<tr>
<td id="col1" valign="top" align="center" class="allcol">
<img src="arrow.png" class="openzone" zone="1" id="opener1" />
<div class="alltitle" id="title1">
MY FIRST</div>
<br>
<div id="contentzone1" class="allcontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit.</div>
</td>
<td id="col2" valign="top" align="center" class="allcol">
<img src="arrow.png" class="openzone" zone="2" id="opener2" />
<div class="alltitle" id="title2">
MY SECOND</div>
<br>
<div id="contentzone2" class="allcontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit.</div>
</td>
<td id="col3" valign="top" align="center" class="allcol">
<img src="arrow.png" class="openzone" zone="3" id="opener3" />
<div class="alltitle" id="title3">
MY THIRD</div>
<br>
<div id="contentzone3" class="allcontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit.</div>
</td>
</tr>
</table>
</div>
</div>
css代码:
#col1
{
background-image: url(img1.jpg);
background-color: #e7e7e7;
background-repeat: no-repeat;
height: 470px;
}
#col2
{
background-image: url(img2.jpg);
background-color: #e7e7e7;
background-repeat: no-repeat;
height: 470px;
}
#col3
{
background-image: url(img3.jpg);
background-color: #e7e7e7;
background-repeat: no-repeat;
height: 470px;
}
.alltitle
{
color: #ffffff;
font-weight: bold;
font-size: 20px;
}
.allcontent
{
font-size: 17px;
padding-left: 100px;
text-align: left;
}
.openzone
{
padding: 0px 10px;
cursor: pointer;
}
js代码:
$(document).ready(function () {
$('.openzone').click(function () { var zone = $(this).attr('zone'); if (zone == '1') {
var autre1 = '2';
var autre2 = '3';
}
else if (zone == '2') {
var autre1 = '1';
var autre2 = '3';
}
else if (zone == '3') {
var autre1 = '1';
var autre2 = '2';
} if (zone != 'lestrois') {
$('#contentzone' + autre1).hide();
$('#contentzone' + autre2).hide(); $('#col' + autre1).animate({ width: '70px' }, 200);
$('#col' + autre2).animate({ width: '70px' }, 200);
$('#col' + zone).animate({ width: '' }, 200)
.queue(function () {
$('#contentzone' + zone).show();
$(this).dequeue();
}); $('#opener' + zone).hide(); $('#opener' + autre1).show();
$('#opener' + autre2).show(); $('#title' + zone).css("font-size", "20px");
$('#title' + autre1).css("font-size", "12px");
$('#title' + autre2).css("font-size", "12px"); }
else if (zone == 'lestrois') {
$('.allcol').animate({ width: '33%' }, 200)
.queue(function () {
$('.allcontent').show();
$(this).dequeue();
}); $('.openzone').show(); $('.alltitle').css("font-size", "20px");
}
return false;
});
});
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/10405
一款基于jquery的手风琴显示详情的更多相关文章
- 一款基于jquery的手风琴图片展示效果
今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- 10款基于jquery实现的超酷动画源码
1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...
- 10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
- 一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览 源码下载 实现的代码. html代码: <a ...
- 10款基于jquery的web前端特效及源码下载
1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...
- 8款基于Jquery的WEB前端动画特效
1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...
- 一款基于jQuery的图片场景标注提示弹窗特效
今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...
- 基于jquery横向手风琴效果
基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览 源码下载 效果图如下: <div class="flash&quo ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
随机推荐
- Scala之Object (apply) dycopy
一.前言 前面学习了Scala的Methods,接着学习Scala中的Object 二.Object Object在Scala有两种含义,在Java中,其代表一个类的实例,而在Scala中,其还是一个 ...
- EditPlus破解版|很不错的编辑器
Windows自带的notepad,功能一般.editplus,很值得推荐的编辑器! 注册秘钥: 用户名:www.dayanzai.me序列号:D2C86-E97A0-BF376-FDC33-27C1 ...
- Android开发之动态检索(Filter)联系人
1. 将所有联系人都转换为数字串,存到列表中. 将联系人姓名转换为数字串.例如,张丽思创->zlsc->9572. 过程解析: 张 – zhang – z – 9 丽 – li – l – ...
- Java JDBC数据库编程
课程 Java面向对象程序设计 一.实验目的 掌握数据库编程技术 二.实验环境 1.微型计算机一台 2.WINDOWS操作系统,Java SDK,Eclipse开发环境,Microsoft SQL ...
- jsp地址栏传中文显示乱码解决方法
格式一: 地址栏显示格式:http://localhost:8081/Jsp2/ahref2.jsp?id=32&name=%E7%8E%8B%E4%BA%91%E9%B9%8F 1.修改To ...
- TransactionScope事务处理方法介绍及.NET Core中的注意事项 SQL Server数据库漏洞评估了解一下 预热ASP.NET MVC 的VIEW [AUTOMAPPER]反射自动注册AUTOMAPPER PROFILE
TransactionScope事务处理方法介绍及.NET Core中的注意事项 作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/10170712.ht ...
- Jmeter --- 逻辑控制之if控制器
一.背景 在实际工作中,当使用Jmeter做性能脚本或者接口脚本时,有可能会遇到需要对不同的条件做不同的操作,基于这种诉求,在Jmeter中可使用if控制器来实现 二.实际操作 逻辑控制器位置: 在线 ...
- Calendar 中getActualMaximumd 功能
String str = (new SimpleDateFormat("yyyy-MM-dd HH:mm:ss:SSS")) .format(new Date()); Calend ...
- hibernate validator工具类
一.相关的gradle配置文件 // https://mvnrepository.com/artifact/javax.el/javax.el-api compile group: 'javax.el ...
- Android studio 使用NDK工具实现JNI编程
前言: Android开发中常常会使用到第三方的.so库.在使用.so库的时候就要用到JNI编程.JNI是Java Native Interface的缩写.它提供了若干的API实现了Java和其它语言 ...