您的位置:首页 > Web前端 > JQuery

jQuery学习之滑动

2015-09-12 23:31 537 查看
<!DOCTYPE html>
<!--滑动
滑动其实质也是jquery中的动画的一种
主要的函数有:
slideDown() 向下滑动元素
slideUp() 向上滑动元素
slideToggle() slideDown() 与 slideUp() 方法之间进行切换s
-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery滑动</title>
<script src="../res/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
/*$(".flip").click(function(){
$(".panel").slideDown();
});*/
/*$(".flip").click(function(){
$(".panel").slideUp();
});*/
$(".flip").click(function(){
$(".panel").slideToggle();
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>中药在O2O模式在实际的操作要根据实际的情况进行操作。</p>
<p>中药材完全是自产自销模式,良好的产地信息运用是基础。</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: