js或css实现鼠标悬停 图片从上直下慢慢出现 移开,图片慢慢上升直到消失

此类效果链接:http://www.tudou.com/playlist/playindex.do?lid=5505272&iid=22500791非常感谢您的帮助,但是... 此类效果链接:http://www.tudou.com/playlist/playindex.do?lid=5505272&iid=22500791
非常感谢您的帮助,但是还是没有哒到上面的效果。
展开
 我来答
xep0825
2009-04-17 · TA获得超过623个赞
知道小有建树答主
回答量:379
采纳率:100%
帮助的人:513万
展开全部

试试这个.

图片我用的(

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>

百度网友8882490
2009-04-16 · TA获得超过1747个赞
知道小有建树答主
回答量:1190
采纳率:0%
帮助的人:999万
展开全部

<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>

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式