向右收缩和展开div（1）

最新推荐文章于 2022-09-26 11:14:53 发布

程序员奋斗者GO

最新推荐文章于 2022-09-26 11:14:53 发布

阅读量1.1k

点赞数

分类专栏： web前端

web前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠标单击控制收缩和展开的窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
   <style type="text/css">
* {
   margin: 0;
   padding: 0;
}

#box {
   position: absolute;
   right: 0;
   top: 0;
   overflow: hidden;
}

#arrow {
   color: #fff;
   background: #000;
   width: 20px;
   height: 90px;
   line-height: 90px;
   font-size: 12px;
   font-family: "宋体";
   text-align: center;
   font-weight: bold;
   float: left;
}

#col_box {
   width: 400px;
   height: 90px;
   background: #eee;
   float: left;
}
</style>
   <script type="text/javascript" src="temp/js/jquery-1.11.0.min.js"></script>
   <script type="text/javascript">
       /* 第一种方式 */
       $(document).ready(function() {
           var oMoveBox = $("#col_box"), oArr = $("#arrow"), maxL = 400;
           oArr.click(function() {
               oMoveBox.animate({
                   "width" : "-=" + maxL
               }, 600, function() {
                   maxL = -maxL;

               })
           });
       });

   </script>
</head>
<body>
   <div id="box">
       <div id="arrow">></div>
       <div id="col_box">
           隐藏<br>显示
       </div>
   </div>
</body>
</html>

程序员奋斗者GO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
向右收缩和展开div（1）

鼠标单击控制收缩和展开的窗口 * { margin: 0; padding: 0;}#box { position: absolute; right: 0; top: 0; overflow: hidden;}#arrow { color: #fff; background:
复制链接

扫一扫

专栏目录