<!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. 登录测试用例sql语句注入

    利用SQL注入漏洞登录后台的实现方法 作者: 字体:[增加 减小] 类型:转载 时间:2012-01-12我要评论 工作需要,得好好补习下关于WEB安全方面的相关知识,故撰此文,权当总结,别无它意.读 ...

  2. textarea 里设置 style="resize:none"

    禁止textarea拉伸的方法是::                                    设置这个 style="resize:none" 属性 例子: < ...

  3. springcloud(十)：服务网关zuul(转)

    前面的文章我们介绍了,Eureka用于服务的注册于发现,Feign支持服务的调用以及均衡负载,Hystrix处理服务的熔断防止故障扩散,Spring Cloud Config服务集群配置中心,似乎一个 ...

  4. Mybatis中的逆向工程

    1. 准备工作 数据库驱动jar包, mybatis的jar包, 日志记录jar包 2. 配置文件 1. 在src的同级目录下配置generatorConfig.xml文件 <?xml vers ...

  5. 消息队列Queue大全

    消息队列Queue大全 (http://queues.io/) 作业队列,消息队列和其他队列.几乎所有你能想到的都在这. 关于 那里有很多排队系统.他们每个人都不同,是为解决某些问题而创建的.这个页面 ...

  6. 【一通百通】Bash的单双括号建议：多用[[]], 少用[]

    一． bash [  ] 单双括号 基本要素: Ø  [ ] 两个符号左右都要有空格分隔 Ø  内部操作符与操作变量之间要有空格:如  [  “a”  =  “b”  ] Ø  字符串比较中,> ...

  7. infolite（中文检索系统）~爬虫利器

    infolite 今天为大家分享一个爬虫利器-infolite.这是一个chrome浏览器的插件,如果你在写爬虫的时候对复杂繁琐的控件路径分析是深恶痛绝.那么infolite绝对是你最好的选择. 安装 ...

  8. bzoj 3195 奇怪的道路 状压dp

    看范围,状压没毛病 但是如果随便连的话给开1<<16,乘上n,m就爆了 所以规定转移时只向回连边 于是想状态数组:f[i][j]表示到i这里i前K位的状态为j(表示奇偶) 发现有条数限制, ...

  9. vue enter事件无效，加入native

    <Input type="password" v-model="password" placeholder="password" @k ...

  10. Java线程与Linux内核线程的映射关系

    Linux从内核2.6开始使用NPTL (Native POSIX Thread Library)支持,但这时线程本质上还轻量级进程. Java里的线程是由JVM来管理的,它如何对应到操作系统的线程是 ...