jquery实现图片列表鼠标移入微动

2020-05-27 17:55:36易采站长站整理

<div class="title">网页特效</div>
<div class="hovertree-img-box"><img src="https://www.easck.com/d/file/200527/202005271751511209.jpg"></div>
</div>
</a>
<a href="http://hovertree.com/h/bjaf/hwqtjwjs.htm">
<div class="hovertree-item-box odd nobottom">
<div class="title">何问起统计文件数</div>
<div class="hovertree-img-box"><img src="https://www.easck.com/d/file/200527/202005271751511211.jpg"></div>
</div>
</a>
<a href="http://hovertree.com/h/bjaf/hovertreeimg.htm">
<div class="hovertree-item-box even nobottom">
<div class="title">HovertreeImg</div>
<div class="hovertree-img-box"><img src="https://www.easck.com/d/file/200527/202005271751511213.jpg"></div>
</div>
</a>
<div><a href="http://hovertree.com/h/bjaf/4mv4wgmj.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/menu/texiao/">特效</a></div>
</div>
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function () {
$('.hovertreecontainer .hover'+'tree-item-box').on('mouseenter', function (ev) {
var oImgBox = $(this).find('.hovertree-img-box');

$(oImgBox).stop(true).animate({
right: '20px'
}, "normal");
}).on('mouseleave', function (ev) {
var oImgBox = $(this).find('.hovertree-img-box');
$(oImgBox).stop(true).animate({
right: '10px'
}, "normal");
});
});
</script>
</body>
</html>