1、新建一个html文件，命名为test.html。
2、在test.html文件中，使用div标签创建一个模块，并设置其id属性为tid，下面将通过该id设置其css样式。
3、在css标签内，对div进行样式设置，使用width属性设置div的宽度为200px，使用height属性设置div的宽度为20px，使用background属性设置div的背景颜色为红色。
4、在css标签内，再定义一个类名为newbg的样式，使用background属性设置背景颜色为黄色。
5、在test.html文件中，给div绑定onmouseover鼠标移动事件，当鼠标移动至div时，执行myfun（）函数。
6、在test.html文件中，在js标签内，创建一个myfun（）函数，在函数内，使用getElementById（）获得div对象，通过className（newbg）设置div的新背景颜色。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：button {background-color: #00a7d0}
button:hover {background-color: #ff7701}。
3、浏览器运行index.html页面，此时显示出了蓝色背景颜色的按钮。
4、将鼠标移入按钮，此时按钮的背景颜色变成了橙色。
(function($) {
$.fn.huadong = function( obj, obja, time ) {
this.height($(window).height()).css({'position':'absolute', 'top':'0px', 'left' : '0px'})//首先把最外层的标签对象设置为浮动， 上边为0， 左边也为0
var left = $(obj).width()//取得左边栏的宽度
$(obj).height($(window).height()).width(0).hide()//将左边栏的高度设置为浏览器的高度， 宽度为0， 并隐藏掉！这样是为了页面载入的时候初始化
$(obja).click(function(){ //给触发按钮绑定点击事件，也就是鼠标点击触发按钮后执行的动作
$(obj).show().animate({'width':left + 'px'}, time)//把左边栏的宽度设置为原来的宽度并显示出来， 根据设定的时间慢慢展现
})
$(obj).mouseout(function(){ //绑定左边栏鼠标移开事件
$(this).animate({'width':'0px'}, time, function(){ $(this).hide()})//又把左边栏的宽度设置为0， 并且隐藏
})
}
})(jQuery)
