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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 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
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
vue实现计步器功能
2019/11/01 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
Python计算三角函数之asin()方法的使用
2015/05/15 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
python多线程下信号处理程序示例
2019/05/31 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
Python实现数字的格式化输出
2020/08/01 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
会计电算化应届生求职信
2013/11/03 职场文书
公司募捐倡议书
2014/05/14 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
朋友聚会开场白
2015/06/01 职场文书
务工证明怎么写
2015/06/18 职场文书
趣味运动会赞词
2015/07/22 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
SQL注入详解及防范方法
2021/12/06 MySQL