当前位置: 首页 > 工具软件 > Slide Panel > 使用案例 >

演示简单的 Slide Panel 效果。(滑动面板的效果)

慕容铭
2023-12-01

 <!DOCTYPE html>
<html>
<head>
<script
src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$(".flip").mouseover(function(){//此处实现鼠标移动上去就出现滑动。若想通过点击,则用click
 
  $(".panel").slideToggle("slow");
  });
});
</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>W3School - 领先的 Web 技术教程站点</p>
  <p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>
</div>

<p class="flip">请点击这里</p>

</body>
</html>

转载于:https://www.cnblogs.com/bian1314yuan/p/4402178.html

 类似资料: