jQuery实现展开伸缩效果
来源:互联网 发布:超星数据库检索 编辑:程序博客网 时间:2024/04/29 20:51
jQuery实现简单的展开伸缩效果
展开伸缩效果不论是在电脑上还是在手机端都应用的十分广,那么今天就实现一个这样的效果,首先贴下图
- 展开之前的样子
- 展开之后的样子
好了,下面开始写实现过程了
1.首先将页面的结构写出来,结构比较简单,就不多说了
<div class="m-box"> <div class="m-list"> 点击试一下,会出现什么呢? <div class="icon-list"></div> </div> <!-----------展开的内容----------> <div class="m-content"> <small>哈哈,看到我了吧;</small><br> <small>哎呦,不错哦;</small><br> <small>哈哈哈哈哈哈哈哈哈哈哈哈哈哈。</small> </div> <!-----------展开的内容 End----------> <br><hr><br> <div class="m-list"> 点击我可以展开哦 <div class="icon-list"></div> </div> <!-----------展开的内容----------> <div class="m-content"> <small>展开内容1</small><br> <small>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵;</small><br> <small>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</small> </div> <!-----------展开的内容 End----------> </div>
2.写好css样式,这里面要注意的就是.active了,用来切换图标用的,后面介绍它的用法
*{margin: 0;padding: 0}body{ margin: 100px;}.m-box{ width: 80%; background-color: #c1e2b3; padding: 20px; overflow: hidden;}.m-list{ height: 48px; line-height: 48px; cursor: pointer;}.icon-list{ width: 48px; height: 48px; float: right; background-image: url("../images/iconfont-right.png") ; cursor: pointer;}hr{ width: 100%; height: 1px; border: none; border-bottom: 1px solid #888;}.m-content{ display: none;}.active{ background-image: url("../images/iconfont-unfold.png") ;}
3.最重要的步骤来了,通过jQuery来完成这种效果,切换图标这里介绍两种不同的方法
- 首先看一下主要的函数
$(function () { var icon=$('.icon-list'); $('.m-list').click(function () { $(this).next('div').slideToggle(); changeIcon($(this).children(icon)); }); });
这里通过点击m-list这个类完成两个动作,展开收缩效果和图标的切换。展开收缩主要用到了jQuery的slide动画,通过slideToggle()方法实现。然后是切换图标,我这里写了两个方法,分别介绍下。
- 第一种方法,通过indexof()函数实现
function changeIcon(mainNode) { if (mainNode) { if (mainNode.css("background-image").indexOf("iconfont-right.png") >= 0) { mainNode.css("background-image","url('images/iconfont-unfold.png')"); } else { mainNode.css("background-image","url('images/iconfont-right.png')"); } } }
这是什么意思呢?indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。字符串位置是从0开始的,如果要检索的字符串值没有出现,则该方法返回 -1。
比如:
var str="hello world"; alert(str.indexOf('hello')); //返回0 alert(str.indexOf('world')); //返回6,注意:从0开始计算,空格算一个字符 alert(str.indexOf('helloworld'));//返回-1,因为str中不包含该字符串
好了,利用indexof()的这种特性就可以完成我们的需求了。首先background-image的值是iconfont-right.png,所以返回的值是0,执行 mainNode.css(“background-image”,”url(‘images/iconfont-unfold.png’)”);这句话,切换背景图片。当背景改为iconfont-unfold.png后,返回的值是-1,执行下面一句话,又将背景切换回去,就可以完成一直这样不停的切换效果了。
- 第二种方法,利用三目运算符和css结合使用,达到切换的效果
function changeIcon2(mainNode){ if(mainNode){ var _active=mainNode.hasClass('active'); _active?mainNode.removeClass('active'):mainNode.addClass('active'); } }
前面说到的active类在这里起到了很大的作用。.icon-list这个类中开始没有active类,执行mainNode.addClass(‘active’);这句话,为它添加active这个类
.active{ background-image: url("../images/iconfont-unfold.png") ;}
应用该样式后覆盖它本身的样式,改变图标。当它有active这个类之后,点击执行mainNode.removeClass(‘active’);这句话,移除掉active这个类,以达到切换图标的效果。
总结:虽然这种效果实现过程蛮简单的,但是方法有很多种,试着自己去想一想不同的方法来实现还是蛮有乐趣的,最后附上Demo的下载地址:
http://download.csdn.net/detail/a46262563/8999937
- jQuery实现展开伸缩效果
- jquery 实现伸缩菜单效果
- jquery实现动画伸缩效果
- jQuery 表格展开伸缩
- jQuery 表格展开伸缩
- jQuery 导航菜单点击伸缩展开效果的JS特效
- 天易24----jquery实现表格的展开伸缩
- jQuery实现图片展开缩放的效果
- android自定义伸缩框(展开效果)
- jquery实现广告伸缩效果(转自www.jqueryba.com)
- jQuery收缩展开效果
- 一种可展开伸缩的tableView实现
- JQuery实现DIV展开折叠类似Outlook效果
- jquery实现多个gridview折叠展开效果
- jQuery实现DIV层的收缩展开效果
- android 实现伸缩布局效果
- ToolBar实现滑动伸缩效果
- 一个伸缩效果,把innerHTML=="展开"中的...
- hello, world
- Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图 .
- 【Android】Merge讲解与实例
- 读书笔记--Android多线程
- android Graphics(三):区域(Range)
- jQuery实现展开伸缩效果
- 国内App推广终极37个方法
- hdu 1250 Hat's Fibonacci
- android Graphics(四):canvas变换与操作
- leetcode 120: Triangle
- HDU 5095--Linearization of the kernel functions in SVM【模拟】
- Swing文档大全 - Swing中树(Tree)的使用与介绍
- LeetCode 题解(168): Unique Paths II
- 在 Eclipse 中打开本地文件浏览器的方法