您的位置：首页 > Web前端 > JavaScript

js实现div整块向上移动的动画效果

2013-12-17 09:48 591 查看 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body{
font: 14px/1.6 "Microsoft YaHei";
}
ul, ol {
list-style: none;
}
p{
padding: 0;
margin: 0;
}
.mt10 {
margin-top: 10px;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
content: "";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
.tjshop ul {
padding: 10px;
overflow: hidden;
color: #555;
font-size: 12px;
width: 1030px;
}
.tjshop ul li {
width: 227px;
float: left;
margin-right: 25px;
}
.tjshop ul li .bg {
background: #f1f7fb;
padding: 5px 10px 8px 10px;
overflow: hidden;
}
.scrollCon {
width: 227px;
height: 78px;
overflow: hidden;
}

</style>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script>
function AutoScroll(wrap){
var interval=10000;
var moving;
wrap.hover(function(){
clearInterval(moving);
},function(){
moving=setInterval(function(){
var field=wrap.find('div:first');
var h= field.height();
field.animate({marginTop:'-'+h+'px'},600,function(){
field.css('marginTop','10px').appendTo(wrap);
})
},interval)
}).trigger('mouseleave');
};
$(document).ready(function(){
$(".scrollCon").each(function(i){
AutoScroll($(this));
});
});
</script>
</head>
<body>
<div class="tjshop mt10">
<ul>
<li>
<div class="clearfix scrollCon">
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/18553433">jn0.com</a>
</span>
</p>
<p>一口价：3000</p>
<p>剩余时间：交易已结束</p>
</div>
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/18356132">00884.com</a>
</span>
</p>
<p>一口价：3000</p>
<p>剩余时间：交易已结束</p>
</div>
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/19061318">zr3.com</a>
</span>
</p>
<p>一口价：3000</p>
<p>剩余时间：11天10时55分3秒</p>
</div>
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/18764747">3qg.com</a>
</span>
</p>
<p>一口价：3200</p>
<p>剩余时间：交易已结束</p>
</div>
</div>
</li>
<li>
<div class="clearfix scrollCon">
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/18553433">jn0.com</a>
</span>
</p>
<p>一口价：3000</p>
<p>剩余时间：交易已结束</p>
</div>
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/18356132">00884.com</a>
</span>
</p>
<p>一口价：3000</p>
<p>剩余时间：交易已结束</p>
</div>
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/19061318">zr3.com</a>
</span>
</p>
<p>一口价：3000</p>
<p>剩余时间：11天10时55分3秒</p>
</div>
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/18764747">3qg.com</a>
</span>
</p>
<p>一口价：3200</p>
<p>剩余时间：交易已结束</p>
</div>
</div>
</li>
<li>
<div class="clearfix scrollCon">
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/18553433">jn0.com</a>
</span>
</p>
<p>一口价：3000</p>
<p>剩余时间：交易已结束</p>
</div>
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/18356132">00884.com</a>
</span>
</p>
<p>一口价：3000</p>
<p>剩余时间：交易已结束</p>
</div>
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/19061318">zr3.com</a>
</span>
</p>
<p>一口价：3000</p>
<p>剩余时间：11天10时55分3秒</p>
</div>
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/18764747">3qg.com</a>
</span>
</p>
<p>一口价：3200</p>
<p>剩余时间：交易已结束</p>
</div>
</div>
</li>
<li>
<div class="clearfix scrollCon">
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/18553433">jn0.com</a>
</span>
</p>
<p>一口价：3000</p>
<p>剩余时间：交易已结束</p>
</div>
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/18356132">00884.com</a>
</span>
</p>
<p>一口价：3000</p>
<p>剩余时间：交易已结束</p>
</div>
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/19061318">zr3.com</a>
</span>
</p>
<p>一口价：3000</p>
<p>剩余时间：11天10时55分3秒</p>
</div>
<div class="clearfix mt10 bg">
<p>
<span>
<a target="_blank" title="" href="http://www.ename.com/auction/domain/18764747">3qg.com</a>
</span>
</p>
<p>一口价：3200</p>
<p>剩余时间：交易已结束</p>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航