鼠标触及图片向上滚动效果"/>
HTML+JS鼠标触及图片向上滚动效果
效果演示
代码
<!DOCTYPE html>
<html>
<head><title>鼠标移到到图片，图片向上滑动预览效果</title><script src=".2.4/jquery.min.js"></script><script type="text/javascript">//图片滚动$(document).ready(function(){function template($this,img_h,info_h){function img1_sin(){$this.find(".img1").find("img").stop(true,true).animate({top: -(img_h-info_h)},(img_h-info_h)*4,"linear")}img1_sin();}$(".slide").mouseover(function(){var info_h = $(this).find(".img1").find(".info").height();var img_h = $(this).find(".img1").find("img").height();template($(this),img_h,info_h);})$(".slide").mouseout(function(){$(this).find(".img1").find("img").stop(true,true).animate({top: 0}, 800 , "linear");})})</script><style type="text/css">.img1{width: 305px;height: 206px;padding: 12px 1px 1px;-webkit-transition: all .3s;transition: all .3s;position: relative;}.info{ overflow: hidden;height: 100%;position: relative;}.slide img{max-height: inherit;*max-height: none;position: absolute;top: 0;}</style>
</head>
<body><div class="slide" style="width:330px;"><div class="img1" style="margin-left:15px;"><div class="info"><a href="" target="_blank"><img src=".jpg" width="305" alt=""></a></div></div></div>
</body>
</html>更多推荐
HTML+JS鼠标触及图片向上滚动效果
发布评论