动画效果鼠标点击打开/关闭层

最新推荐文章于 2024-10-17 15:53:46 发布

feidegenggao1

最新推荐文章于 2024-10-17 15:53:46 发布

阅读量714

点赞数

文章标签： function class xhtml float div html

本文链接：https://blog.csdn.net/feidegenggao1/article/details/4722401

版权

这个示例演示了如何使用JavaScript和CSS实现点击按钮时，通过平滑动画效果来打开和关闭一个层。点击'[打开层]'按钮，层会从1px的宽度和高度平滑扩展到指定尺寸；点击'[关闭层]'，层则以相反的过程平滑收缩至不可见。此外，还实现了鼠标拖动层的功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM_text01</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
#bodyL{
float:left;
width:84px;
margin-right:2px;
}
a.od{
width:80px;
height:25px;
line-height:25px;
text-align:center;
font-weight:bold;
border: 2px solid #849BCA;
display:block;
color:#547BC9;
float:left;
text-decoration:none;
margin-top:2px;
}<