js或css实现鼠标悬停 图片从上直下慢慢出现 移开，图片慢慢上升直到消失
非常感谢您的帮助，但是还是没有哒到上面的效果。 展开
试试这个.
图片我用的(
new:
http://www.lanrentuku.com/lanren/png/wall_eve_harddisk/wall_eve_harddisk_03.png
old:
http://www.lanrentuku.com/lanren/png/wall_eve_harddisk/wall_eve_harddisk_12.png
)只能上传一个,自己下载下吧
<html>
<head>
<script>
window.onload = function()
{
img1.style.clip = "rect(0 256 256 0)";
img2.style.clip = "rect(0 256 0 0)";
}
function showNew()
{
window.clearInterval(myTime);
var i=0;
var myTime = window.setInterval(function()
{
img1.style.clip = "rect("+ i +" 256 256 0)";
img2.style.clip = "rect(0 256 "+ i +" 0)";
i+=16;
if(i>256)
{
window.clearInterval(myTime);
}
},1);
}
function showOld()
{
var i=0;
var myTime = window.setInterval(function()
{
img1.style.clip = "rect("+ (256-i) +" 256 256 0)";
img2.style.clip = "rect(0 256 "+ (256-i) +" 0)";
i+=16;
if(i>256)
{
window.clearInterval(myTime);
}
},1);
}
</script>
</head>
<body>
<div>
<img id="img1" src="old.png" style="position:absolute;" onmouseover="showNew()" />
<img id="img2" src="new.png" style="position:absolute;" onmouseout="showOld()" />
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
#wrap{
background:url(7.jpg) no-repeat;
width:200px;
height:113px;
border:#0000CC 1px solid; background-position:0 -113px;
}
</style>
<script type="text/javascript">
var ht=113;//要显示的高度
function move(){
obj=document.getElementById("wrap");
if(ht>0)//高度大于0，则调整图片位置
{ ht-=3;//移动3像素
var pt="0 "+ht;
obj.style.backgroundPosition=pt;
}
}
function downpic(){
setInterval('move()',10);//每10毫秒调用一次
}
</script>
</head>
<body>
<div id="wrap" onMouseOver="downpic();">
</div>
</body>
</html>
