zoukankan      html  css  js  c++  java
  • Jquery中滑动效果的实现

    最近由于做项目一直在做网页,然而想要自己的网页变得更加的炫丽,Jquery就必不可少,今天就来说一下自己刚体验到的几个滑动函数。

    1.slideDown函数,可以向下滑动元素。调用的方式是$(selecter).slideDown(speed,function());其中selecter是选择的元素,而speed是指滑动的速度,function是指滑动成功后可执行的函数。

    2.slideUp函数,与slideUp相反,slideUp是向上滑动元素。调用的方式是$(selecter).slideUp(speed,function());其中selecter是选择的元素,而speed是指滑动的速度,function是指滑动成功后可执行的函数。

    3.slideToggle函数,slideToggle函数是slideDown函数和slideUp函数的中和,调用该函数时,如果元素已经向上滑动,那么元素就向下滑动;如果元素已经向下滑动,那么元素就向上滑动,格式为:$(selecter).slideToggle(speed,function())其中selecter是选择的元素,而speed是指滑动的速度,function是指滑动成功后可执行的函数.

    下面就是我学习它们的一些例子:<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>slide</title>
    <script src="123/jquery.js" type="text/javascript"></script>
    </head>
        <body>
            <input id="test1" type="button" value="dianjiwo"></input>
            <input id="test2" type="button" value="dianjiwo2"></input>
            <p class="flip">打开</p>
            <p class="flip2">关闭</p>
            <div class="panel">
            <p>我叫邓远奇</p>
            <p>hello</p>
            </div> 
            <script type="text/javascript">
            $(document).ready(function(){
                 $("#test1").click(function(){
                    $(".flip").click(function(){
                        $(".panel").slideDown("fast");
                    })
                     $(".flip2").click(function(){
                        $(".panel").slideUp("fast");
                    })
                    $(".flip").click(function(){
                        $(".panel").slideToggle("fast");
                        $("")
                     })
                })             
            </script>
        </body>
    </html>

  • 相关阅读:
    Docker 基础 B站 学习 最强 教程
    apache+php安装
    php拓展 swoole 安装
    go beego框架 入门使用 (一)
    php 使用 phpword 操作 word 读取 word
    linux + MongoDB 安装 + 部署 + 讲解 (满满干货看完记得收藏噢)
    Thanos设计简析
    Prometheus TSDB文件格式-index
    Linux Kernel文件系统写I/O流程代码分析(二)bdi_writeback
    Linux Kernel文件系统写I/O流程代码分析(一)
  • 原文地址:https://www.cnblogs.com/dengyuanqi/p/5372977.html
Copyright © 2011-2022 走看看