jQuery实现的卷帘门滑入滑出效果【案例】


Posted in jQuery onFebruary 18, 2019

本文实例讲述了jQuery实现的卷帘门滑入滑出效果。分享给大家供大家参考,具体如下:

效果:

jQuery实现的卷帘门滑入滑出效果【案例】

如果用JQ来做,其实非常简单,核心代码:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  //jq入口函数简写方法
/*  $(function ( ) {
  })*/
 //jq入口函数普通方式
$(document).ready(function ( ) {
  $('#flip').on('click',function ( ) {
    $('#content').slideToggle("slow");//slow是代表200ms的意思,normal是400,fast是600,不写默认normal
  })
})
</script>

完整的代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com jQuery滑入滑出</title>
  <style>
    #flip,#content {
      padding: 5px;
      text-align: center;
      background-color: #e5eecc;
      border: 1px solid #c3c3c3;
    }
    #content {
      padding: 100px;
      display: none;
    }
    #flip {
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="flip">点我,显示或隐藏面版</div>
<div id="content">hello world!</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  //jq入口函数简写方法
/*  $(function ( ) {
  })*/
 //jq入口函数普通方式
$(document).ready(function ( ) {
  $('#flip').on('click',function ( ) {
    $('#content').slideToggle("slow");//slow是代表200ms的意思,normal是400,fast是600,不写默认normal
  })
})
</script>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 #jQuery
jQuery实现的五星点评功能【案例】
Feb 18 #jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 #jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 #jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 #jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 #jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 #jQuery
You might like
php printf输出格式使用说明
2010/12/05 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
实例讲解React 组件
2020/07/07 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
Python回调函数用法实例详解
2015/07/02 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
酒店总经理工作职责
2013/12/13 职场文书
九年级科学教学反思
2014/01/29 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
教师岗位说明书
2015/09/30 职场文书
python xlwt模块的使用解析
2021/04/13 Python