jQuery图片从下往上滚动效特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片从下往上滚动效特效代码的示例演示效果:

当前平台(PC电脑)

平台:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片从下往上滚动效果</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.box .box1').mouseover(function(){
		$(this).stop().animate({"top":"-514px"}, 200); 
	})
	$('.box .box1').mouseout(function(){
		$(this).stop().animate({"top":"0"}, 200); 
	})
})
</script>

</head>
<body>

<div id="in_ct">
<!----------in_ct开始---------->
	<div class="in_ct">	
    	<!----------in_ct1 开始---------->
            <div class="in_ct1">
            	<ul class="box">
                    <li>
                        <div class="box1">
                            <div class="toll_img"><img src="images/in_img1.jpg" width="272" height="514"/></div>
                            <div class="toll_info"><a href="#" target="_blank"><img src="images/in_img1_ho.jpg" height="514" width="272" /></a></div>
                        </div>
                    </li>
                    <li>
                        <div class="box1">
                            <div class="toll_img"><img src="images/in_img2.jpg" width="272" height="514"/></div>
                            <div class="toll_info"><a href="#" target="_blank"><img src="images/in_img2_ho.jpg" height="514" width="272" /></a></div>
                        </div>
                    </li>
                    <li>
                    	<div class="box1">                        
                            <div class="toll_img"><img src="images/in_img3.jpg" width="272" height="514"/></div>
                            <div class="toll_info"><a href="#" target="_blank"><img src="images/in_img3_ho.jpg" height="514" width="272" /></a></div>
                        </div>
                    </li>
                    <li>
                    	<div class="box1">
                            <div class="toll_img"><img src="images/in_img4.jpg" width="272" height="514"/></div>
                            <div class="toll_info"><a href="#" target="_blank"><img src="images/in_img4_ho.jpg" height="514" width="272" /></a></div>
                        </div>
                    </li>
                </ul>  
            </div>
        <!----------in_ct1 结束---------->
	</div>
<!----------in_ct结束---------->
</div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
#in_ct{width:100%;height:auto;overflow:hidden;margin:6px 0 0;background:url(../images/in_ct_bg.gif) repeat-x;}
.in_ct{width:1110px;height:auto;overflow:hidden;margin:0 auto;background:#fff;}
.in_ct1{width:1110px;height:auto;overflow:hidden;}
.box li{width:272px;height:514px;margin-left:4px;float:left;overflow:hidden;position:relative;}
.toll_img{width:272px;height:514px;}
.toll_info{height:514px;vertical-align:middle;display:table-cell;}
.box li .box1{color:#666;text-decoration:none;position:absolute;top:0;left:0;cursor:pointer;}

附件:下载该文件资源,减少时间成本(增值服务)