1、输入代码，其中button是鼠标要滑动的地方，滑过button时，class为content的内容就要显示出来，鼠标滑出去的时候，这块内容就需要重新隐藏起来。
2、把黑色内容的部分初始状态写成隐藏。只需要在class为content里写上display:none,即可。
3、来看下代码和浏览器中的效果。可以看到黑色内容部分已经不见了。
4、把onmouseover和onmouseout两个事件作用在button上面，再写overShow()和overHide()两个 函数。可以看到在函数中通过改content的display属性来实现显示隐藏的效果。
5、在浏览器中就可以看到效果了。
<!DOCTYPE html><html>
<head>
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<title>无标题文档</title>
<style type="text/css">
*{margin:0padding:0}
.box{
position: fixed
right: 0
top:250px
}
.box ul{ list-style: none width: 120px }
.box ul li{
width:120px
height: 30px
line-height: 30px
border:1px solid #ccc
border-radius: 6px 0 0 6px
margin-left:50px
padding-left: 10px
margin-top:5px
cursor:pointer
}
.cur{ background-color: #ff4600 border:none color:#fff}
</style>
</head>
<body>
<div class='box'>
<ul>
<li>水果</li>
<li>相机</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
$('div.box ul li').click(function(){
if( $(this).hasClass('cur') ){
$(this).animate({marginLeft:'50px'}).removeClass('cur')
}
else{
$(this).animate({marginLeft:'0px'}).addClass('cur')
}
})
})
</script>
</html>
其实思路不是很难，主要是通过边距的变化来实现移动，这里我用了通过改变margin-left的值来实现标签滑动的效果。
可以用js事件“onmouseover”和“onmouseout”来实现。
1、新建html文档，在body标签中添加图片标签，为这个标签设置“id”属性，然后设置图片的默认显示大小css属性：
2、添加“onmouseover”js事件，首先使用“document.getElementById”获取到图片标签，然后定义鼠标移动到图片上时发生的事件，这时图片将会放大：
3、添加“onmouseout”js事件，首先获取图片标签，然后定义鼠标移开图片时发生的事件，这时图片将会缩小：
