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. Git总结笔记1-搭建和使用30条简明笔记

    1.环境搭建: Linux:安装git安装包(yum install -y git) Windows:到官网下载安装包 安装完成后配置如下用户名和邮箱: git config --global use ...

  2. JVM方法调用

    当我们站在JVM实现的角度去看方法调用的时候,我们自然会想到一种分类: 1.编译代码的时候就知道是哪个方法,永远不会产生歧义,例如静态方法,private方法,构造方法,super方法. 2.运行时才 ...

  3. SPRING AOP ....0 can't find referenced pointcut

    下载最新的aspectjweaver就可以了,因为JDK的版本的问题不兼容. //织入点语法 @Pointcut("execution(public * com.frank.dao..*.* ...

  4. 新鲜小玩意儿- deviceOrientation移动设备旋转事件

    <javascript高级程序设计>第三版 其中事件的章节 提到一个有意思的事件 deviceOrientation 也就是 设备(device) - orientation(方向) 贴代 ...

  5. Windows Server 2016中，安装PHP Manager，ARR3.0或者URL Rewrite 2.0无法成功的解决办法

    如图: 无法安装原因都是这几个工具无法识别10.0这个版本,可以修改注册表来先完成安装,然后再改回去 PHPManager的修改方法如下: 打开注册表工具(运行Regedt32),找到:HKEY_LO ...

  6. 自定义控件pickView

    package com.example.healthembed.util; import java.util.ArrayList; import java.util.List; import java ...

  7. 微信小程序大全（下）（最新整理 建议收藏）

  8. aws上redhat安装redis服务记

    1.准备 官网下载

  9. 开涛spring3(9.4) - Spring的事务 之 9.4 声明式事务

    9.4  声明式事务 9.4.1  声明式事务概述 从上节编程式实现事务管理可以深刻体会到编程式事务的痛苦,即使通过代理配置方式也是不小的工作量. 本节将介绍声明式事务支持,使用该方式后最大的获益是简 ...

  10. OpenGL教程(2)——第一个窗口

    OpenGL环境终于配置好了,现在我们可以开始学习OpenGL了. 首先,创建一个.cpp文件,然后打上几行#include指令: #include <iostream> using st ...