用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'>
/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'>
/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怎样让标签分栏平滑滚动的切换”的介绍了，感谢各位的阅读，希望文本对大家有所帮助。如果想要了解更多知识，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 用jQuery怎样让标签分栏平滑滚动的切换
本文地址： https://pptw.com/jishu/653722.html