首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
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
内置模块(1) 后端(1) Vscode(3) 人人对战(1) 递归(1) tokenizer(1) 时钟(1) Parser(1) 双人对弈(1) 算法(1)
You might like
PHP Socket 编程
2010/04/09 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
php实现文件下载实例分享
2014/06/02 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
javascript eval函数深入认识
2009/02/21 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
Python对象体系深入分析
2014/10/28 Python
Python笔试面试题小结
2019/09/07 Python
python编写猜数字小游戏
2019/10/06 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
采购内勤岗位职责
2013/12/10 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
大学学生会竞选稿
2015/11/19 职场文书
送给教师们，到底该如何写好教学反思？
2019/07/02 职场文书
导游词之西安骊山
2019/12/03 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js