jQuery实现画面的展开、收起和停止
主要用到动画效果中的三个操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>展开和收起</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#contain").slideDown(3000);
});
$("#stop").click(function(){
$("#contain").stop();
});
$("#pack-up").click(function(){
$("#contain").slideUp(3000);
});
});
</script> <style> html,body{
margin: 0;
padding: 0;
}
#main{
width: 500px;
margin: 0 auto;
}
#btn>button{
border-radius: 4px;
font-size: 16px;
background: rgb(127, 28, 150);
color: rgb(223, 219, 219);
outline: none;
margin: 10px 0;
} #panel{
width: 300px;
color: #eee;
font-family: cursive;
text-align: center;
}
#title{
background-color: rgb(105, 24, 180);
font-size: 20px;
}
#contain{
background-color:blueviolet;
padding: 20px auto;
}
</style>
</head>
<body>
<div id="main">
<div id="btn">
<button id="flip">展开</button>
<button id="stop">停止</button>
<button id="pack-up">收起</button>
</div>
<div id="panel">
<div id="title">初恋</div>
<div id="contain">当初相遇苹果林，<br>
你才挽起少女的发型。<br>
前鬓插着如花的彩梳，<br>
映衬着你的娟娟玉容。<br><br> 你脉脉地伸出白净的手，<br>
捧起苹果向我相赠。<br>
淡红秋实溢清香啊！<br>
正如你我的一片初衷。<br><br> 我因痴情犹入梦境，<br>
一声叹息把你的青丝拂动。<br>
此时似饮合欢杯啊！<br>
杯中斟满了你的恋情。<br><br> 苹果林中树荫下，<br>
何时有了弯弯的小径？<br>
心中“宝塔”谁踏基？<br>
耳边犹响着你的细语声声……<br><br>
</div>
</div>
</div>
</body>
</html>
结果：
jQuery实现画面的展开、收起和停止的更多相关文章
- HTML-003-模拟IDE代码展开收起功能简单示例
当先我们在日常的编程开发工作中使用编程工具(例如 Eclipse.Sublime 等等)都有相应的代码折叠展开功能,如下图所示,极大的方便了我们的编码工作.
- jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...
- 跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起
Dom与Event简洁代码实现文本展开收起 Xuijs超轻量级的框架 Dom与Event实现文本展开收起 效果图 示例代码 <!DOCTYPE html PUBLIC "-//W3C/ ...
- css实现侧边展开收起
前言:因为突然想研究研究侧边栏滑动展开收起怎么做的,就去baidu了一下transition. 详情 内容1 内容1 内容1 内容1 内容1 右侧有实现demo.就是那个绿色的详情 先来看一下我的代码 ...
- [TimLinux] CSS 纯CSS实现动画展开/收起功能
内容转自CSS世界,理解之后进行了简化,简化后代码: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /& ...
- Vue 实现点击展开收起
Vue 展开收起功能实现 之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能 虽然可以拿过来用,但是 ...
- javasript简单实现文字的展开收起（无动画）
今天在工作遇到展开和收起的需求,在网上找了很多方法,今天来写一下我觉得比较简单的方法 在项目中需要达到如图这种效果 首先想的是使用overflow简单且粗暴,在需要展开的的文字定义样式 { overf ...
- vue.js 实现点击展开收起动画
最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起, 其实就是显示和隐藏内容部分:说来惭愧,我花了半天时间才搞出来(自黑一下~), ,,接下来分享给大家,先上效果图: .vue页面: ...
- el-upload上传列表实现 展开 收起
# el-upload上传列表实现 展开 收起 #### 无图言*,所以先上最终效果图(想参考代码的可以直接滑到最后) ### 具体实现思路 注意: 每个人的项目环境以及需求,都不尽相同,所以这里仅仅 ...
随机推荐
- 多线程编程学习笔记——使用异步IO
接上文 多线程编程学习笔记——使用并发集合(一) 接上文 多线程编程学习笔记——使用并发集合(二) 接上文 多线程编程学习笔记——使用并发集合(三) 假设以下场景,如果在客户端运行程序,最的事情之一是 ...
- 函数式编程之-定义能够支持Partial application的函数
是时候介绍如何在F#中定义函数了,在你没有接触过函数式编程语言之前,你也许会觉得C#/Java的语法已经够丰富了,有什么任务做不了呢?当你读过函数式编程之Currying和函数式编程之Partial ...
- C#一个窗体调用另一个窗体的方法
一个窗体调用另一个窗体的方法:例如:窗体B要调用窗体A中的方法1.首先在窗体A中将窗体A设为静态窗体public static FormA m_formA; //设此窗体为静态,其他窗体可调用此 ...
- collect_list/collect_set（列转行）
Hive中collect相关的函数有collect_list和collect_set. 它们都是将分组中的某列转为一个数组返回,不同的是collect_list不去重而collect_set去重. 做 ...
- 46.Linux-创建rc红外遥控平台设备,实现重复功能(2)
上章链接:46.Linux-分析rc红外遥控平台驱动框架,修改内核的NEC解码函数BUG(1) 在上章分析了红外platform_driver后,已经修改bug后,接下来我们自己创建一个红外platf ...
- spring_01概念及案例
1.什么是IOC? IOC概念:inverse of Controll,控制反转,所谓控制反转,就是把创建对象和维护对象关系的权利从程序中转移到spring的容器中(applicationContex ...
- springMVC_07乱码及restful风格
乱码的解决 通过过滤器解决乱码问题:CharacterEncodingFilter 配置web.xml文件 <filter> <filter-name>encoding< ...
- eclipse下svn的使用
描述:本篇用解决下面的案例中的问题来描述eclipse svn插件的使用. a.案例 某研发团队开发了一款名为App,目前已发布v1.0版本.此项目初期已有部分基础代码, 研发团队再此基础代码上经过3 ...
- python基础学习（二）注释和算术运算符
注释 1. 注释的作用 注释就是对某些代码进行标注说明,以增强代码的可读性.我们在写程序的时候,编写的某一部分代码的意图不太明显,这时候就需要对这一部分代码加以说明,来明确这一部分到的意图.一般的编程 ...
- Hibernate入门(二)——hibernateAPI详解
Hibernate API 详解 1.Configuration 功能:配置加载类,用于加载主配置,orm元数据加载 .创建: Configuration conf = new Configurati ...