<!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. UISegmentedControl在Swift中的使用

    UISegmentedControl控件是分段显示控件,用户可以选择它上展示的任一段部分,每一个部分都像是一个按钮,如果被按下也会像UIButton一样执行相应的方法.在这篇文章中我们将创建一个UIS ...

  2. KVM内核文档阅读笔记

    KVM在内核中有丰富的文档,位置在Documentation/virtual/kvm/. 00-INDEX:整个目录的索引及介绍文档. api.txt:KVM用户空间API,所谓的API主要是通过io ...

  3. C3垂直居中均分

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. 激活IDEA 2017.3 mac版 2018.05.21亲测可用

    本文激活方式不会导致IEDA打不开,可激活一年,最简便方式,只需要30秒. 1.修改hosts sudo vim /private/etc/hosts 在文件最后一行中添加: 0.0.0.0 acco ...

  5. jQuery学习之旅 Item7 区别this和$(this)

    刚开始以为this和$(this)就是一模子刻出来.但是我在阅读时,和coding时发现,总不是一回事,这里就谈谈this与$(this)的区别. 1.jQuery中this与$(this)的区别 $ ...

  6. Java 读书笔记 (十五) Java 异常处理

    捕获异常 使用try 和catch关键字可以捕获异常.try/catch 代码块放在异常可能发生的地方. try/catch 代码块中的代码称为保护代码 ,使用try/catch的语法如下: try ...

  7. RabbitMQ Network Partitions的预警和处理策略

    网络分区的意义 RabbitMQ的模型类似交换机模型,且采用erlang这种电信网络方面的专用语言实现.RabbitMQ集群是不能跨LAN部署(如果要WAN部署需要采用专门的插件)的,也就是基于网络情 ...

  8. 无service.bat的tomcat服务怎么设置自启动

    在正式环境中,经常需要设置tomcat自启动,这样在重启系统服务器后就不需要再手动去开启tomcat服务器了.通过设置tomcat下的service.bat可以实现自启动的目的,但有时候会发现自己的t ...

  9. bzoj 2038 小z的袜子 莫队

    莫队大法好,入坑保平安 只要能O(1)或O(log)转移,离线莫队貌似真的无敌. #include<cstdio> #include<iostream> #include< ...

  10. 如何解析C语言的声明

    一个声明:int *p[] 分为四部分: (1)p (2)p右面的符号(可以什么都没有) (3)p左面的符号(可以什么都没有) (4)最左面的类型说明符 解读一个声明先从p开始,然后的顺序是:右左右左 ...