一款基于jquery的手风琴显示详情

时间:2022-03-01 18:36:35

今天要各网友分享一款基于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的手风琴显示详情的更多相关文章

  1. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  2. 10款基于jquery实现的超酷动画源码

    1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...

  3. 10款基于jquery的web前端动画特效

    1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...

  4. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  5. 10款基于jquery的web前端特效及源码下载

    1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...

  6. 8款基于Jquery的WEB前端动画特效

    1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...

  7. 一款基于jQuery的图片场景标注提示弹窗特效

    今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  8. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

  9. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

随机推荐

  1. 解析大型&period;NET ERP系统 通用附件管理功能

    大型系统具备一个通用的附件管理功能,对于单据中无法清晰表达的字段,用一个附件图片或附件文档表示是最好的方法了.比如物料清单附加一张CAD图纸,销售订单评审功能中附加客户的各种表格,通用附件功能对系统起 ...

  2. ngx&lowbar;image&lowbar;thumb模块生成缩略图

    ngx_image_thumb是nginx中用来生成缩略图的模块. 编译前确定已经安装了libcurl-dev libgd2-dev libpcre-dev gd-devel pcre-devel l ...

  3. CC2540开发板学习笔记(六)&mdash&semi;&mdash&semi;AD控制(自带温度计)

    一.实验目的 将采集的内部温度传感器信息通过串口发送到上位机 二.实验过程 1.寄存器配置 ADCCON1(0XB4)ADC控制寄存器1 BIT7:EOC   ADC结束标志位0:AD转换进行中    ...

  4. 用java简单的实现单链表的基本操作

    package com.tyxh.link; //节点类 public class Node { protected Node next; //指针域 protected int data;//数据域 ...

  5. maven核心概念4

    一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中唯一的一点. 1.2.Maven坐标主要组成 groupId:组织标识(包名) artifactId:项目名称 ver ...

  6. POJ1185状态压缩DP

    难得的中文题. POJ1185http://poj.org/problem?id=1185 方法就是用DP[i][r][p]表示第i行状态为r,第i-1行状态是p时的最多个数.而这里p受到r的限制,而 ...

  7. 22个值得收藏的android开源码-UI篇

    本文介绍了android开发人员中比較热门的开源码,这些代码绝大多数能够直接应用到项目中. FileBrowserView 一个强大的文件选择控件.界面比較美丽,使用也非常easy. 特点:能够自己定 ...

  8. UVa 825 - Walking on the Safe Side

    题目:在一个N*M的网格中,从左上角走到右下角,有一些点不能经过,求最短路的条数. 分析:dp,帕斯卡三角.每一个点最短的就是走N条向下,M条向右的路. 到达每一个点的路径条数为左边和上面的路径之和. ...

  9. go defer笔记

    1.函数中return xxx非原子指令 2.函数返回过程:先给返回值赋值:再调用defer:最后回到调用函数中 即:返回值 = xxx; defer; return; 3.多个defer调用顺序类似 ...

  10. Android Glide 源码分析系列(待完成)

    参考:https://jekton.github.io/2018/06/08/glide-disk-cache/ 参考:https://jekton.github.io/2018/06/20/glid ...