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


Posted in Javascript onAugust 28, 2015

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

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

先来看看运行效果截图:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
Vue核心概念Action的总结
Jan 18 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 #Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 #Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 #Javascript
jquery实现左右滑动菜单效果代码
Aug 27 #Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 #Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 #Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 #Javascript
You might like
基于empty函数的输出详解
2013/06/17 PHP
浅析is_writable的php实现
2013/06/18 PHP
php把session写入数据库示例
2014/02/26 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python操作yaml说明
2020/04/08 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
机械电子工程专业推荐信范文
2013/11/20 职场文书
教师自荐信范文
2013/12/09 职场文书
学雷锋月活动总结
2014/04/25 职场文书
城管大队整治方案
2014/05/06 职场文书
四年级小学生评语
2014/12/26 职场文书
思想政治表现评语
2015/01/04 职场文书
北京颐和园导游词
2015/01/30 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android