JQuery实战手风琴-遁地龙卷风

2024-04-07 17:47:34

（-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实战手风琴-遁地龙卷风相关推荐

JQuery选择器细节-遁地龙卷风
1.层次选择器-子元素选择器 <body> <div> <p>lol</p> <div> <p></p> </ ...
JQuery data方法的使用-遁地龙卷风
(-1)说明我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本测试例子用到的showMessage ...
jquery toggle方法使用出错?请看这里-遁地龙卷风
这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function(){alert(1);//1,3,5,7...},function(){a ...
Bootstrap实战---手风琴和swiper特效插件
Bootstrap实战-手风琴和swiper特效插件其中,swiper特效插件请参见https://www.swiper.com.cn/usage/index.html,效果如下利用手风琴之JS来 ...
使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...
Web前端开发必备：《Jquery实战》第3版介绍
目标读者本书适合想深入学习jQuery的Web开发人员.全栈工程师.架构师.jQuery是互联网上最流行的JavaScript框架.本书的目标是希望读者成为Web高级开发人员,无论起点如何.本书深入 ...
jQuary总结11:jQuery插件封装---jQuery封装手风琴动画插件
完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...
横向全屏滑动插件_【案例】JQuery横向手风琴图片轮播切换代码
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源哈喽大家好,又到了每周二经典案例环节啦~同学们还想了解哪些网页知识今天段老师给同学们带来的是JQuery横向手 ...
jQuery实现手风琴效果
jQuery实现手风琴效果,这里是纵向的,效果图如下: 在此处是当鼠标移动到p上面的时候,p下面的ol里面的内容显现出来主要用了html,css,jQuery的知识先把大致需要的东西写出来,此处用 ...
java手风琴代码_[Java教程]18款jquery抽屉式手风琴导航特效代码
[Java教程]18款jquery抽屉式手风琴导航特效代码 0 2015-11-12 21:00:05 jquery hover抽屉式导航图片展开收缩代码 jQuery仿瑞丽鼠标滑过图片手风琴展开特效 ...

最新文章

热门文章