<!DOCTYPE html><html><head><title>鼠标移到到图片，图片向上滑动预览效果</title><script src="/jquery/2.0.0/jquery.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="/upload/product/1811/11225424.png" width="305" alt=""></a></div></div></div></body></html>
