<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.min.js"></script>

    <style>

        #flipshow, #content, #fliphide, #toggle{

            padding: 5px;

            text-align: center;

            background-color: blueviolet;

            border: solid 1px; red;

        }

        #content{

            padding: 50px;

            display: none;

        }

    </style>

</head>

<body>

<div id="flipshow">显示</div>

<div id="fliphide">隐藏</div>

<div id="toggle">toggle</div>

<div id="content">hello world</div>

</body>

<script>

    $("#flipshow").click(function(){

        $("#content").slideDown(1000);

    })

    $("#fliphide").click(function(){

        $("#content").slideUp(1000);

    })

    $("#toggle").click(function(){

        $("#content").slideToggle(1000);

    })

</script>

</html>

HTML 练习滑动的更多相关文章

  1. Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

    Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...

  2. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  3. 【JavaScript吉光片羽】--- 滑动条

    灯光的亮度控制需要一个滑动条,先借用lamp源码中Bar: var Bar = function (opt) { var defaults = { $id: "", // 进度条d ...

  4. Android开发学习之路-RecyclerView滑动删除和拖动排序

    Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...

  5. 使用Design包实现QQ动画侧滑效果和滑动菜单导航

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个supp ...

  6. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  7. Android ScrollView监听滑动到顶部和底部的两种方式（你可能不知道的细节）

    Android ScrollView监听滑动到顶部和底部,虽然网上很多资料都有说,但是不全,而且有些细节没说清楚 使用场景: 1. 做一些复杂动画的时候,需要动态判断当前的ScrollView是否滚动 ...

  8. JavaScript触屏滑动API介绍

    随着触屏手机.平板电脑的普及和占有更多用户和使用时间,触屏的触碰.滑动等事件也成为javaScript开发不可避免的知识,现在何问起就和大家一起学习js的触屏操作,js的触屏touchmove事件,为 ...

  9. JQuery效果-淡入淡出、滑动、动画

    一.JQuery Fading方法 JQuery 有四种fade方法 1.fadeIn() 淡入                       对应也有$(selector).fadeIn(speed, ...

  10. jQuery flickity 滑动触屏

    flickity是一款自适应手机触屏滑动插件,它的API参数很丰富,包括对齐方式.循环滚动.自动播放.是否支持拖动.是否开启分页.是否自适应窗口等. 在线实例 实例演示 使用方法 <div cl ...

随机推荐

  1. 10个Python练手小程序，学习python的很好的资料

    [程序1] 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 1.程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去  掉不满足条件的排列 ...

  2. Lsyncd - 实时文件同步工具（精译）

    原文: http://axkibe.github.io/lsyncd/ 描述 Lsyncd监视本地目录树事件监视器接口(inotify或fsevents).它聚集并组合事件几秒钟,然后生成一个(或多个 ...

  3. python多线程（一）

    ---恢复内容开始--- 首先先来看个单线程的例子: from time import ctime,sleep def music(): ): print("I was listening ...

  4. 10. 搭配redis做文章缓存

    redis是一个使用较多的内存键值数据库,这儿的键是字符串类型的标识符,而值可以是字符串.散列.列表.集合和有序集合,也正是因为redis提供了较丰富的值的类型,能够满足不同的使用要求,而且redis ...

  5. Python不同目录间模块调用

    #!/usr/bin/python # -*- coding: utf-8 -*- # 导入其它目录下的文件, 需要去帮获取当前程序的绝对路径并加入到环境变量的相对路径中 import os impo ...

  6. selenium相关技术研究(从1.0-3.0)

    注: 以下内容引自http://www.cnblogs.com/hhudaqiang/p/6550135.html Selenium相关技术研究(从1.0-3.0) 好吧,最近看wxpython有点多 ...

  7. logger.go

    package app //日志接口 type Logger interface {     Output(maxdepth int, s string) error }

  8. Dubbo中服务消费者和服务提供者之间的请求和响应过程

    服务提供者初始化完成之后,对外暴露Exporter.服务消费者初始化完成之后,得到的是Proxy代理,方法调用的时候就是调用代理. 服务消费者经过初始化之后,得到的是一个动态代理类,InvokerIn ...

  9. Elasticsearch笔记三之版本控制和插件

    版本控制 1:关系型数据库使用的是悲观锁,数据被读取后就被锁定其他的线程就无法对其进行修改. 2:ex使用的是乐观锁,数据被读取后其他程序还可以对其进行修改,而执行修改时发现此数据已经被修改则修改就会 ...

  10. 一步一步理解 python web 框架，才不会从入门到放弃 -- 开始使用 Django

    背景知识 要使用 Django,首先必须先安装 Django. 下图是 Django 官网的版本支持,我们可以看到上面有一个 LTS 存在.什么是 LTS 呢?LTS ,long-term suppo ...