1、在test.html文件内，在p标签，使用img标签创建一个图片，并设置图片的id为myimg，主要用于下面通过该id获得img对象。
2、在test.html文件内，设置img标签的css样式，将display设置为none，从而实现图片隐藏不显示。
3、在test.html文件内，使用button标签创建一个按钮，按钮名称为“图片逐渐显示”。
4、在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行disimg（）函数。
5、在js标签中，创建disimg（）函数，在函数内，通过id（myimg）获得img对象，使用fadeIn（）方法让图片逐渐显示出来，例如，设置图片在5秒内逐渐显示出来。
6、在浏览器打开test.html文件，点击按钮，查看实现的效果。
onmouseover事件加animate()函数具体的懒得写，给你个思路吧，当然这写的很粗糙，不能直接用的，按这个思路是可以做到的，
经过显示某层，用onmouseover事件就能实现，
要缓慢上升，用animate()函数控制显示层的定位位置就OK了（或者不用定位用margin-top也行）
思路：
<div style=" height:100pxposition:relativeoverflow:hidden">
<img src="图片" height="100" />
<span id="#div" style=" position:absoluteleft:0bottom:-30pxheight:30px">显示的层</span>
</div>
onmouseover执行下面的animate()函数：
$("#div").animate({bottom:"0px"},5000)
<div id="box" style="width: 100pxheight: 100px background: blueposition:absoluteleft:0top:200px"></div><button type="button" id="start">开始</button>
<button type="button" id="stop">停止</button>
<button type="button" id="init">重置</button>
<script>
window.onload = function () {
var box = document.getElementById('box')
var start = document.getElementById('start')
var stop = document.getElementById('stop')
var init = document.getElementById('init')
var timer
function animFn () {
box.style.left = parseInt(box.style.left) + 5 + 'px'
}
function stopFn () {
clearInterval(timer)
}
start.onclick = function () {
timer = setInterval(animFn, 50)
}
stop.onclick = stopFn
init.onclick = function () {
stopFn()
box.style.left = '0px'
}
}
</script>
