（-1）写在前面

这个图片是我从网上下载的，向这位前辈致敬。图片资源在我的百度云盘里。http://pan.baidu.com/s/1nvfJHdZ

我用的是chrome49，JQuery3.0，案例并没有考虑浏览器兼容问题，如果你看不到动画效果，尝试给css属性加上前缀。

（1）知识储备

a.class

如果为class标记指定多个值，例如class=”dnf lol” dnf lol是没有先后观念的，等同于class=”lol dnf”，lol中的样式是否能够覆盖dnf中的样式，取决于css样式表中lol是否在dnf后面。不同属性附加。

b.id、 classs

一个元素既有id标记又有class标记，那么相同样式id覆盖class，不同样式附加。

（2）关键思想

元素高度的变化是在原有class A的基础上增加或移除class B实现的，在A和B中使用了transition属性。

（3）源代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset=utf-8>

<script  type="text/javascript" src="debug-jquery-3.0.0.js"></script>

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<title>为了生活</title>

<style type="text/css">

*

{

margin:0;

padding:0;

}

.slider

{

width:700px;

height:32px;

overflow:hidden;

transition:height 150ms linear 0s;

background:#00FF66;

}

.slider p

{

width:700px;

cursor:pointer;

height:32px;

background-image:url("images/newsclosedbg.gif");

}

.big

{

height:200px;

transition:height 150ms linear 0s;

}

</style>

<script type="text/javascript">

$(function()

{

$(".slider p").click(function()

{

var $parent = $(this.parentNode),

target =  this;

$parent.toggleClass(function(index,css)

{

if(css.indexOf("big") != -1)

{

target.style.backgroundImage = 'url("images/newsclosedbg.gif")';

}

else

{

target.style.backgroundImage = 'url("images/newsopenbgtop.gif")';

}

return "big"

}).siblings().removeClass(function(index,css)

{

this.children[0].style.backgroundImage = 'url("images/newsclosedbg.gif")';

return "big";

});

}).eq(0).click();

})

</script>

</head

<body>

<div class="slider">

<p></p>

</div>

<div class="slider" >

<p></p>

</div>

<div class="slider" >

<p></p>

</div>

<div class="slider" >

<p></p>

</div>

</body>

</html>

JQuery实战手风琴-遁地龙卷风的更多相关文章

  1. 如何让JQuery报错-遁地龙卷风

    0.解决的问题 a.当选择器语法没有问题,找不到元素时,让jquery报错 b.选择器语法有问题,程序无法继续执行时,让jquery报错 主要针对传递字符串,尝试前请备份jquery库,最好改变名字加 ...

  2. JQuery选择器细节-遁地龙卷风

    1.层次选择器-子元素选择器 <body> <div> <p>lol</p> <div> <p></p> </ ...

  3. JQuery data方法的使用-遁地龙卷风

    (-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage ...

  4. JQuery simpleModal插件的使用-遁地龙卷风

    (0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simpl ...

  5. jquery toggle方法使用出错?请看这里-遁地龙卷风

    这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function() { alert(1);//1,3,5,7... },function( ...

  6. 逻辑思维面试题-java后端面试-遁地龙卷风

    (-1)写在前面 最近参加了一次面试,对笔试题很感兴趣,就回来百度一下.通过对这些题目的思考让我想起了建模中的关联,感觉这些题如果没接触就是从0到1,考验逻辑思维的话从1到100会更好,并且编程简易模 ...

  7. jQuery之手风琴图片

    <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. jquery多级手风琴插件–accordion.js

    手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...

  9. 简单jQuery 实现手风琴菜单

    简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...

随机推荐

  1. JavaWeb学习总结-07 Filter 学习和使用

    一 Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...

  2. Ubuntu下忘记MySQL密码重设方法

    今天在做Python的实验,要用到MySQL数据库,但是密码是啥捏~~~果断重新设置密码啦啦啦 http://www.cnblogs.com/yuxc/archive/2012/07/25/26075 ...

  3. html代码规范

    HTML代码规范   我们知道,前端工程师入门容易,通过学习基本的HTML和CSS就能在浏览器上看到实际的效果,可是要写好的HTML,就不是那么容易了.这里将和大家分享HTML规范,希望大家读完之后都 ...

  4. Microsoft SQL Server Management Studio ------------------------------ 附加数据库 对于 服务器

    http://zhidao.baidu.com/link?url=didvEEY86Kap_F9PnRAJMGoLXv63IW1fhElfiOpkkmalJ9mvZoqNULlGKcGHN31y_4z ...

  5. css属性设置

    css在线编辑工具地址:http://tool.chinaz.com/Tools/CssDesigner.aspx 案例详情: http://dongtianee.sinaapp.com/index. ...

  6. MFC学习-第4课 消息机制和MFC作图

    转自: 1.http://blog.sina.com.cn/s/blog_6b5180bf01012kbz.html 2.http://blog.csdn.net/happyhhb/article/d ...

  7. 3秒后自动跳转页面【js】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. zabbix搭建

    首先创建zabbix组和用户 groupadd zabbix useradd -g zabbix zabbix mkdir -p /app/local/zabbix#然后创建zabbix编译安装目录 ...

  9. php函数ob_start()、ob_end_clean()、ob_get_contents()

    下面3个函数的用法 ob_get_contents() - 返回输出缓冲区的内容 ob_flush() - 冲刷出(送出)输出缓冲区中的内容 ob_clean() - 清空(擦掉)输出缓冲区 ob_e ...

  10. 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【二】——使用Repository模式构建数据库访问层

    系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 在数据访问层应用Repository模式来隔离对领域对象的细节操作是很有意义的.它位于映射层 ...