您的位置：首页 > Web前端 > HTML

HTML 图片鼠标悬停动态效果

2016-02-17 17:01 471 查看
法一：
在head中添加：

<script>


window.onload=
function
(){


var
img=document.getElementById(
"imgTest"
);


if
(document.addEventListener){


img.addEventListener(
"mouseover"
,doMouseover,
false
);


img.addEventListener(
"mouseout"
,doMouseout,
false
);


}


else
if
(document.attachEvent){


img.attachEvent(
"mouseover"
,doMouseover);


img.attachEvent(
"mouseout"
,doMouseout);


}


else
{


img.onmouseover=doMouseover;


img.onmouseout=doMouseout;


}


}


function
doMouseover(){


this
.width=
this
.width*1.5;


this
.height=
this
.height*1.5;


}


function
doMouseout(){


this
.width=
this
.width/1.5;


this
.height=
this
.height/1.5;


}


</script>


注意doMouseout函数中不可写作绝对大小：



this
.width=
50px
;

this
.height=
50px
;


图片标签：

<imgid="imgTest"src="imgs/icon.jpg"/>

法二：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>

<scripttype="text/javascript"src="js/jquery-1.11.1.min.js"></script>

<styletype="text/css">
body{background:#000;}
.img{float:left;width:200px;height:200px;overflow:hidden;margin:01px1px0;}
.img.inner{position:relative;}
.img.innerdiv{position:absolute;top:0;left:0;width:200px;height:200px;}
.img.innerimg{width:100%;height:100%;}
.img.innerdiv:last-child{opacity:0;}
</style>

</head>
<body>

<divstyle="width:620px;margin:40pxauto0auto;">

<divclass="img">
<divclass="inner">
<div><imgsrc="image/1-1.jpg"/></div>
<div><imgsrc="image/1-2.jpg"/></div>
</div>
</div>
<divclass="img">
<divclass="inner">
<div><imgsrc="image/2-1.jpg"/></div>
<div><imgsrc="image/2-2.jpg"/></div>
</div>
</div>
<divclass="img">
<divclass="inner">
<div><imgsrc="image/3-1.jpg"/></div>
<div><imgsrc="image/3-2.jpg"/></div>
</div>
</div>
<divclass="img">
<divclass="inner">
<div><imgsrc="image/4-1.jpg"/></div>
<div><imgsrc="image/4-2.jpg"/></div>
</div>
</div>
<divclass="img">
<divclass="inner">
<div><imgsrc="image/1-1.jpg"/></div>
<div><imgsrc="image/1-2.jpg"/></div>
</div>
</div>
<divclass="img">
<divclass="inner">
<div><imgsrc="image/2-1.jpg"/></div>
<div><imgsrc="image/2-2.jpg"/></div>
</div>
</div>

</div>

<scripttype="text/javascript">
$(".img").mouseenter(function(){
var$this=$(this);
var$div=$this.find(".innerdiv");
$div.eq(1).stop();
$div.eq(1).css({"top":"0px","left":"0px","width":"200px","height":"200px"});
$div.eq(0).stop().animate({"top":"-25px","left":"-25px","width":"250px","height":"250px","opacity":"0"},500);
$div.eq(1).stop().animate({"top":"-25px","left":"-25px","width":"250px","height":"250px","opacity":"1"},500);
}).mouseleave(function(){
var$this=$(this);
var$div=$this.find(".innerdiv");
$div.eq(0).stop().animate({"top":"0","left":"0","width":"200px","height":"200px","opacity":"1"},500);
$div.eq(1).stop().animate({"top":"0","left":"0","width":"200px","height":"200px","opacity":"0"},500);
});
</script>

</body>
</html>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航