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 相关文章推荐
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
webpack 模块热替换原理
Apr 09 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
mysql建立外键
2006/11/25 PHP
PHP 日期加减的类,很不错
2009/10/10 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
网页常用特效代码整理
2006/06/23 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
python3中set(集合)的语法总结分享
2017/03/24 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
实例详解Python模块decimal
2019/06/26 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
python中return不返回值的问题解析
2020/07/22 Python
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
仓库班组长岗位职责
2013/12/12 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
纯html+css实现Element loading效果
2021/08/02 HTML / CSS