首页 > 代码库 > jqery实现一个图标上下滑动效果
jqery实现一个图标上下滑动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.contain-foot-nav {
width: 33.3%;
float: left;
text-align: center;
position: relative;
}
.contain-foot-nav img {
display: block;
margin: 0 auto;
}
.foot-nav-top {
width: 100%;
height: 120px;
position: absolute;
}
.contain-foot-nav h2{
margin-top: 120px;
}
.contain-foot-nav h3 {
font-size: 16px;
color: #4CD1A2;
}
</style>
<body>
<div class="contain-foot-nav">
<div class="foot-nav-top">
<a href="tel://020-38353308"><img src="http://www.mamicode.com/img/location.jpg"/></a>
</div>
<h2>联系电话</h2>
<h3>020-38353308</h3>
</div>
<script src="http://www.mamicode.com/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var set = setInterval(function() {
top();
bottom(); //启动计时器
}, 1500);
top();
bottom();
function top() {
$(".foot-nav-top").animate({
top: "15px"
});
};
function bottom() {
$(".foot-nav-top").animate({
top: "1px"
});
};
$(".foot-nav-top").mouseenter(function() {
clearInterval(set); //清除计时器
})
$(".foot-nav-top").mouseleave(function() {
set = setInterval(function() { //启动计时器
top();
bottom();
}, 1500);
})
});
</script>
</body>
</html>
jqery实现一个图标上下滑动效果