jquery实现图片列表鼠标移入微动
本效果使用jQuery和CSS实现了图片列表，当鼠标移入时图片向左微动，移出则复原。
其中的jQuery事件使用mouseenter和mouseleave，事件绑定方法使用新推荐的on方法。
代码如下：
<!DOCTYPEhtml>
<html>
<head><metaname="viewport"content="width=device-width,initial-scale=1"/>
<title>jQuery实现图片列表鼠标移入微动_何问起</title><basetarget="_blank"/>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<styletype="text/css">
body,div,li,p,img,a{
margin:0;
padding:0;
}
.hovertreecontainer{
width:370px;
margin:50pxauto;
}
.hovertreecontainera{
text-decoration:none;
}
.hovertree-item-box{
height:120px;
width:185px;
position:relative;
padding:10px;
box-sizing:border-box;
float:left;
}
.hovertree-item-box.title{
width:80px;
height:100%;
color:#4998a1;
font-size:14px;
}
.hovertree-item-box.odd{
border-bottom:1pxsolid#CCC;
border-right:1pxsolid#CCC;
}
.hovertree-item-box.even{
border-bottom:1pxsolid#CCC;
}
.hovertree-item-box.nobottom{
border-bottom:none;
}
.hovertree-item-box.hovertree-img-box{
width:80px;
height:80px;
overflow:hidden;
position:absolute;
right:10px;
bottom:5px;
}
.hovertree-img-boximg{
width:100%;
height:100%;
}
.hovertreecontainer:after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<divclass="hovertreecontainer"><h2>jQuery实现图片列表鼠标移入微动</h2>
<ahref="http://hovertree.com/texiao/css/20/">
<divclass="hovertree-item-boxodd">
<divclass="title">春节对联</div>
<divclass="hovertree-img-box"><imgsrc="http://hovertree.com/hvtimg/201512/o9qashmi.gif"></div>
</div>
</a>
<ahref="http://hovertree.com/hvtart/bjae/a6w6e2qg.htm">
<divclass="hovertree-item-boxeven">
<divclass="title">下雨天</div>
<divclass="hovertree-img-box"><imgsrc="http://hovertree.com/hvtimg/201512/f748s0ko.jpg"></div>
</div>
</a>
<ahref="http://hovertree.com/h/bjae/0st5ww13.htm">
<divclass="hovertree-item-boxodd">
<divclass="title">磨砂玻璃</div>
<divclass="hovertree-img-box"><imgsrc="http://hovertree.com/hvtimg/201512/agagq0or.jpg"></div>
</div>
</a>
<ahref="http://hovertree.com/menu/texiao/">
<divclass="hovertree-item-boxeven">
<divclass="title">网页特效</div>
<divclass="hovertree-img-box"><imgsrc="http://hovertree.com/hvtimg/201512/r51a22uy.gif"></div>
</div>
</a>
<ahref="http://hovertree.com/h/bjaf/hwqtjwjs.htm">
<divclass="hovertree-item-boxoddnobottom">
<divclass="title">何问起统计文件数</div>
<divclass="hovertree-img-box"><imgsrc="http://hovertree.com/hvtimg/bjafjd/iofopnro.png"></div>
</div>
</a>
<ahref="http://hovertree.com/h/bjaf/hovertreeimg.htm">
<divclass="hovertree-item-boxevennobottom">
<divclass="title">HovertreeImg</div>
<divclass="hovertree-img-box"><imgsrc="http://hovertree.com/hvtimg/201601/p3t2ldyr.png"></div>
</div>
</a>
<div><ahref="http://hovertree.com/h/bjaf/4mv4wgmj.htm">原文</a><ahref="http://hovertree.com">首页</a><ahref="http://hovertree.com/menu/texiao/">特效</a></div>
</div>
<scripttype="text/javascript"src="http://down.hovertree.com/jquery/jquery-1.11.3.min.js"></script>
<scripttype="text/javascript">
$(function(){
$('.hovertreecontainer.hover'+'tree-item-box').on('mouseenter',function(ev){
varoImgBox=$(this).find('.hovertree-img-box');
$(oImgBox).stop(true).animate({
right:'20px'
},"normal");
}).on('mouseleave',function(ev){
varoImgBox=$(this).find('.hovertree-img-box');
$(oImgBox).stop(true).animate({
right:'10px'
},"normal");
});
});
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持毛票票！