jQuery实现平滑滚动的标签分栏切换效果

更新时间：2015年08月28日 09:19:50 作者：企鹅

这篇文章主要介绍了jQuery实现平滑滚动的标签分栏切换效果,涉及jquery鼠标事件及页面元素样式的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果。分享给大家供大家参考。具体如下：

这是一款老外的作品，后半部分的代码有点乱，具体就不细整理了，喜欢的朋友自己拷贝代码慢慢整理一下吧，呵呵，虽乱但功能不乱，预览看效果吧，很不错的标签滚动切换。

先来看看运行效果截图：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-scroll-bq-menu-cha-style-codes/

具体代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery超平滑滚动的标签分栏切换效果</title>
<style>
body {
 font-size: 10px;
 font-family: verdana,sans-serif;
 background-color: gray;
 background-image: url();
 background-position: 50% 50%;
 padding: 0px;
 margin: 0px;
}
.content {
 width: 800px;
 margin: 0px auto;
 background-color: #ffffff;
 padding: 20px;
}
h1 {
 color:#221A69;
 font-weight:normal;
 text-decoration:none;
}
.tabbed_content {
 background-color: #000000;
 width: 620px; 
}
.tabs {
 height: 62px;
 position: relative;
}
.tabs .moving_bg {
 padding: 15px;
 background-color:#7F822A;
 background-image:url(images/arrow_down_green.gif);
 position: absolute;
 width: 125px;
 z-index: 190;
 left: 0;
 padding-bottom: 29px;
 background-position: bottom left;
 background-repeat: no-repeat;
}
.tabs .tab_item {
 display: block;
 float: left;
 padding: 15px;
 width: 125px;
 color: #ffffff;
 text-align: center;
 z-index: 200;
 position: relative;
 cursor: pointer;
}
.tabbed_content .slide_content {
 overflow: hidden;
 background-color: #000000;
 padding: 20px 0 20px 20px;
 position: relative;
 width: 600px;
}
.tabslider {
 width: 5000px;
}
.tabslider ul {
 float: left;
 width: 560px;
 margin: 0px;
 padding: 0px;
 margin-right: 40px;
}
.tabslider ul a {
 color: #ffffff;
 text-decoration: none;
}
.tabslider ul a:hover {
 color: #aaaaaa;
}
.tabslider ul li {
 padding-bottom: 7px;
}
</style>
<script type='text/javascript' src='jquery-1.6.2.min.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).position()['left']
 }, {
 duration: 300
 });
 TabbedContent.slideContent($(this));
 });
 },
 slideContent: function(obj) {
 var margin = $(obj).parent().parent().find(".slide_content").width();
 margin = margin * ($(obj).prevAll().size() - 1);
 margin = margin * -1;
 $(obj).parent().parent().find(".tabslider").stop().animate({
 marginLeft: margin + "px"
 }, {
 duration: 300
 });
 }
}
$(document).ready(function() {
 TabbedContent.init();
});
</script>
</head>
<body>
<div style='padding: 15px;'>
 <div class='content'>
 <h1>Tabbed content with jQuery</h1>
 <p>
 An example of some tabbed content containers.
 </p> 
 <h2>Example:</h2>
 <div class='tabbed_content'>
 <div class='tabs'>
 <div class='moving_bg'>
 &nbsp;
 </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>
  <div class='slide_content'>  
  <div class='tabslider'>
  <ul>
  <li>
  <a href='#'>
   New looks coming your way
   </a>
  </li>
  <li>
   <a href='#'>
   jQuery convertion: Panoramic Photoviewer in Javascript
   </a>
  </li>
  <li>
   <a href='#'>
   jQuery convertion: Garagedoor effect using Javascript
   </a>
  </li>
  <li>
   <a href='#'>
   Image slider for displaying pictures or portfolios
   </a>
  </li>
  <li>
   <a href='#'>
   AjaxTwits - Load Tweets on your website with AJAX
   </a>
  </li>
  </ul>
  <ul>
  <li>
   <a href='#'>
   Panoramic Photoviewer in Javascript
   </a>
  </li>
  <li>
   <a href='#'>
   New looks coming your way
   </a>
  </li>
  <li>
   <a href='#'>
   jQuery convertion: Garagedoor effect using Javascript
   </a>
  </li>
  <li>
   <a href='#'>
   jQuery convertion: Panoramic Photoviewer in Javascript
   </a>
  </li>
  <li>
   <a href='#'>
   Lightbox + PhotoNav = LightNav
   </a>
  </li>
  </ul>
  <ul>
  <li>
   <a href='#'>
   Sieb Design | Design + Illustration
   </a>
  </li>
  <li>
   <a href='#'>
   Cybox | Internet & Communicatie
   </a>
  </li>
  <li>
   <a href='#'>
   Hypekid | Pim Arts, a freelance web-developer from the Netherlands
   </a>
  </li>
  <li>
   <a href='#'>
   Marcofolio | Marco's weblog
   </a>
  </li>
  <li>
   <a href='#'>
   Dev Tips | Become a better developer, one tip at a time
   </a>
  </li>
  </ul>
  <ul>
  <li>
   <a href='#'>
   Last.fm profile
   </a>
  </li>
  <li>
   <a href='#'>
   Gaya Design on Twitter
   </a>
  </li>
  <li>
   <a href='#'>
   My Youtube Channel
   </a>
  </li>
  <li>
   <a href='#'>
   Linked in profile
   </a>
  </li>
  <li>
   <a href='#'>
   Stuff to do with a NDS blog
   </a>
  </li>
  </ul>
  </div>
  <br style='clear: both' />
  </div>
 </div>
 <br />
 <br />
 <div class='tabbed_content'>
  <div class='tabs'>
  <div class='moving_bg'>
  &nbsp;
  </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>
  <div class='slide_content'>  
  <div class='tabslider'>
  <ul>
  <li>
   <a href='#'>
   New looks coming your way
   </a>
  </li>
  <li>
   <a href='#'>
   jQuery convertion: Panoramic Photoviewer in Javascript
   </a>
  </li>
  <li>
   <a href='#'>
   jQuery convertion: Garagedoor effect using Javascript
   </a>
  </li>
  <li>
   <a href='#'>
   Image slider for displaying pictures or portfolios
   </a>
  </li>
  <li>
   <a href='#'>
   AjaxTwits - Load Tweets on your website with AJAX
   </a>
  </li>
  </ul>
  <ul>
  <li>
   <a href='#'>
   Panoramic Photoviewer in Javascript
   </a>
  </li>
  <li>
   <a href='#'>
   New looks coming your way
   </a>
  </li>
  <li>
   <a href='#'>
   jQuery convertion: Garagedoor effect using Javascript
   </a>
  </li>
  <li>
   <a href='#'>
   jQuery convertion: Panoramic Photoviewer in Javascript
   </a>
  </li>
  <li>
   <a href='#'>
   Lightbox + PhotoNav = LightNav
   </a>
  </li>
  </ul>
  <ul>
  <li>
   <a href='#'>
   Sieb Design | Design + Illustration
   </a>
  </li>
  <li>
   <a href='#'>
   Cybox | Internet & Communicatie
   </a>
  </li>
  <li>
   <a href='#'>
   Hypekid | Pim Arts, a freelance web-developer from the Netherlands
   </a>
  </li>
  <li>
   <a href='#'>
   Marcofolio | Marco's weblog
   </a>
  </li>
  <li>
   <a href='#'>
   Dev Tips | Become a better developer, one tip at a time
   </a>
  </li>
  </ul>
  <ul>
  <li>
   <a href='#'>
   Last.fm profile
   </a>
  </li>
  <li>
   <a href='#'>
   Gaya Design on Twitter
   </a>
  </li>
  <li>
   <a href='#'>
   My Youtube Channel
   </a>
  </li>
  <li>
   <a href='#'>
   Linked in profile
   </a>
  </li>
  <li>
   <a href='#'>
   Stuff to do with a NDS blog
   </a>
  </li>
  </ul>
  </div>
  <br style='clear: both' />
  </div>
 </div>
 </div>
 </div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

您可能感兴趣的文章:

将jQuery应用于login页面的问题及解决
Login页面应该是迅速和简洁的，于是如果可以不产生回送，则不产生回送是最好的。
2009-10-10
jquery自定义组件实例详解
这篇文章主要为大家详细介绍了jquery自定义组件实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
详解Jquery实现ready和bind事件
这篇文章主要为大家详细介绍了Jquery实现ready和bind事件的相关资料，感兴趣的小伙伴们可以参考一下
2016-04-04
jquery中常用的SET和GET$(”#msg”).html循环介绍
jquery中常用的SET和GET$(”#msg”).html循环想必大家并不陌生吧，本文整理了一些，感兴趣的朋友可以参考下
2013-10-10
jQuery实现form表单基于ajax无刷新提交方法详解
这篇文章主要介绍了jQuery实现form表单基于ajax无刷新提交方法,结合实例形式分析了jQuery使用$.ajax()方法实现无刷新提交的详细步骤与实现技巧,并附带了一个较为完整的实例供大家参考,需要的朋友可以参考下
2015-12-12
jquery禁止输入数字以外的字符的示例(纯数字验证码)
这篇文章主要介绍了jquery禁止输入数字以外的字符的示例(纯数字验证码),需要的朋友可以参考下
2014-04-04
jQuery实现单击和鼠标感应事件
这篇文章主要介绍了jQuery实现单击和鼠标感应事件的方法的相关资料,需要的朋友可以参考下
2015-02-02
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
下面小编就为大家带来一篇jQuery实用小技巧_输入框文字获取和失去焦点的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
JQuery中的html()、text()、val()区别示例介绍
这篇文章主要介绍了JQuery中的html()、text()、val()的区别,需要的朋友可以参考下
2014-09-09
JQuery点击事件回到页面顶部效果的实现代码
下面小编就为大家带来一篇JQuery点击事件回到页面顶部效果的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05

jQuery实现平滑滚动的标签分栏切换效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具