<!DOCTYPE html>
<html>
<head>
<title>鼠标移到到图片,图片向上滑动预览效果</title>
<script src="http://libs.baidu.com/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="http://www.hunuoyun.com/upload/product/1811/201811225424.png" width="305" alt=""></a>
</div>
</div>
</div>
</body>
</html>
鼠标移到到图片,图片向上滑动预览效果
最新推荐文章于 2022-08-09 11:51:54 发布