鼠标移到到图片，图片向上滑动预览效果

最新推荐文章于 2021-08-03 22:15:33 发布

每天都进步一点点

最新推荐文章于 2021-08-03 22:15:33 发布

阅读量3.1k

点赞数 3

分类专栏： js JQ

本文链接：https://blog.csdn.net/gongqinglin/article/details/89305835

版权

js 同时被 2 个专栏收录

50 篇文章 3 订阅

订阅专栏

37 篇文章 0 订阅

订阅专栏

<!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>

每天都进步一点点

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
鼠标移到到图片，图片向上滑动预览效果

<!DOCTYPE html><html><head> <title>鼠标移到到图片，图片向上滑动预览效果</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script type="text/...
复制链接

扫一扫