jq与原生js实现收起展开效果

(jq需自己加载)

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>展开收起</title>

		<style>

			* {

				margin: 0;

				padding: 0;

			}

			button {

				font-size: 18px;

				padding: 0 19px;

			}

			#con {

				width: 500px;

				background: #ccc;

				color: red;

				font-size: 18px;

				overflow: hidden;

			}

		</style>

		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<button id="zk">展开</button>

		<button id="sq">收起</button>

		<div id="con">

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

		</div>

		<!--原生js的写法-->

		<!--<script type="text/javascript">

			var zk = document.getElementById('zk');

			var sq = document.getElementById('sq');

			var con = document.getElementById('con');

			var timer = null,

				timer2 = null,

				conHeight = con.clientHeight;

			sq.onclick = function() {

				var h = conHeight;

				clearInterval(timer);

				timer = setInterval(function(){

					h -= 2;

					if(h <= 0) {

						h = 0;

						clearInterval(timer);

					}

					con.style.height = h + 'px';

				},10);

			}

			zk.onclick = function() {

				var h = 0;

				clearInterval(timer2);

				timer2 = setInterval(function(){

					h += 2;

					if(h >= conHeight) {

						h = conHeight;

						clearInterval(timer2);

					}

					con.style.height = h + 'px';

				},10);

			}

		</script>-->

		<!--jq的写法-->

		<script type="text/javascript">

			$('#sq').click(function() {

				$('#con').slideUp(2000,'swing',function() {

					alert(111);

				});

			});

			$('#zk').click(function() {

				$('#con').slideDown();

			});

		</script>

	</body>

</html>

　　

jq与原生js实现收起展开效果的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  3. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  4. 导航栏中各按钮在点击当前按钮变色其他按钮恢复为原有色的实现方法（vue、jq、原生js）

    一.vue如何实现? 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  6. 原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化

    之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...

  7. jq 与原生js 方法互相转换

    最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.虽然jq很简单,但是也有兼容问题,js基础是很重要的,jq的成功当时是因为ie6.7.8.9.10.chrom ...

  8. 原生js实现拖拽效果

    面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...

  9. 侧边栏收起展开效果，onmouseover,onmouseout

    //方法一<!doctype html> <html lang="en"> <head> <meta charset="UTF- ...

随机推荐

  1. Linux-vim学习入门

    1.前言     vi/vim是linux中很重要的文本编辑器.我第一次使用这个编辑器时,很不习惯,甚至都不知道如何移动光标和插入字符.慢慢地经过学习,才知道如何使用vi/vim.     vi/vi ...

  2. RabbitMQ4--发后即忘和RPC

    在项目中引入RabbitMQ通常会考虑它会带来的好处:解耦应用程序,实现不同编程语言之间的互通,解除对特定通信协议的依赖,解除应用程序在时序上执行的依赖(异步).落实到代码层面就是两种常用应用模式:& ...

  3. 单行 JS 实现移动端金钱格式的输入规则

    金钱格式检验属于很普通的需求,记得工作中第一次遇到这个需求的时候,还不太会写正则表达式,搜到了一个类似的解决方案,看着正则的文档改成了自己需要的形式. 但是用户的输入操作是任意的,只是显示提示信息,这 ...

  4. SpringBoot系列（一）RestTemplate

    作为springBoot的开篇系列,RestTemplate只能表示我只是个意外 what RestTemplate是spring提供的用于访问rest服务的客户端(其实类似Apache的HttpCl ...

  5. 底层算法系列：Paxos算法

    关于算法,面太广.本系列只研究实际应用中遇到的核心算法.了解这些算法和应用,对java码农进阶是很有必要的. 对于Paxos学习论证过程中,证实一句话:有史以来学习paxos最好的地方wiki:Pax ...

  6. nginx-tomcat-memcached架构文档说明（转）

    800x600 Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE MicrosoftInternetExplorer4 st1\:*{be ...

  7. Spring Security教程系列（一）基础篇-2

    第 4 章 自定义登陆页面 Spring Security虽然默认提供了一个登陆页面,但是这个页面实在太简陋了,只有在快速演示时才有可能它做系统的登陆页面,实际开发时无论是从美观还是实用性角度考虑,我 ...

  8. 开涛spring3(12.2) - 零配置 之 12.2 注解实现Bean依赖注入

    12.2  注解实现Bean依赖注入 12.2.1  概述 注解实现Bean配置主要用来进行如依赖注入.生命周期回调方法定义等,不能消除XML文件中的Bean元数据定义,且基于XML配置中的依赖注入的 ...

  9. SpringMVC中使用RedirectAttributes重定向传参,防止暴露参数

    RedirectAttributes是SpringMVC3.1版本之后出来的一个功能,专门用于重定向之后还能带参数跳转的. 当我从jsp页面函数中带参数到controller层方法,方法执行完毕后返回 ...

  10. Mac苹果系统 多系统启动：The rEFInd Boot Manager

    苹果系统 多系统启动 下载安装REFIT: 首先安装一下:REFIT, 在这个页面下载: http://refit.sourceforge.net/#download 选择mac disk image ...