最新消息:红方科技年末特惠:.com域名55元、云虚机五折优惠,买3年送2年,更有智能建站套餐等你来取!

jquery平滑滚动切换效果

JS yinhexi 1868浏览 0评论

<style>

.tabs {
background-color: #000000;
height: 62px;
position: relative;
}
.tabs .moving_bg {
background:#7F822A;
position: absolute;
width: 125px;
z-index: 190;
left: 0;
height:62px;
padding:0 15px;
}

.tabs .tab_item {
display: block;
float: left;
padding: 15px;
width: 125px;
color: #ffffff;
text-align: center;
z-index: 200;
position: relative;
cursor: pointer;
}

</style>
<script type=’text/javascript’ src=’http://www.codefans.net/ajaxjs/jquery1.3.2.js’></script>
<script type=”text/javascript”>
var TabbedContent = {
init: function() {
$(“.tab_item”).mouseover(function() {

var background = $(this).parent().find(“.moving_bg”);

$(background).stop().animate({left:$(this).offset().left},300);

});
}
}

$(document).ready(function() {
TabbedContent.init();
});
</script>
</head>
<body>
<div class=’tabs’>
<div class=’moving_bg’></div>
<span class=’tab_item’>
Latest posts
</span>
<span class=’tab_item’>
Top posts
</span>
<span class=’tab_item’>
Partners
</span>
<span class=’tab_item’>
Links
</span>
</div>
</body>
</html>

转载请注明:红方博客 » jquery平滑滚动切换效果