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. SpringData系列一 Spring Data的环境搭建

    本节作为主要讲解Spring Data的环境搭建 JPA Spring Data :致力于减少数据访问层(DAO)的开发量.开发者唯一要做的就是声明持久层的接口,其他都交给Spring Data JP ...

  2. hive的表的基本操作

    环境简介 实验环境使用的是cloudera-quickstart-vm-5.0环境. 内容摘要 创建表 修改表名 修改表中的列名 添加列 删除列 替换列 正文 Alter Table 语句 上面所述的 ...

  3. 学习笔记TF012:卷积网络简述

    ImageNet http://www.image-net.org ,图像标注信息数据库.每年举办大规模视觉识别挑战赛(ILSVRC).基于ImageNet数据库构建完成目标自动检测分类任务系统.20 ...

  4. vue-router 中router-view不能渲染

    最近在做一个vue的项目,其中使用了vue2.0,vue-router2.0.在使用vue-router的时候跳了一个很大的坑,router-view不能渲染,花费了好多时间终于发现了原因. 项目目录 ...

  5. Codeforces Round #392 (Div. 2)

    D题,给出n,k,k是n进制数,但是大于十进制时,它的表示方法仍为十进制那种,比如16进制下的15,我们可以看成就是15,或者1|5,也就是1×16+5 = 21,让你求出能表达的最小十进制数 从后面 ...

  6. netsh & winsock & 对前端的影响

    netsh 与 winsock 一个是window的脚本工具,另一个则是window是网络编程中要用到的网络接口,而非要说跟我小小的前端有什么影响,那还真有...,当然这个影响是很不好的,比如node ...

  7. Java微服务框架

    Java的微服务框架dobbo.spring boot.redkale.spring cloud 消息中间件RabbitMQ.Kafka.RocketMQ

  8. javascript基础-HTML5

    跨文档消息(Web Messaging cross-document messaging) 原理 往有关联(同一框架/弹出)的文档传递数据. Message Channel在javascript基础- ...

  9. 网页中使用CSS和JS阻止用户选择内容

    CSS实现 body{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; ...

  10. openvpn实现内网 映射到 外网

    openvpn实现内网 映射到 外网 场景介绍: 机器介绍 本地一台Ubuntu服务器A , 处于内网中 , 无外网IP 外网一台Ubuntu服务器B , 外网地址139.199.4.205 目标 : ...