注册有礼
您现在的位置是：群英 > 开发技术 > web开发
用jQuery怎样让标签分栏平滑滚动的切换
Admin发表于 2022-08-23 17:07:10377 次浏览
这篇文章主要为大家详细介绍了用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怎样让标签分栏平滑滚动的切换”的介绍了，感谢各位的阅读，希望文本对大家有所帮助。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。







标签：
jQuery标签分栏切换





上一篇： jQuery中给导航栏添加选中样式的代码是什么 


下一篇： 用jQuery如何制作自动轮播图，且鼠标经过停止轮播 




相关信息推荐





基于PHP怎样用openssl扩展实现加密？


2021-11-17 18:05:46　


摘要：这篇文章给大家分享的是openssl扩展的相关内容，下文介绍了基于PHP使用openssl扩展实现加密的方法，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。






如何求数组？php的第一个元素的下标是什么？


2022-07-30 17:36:41　


摘要：两种实现方法：1、利用key()获取数组第一个元素的下标，语法“key(指定数组)”。2、使用“array_keys(原数组)”语句获取原数组的全部下标，返回包含全部下标的键名数组，再利用“$键名数组名[0]”语句获取键名数组的第一个元素值，也就是原数组第一个元素的下标即可。






AJAX原理的通俗理解是什么，如何对AJAX封装


2022-07-27 17:57:22　


摘要：前端是个发展迅速的领域,前端请求自然也发展迅速,从原生的XHR到jquery ajax,再到现在的axios和fetch,下面这篇文章主要给大家介绍了关于AJAX原理以及axios、fetch区别的相关资料,需要的朋友可以参考下












云活动




推荐内容






  • 
PHP中替换第一位字符的方法和代码是什么 
     2022-12-14 11:21:38

    • 

  • 
Python使用中有哪些高效、实用的高级技巧 
     2022-08-19 17:53:01

    • 

  • 
新手学习Python有哪些关键字要掌握 
     2022-08-19 17:51:59

    • 

    

    

    热门关键词
    

    

    

jQuery标签分栏切换


import和require区别


AI孙燕姿


php警告变量


php数组删除值


MySQL登录原理


vue子路由


oracle查询执行计划


devel包


linux设备节点作用


overflow属性


replaceFirst


合成声音


vue.js,修饰符,stop


python输出数位


云计算服务类型


php数组的键名


php实现图片压缩


join关联查询


copy函数


javase和javaee区别


bootstrap列栅格系统


android开发框架


Laravel集合


月入过万


PHP压缩图


AI4Science


桌面版


DOM节点


负载均衡


    

    

    

    热门信息
    

    

    

  • 
Python中如何求阶乘？教你四个方法 
     2022-02-25 17:19:26

    • 

  • 
Python怎么样创建txt文件，写入方法是什么？ 
     2022-01-24 19:23:44

    • 

  • 
pycharm怎么完全卸载？两个步骤帮你搞定 
     2022-01-04 18:53:44

    • 

  • 
Java中map判断是否存在key怎样做？教你两个方法 
     2022-01-26 18:39:38

    • 

  • 
Python中怎样利用while求1到100的和？ 
     2021-11-20 17:46:01

    • 

  • 
Java中string转date有哪些方式，怎样实现？ 
     2022-01-18 18:00:09

    • 

  • 
Python中怎么定义数组？教你三种方法 
     2022-01-13 18:58:11

    • 

  • 
Python中的eval函数的作用是什么，怎样用？ 
     2022-01-24 19:23:57

    • 

  • 
用python如何读取csv文件，你知道几种方法？ 
     2021-11-22 17:53:55

    • 

  • 
python中怎样统计元素出现的次数，方法有哪些？ 
     2021-11-20 17:45:40

    • 

    




    

    

    

    

    

    群英网络助力开启安全的云计算之旅
    

    
立即注册，领取新人大礼包

    

    

    

    

    

    

    

    

    

    

    

    

    

    


专业资深工程师驻守


    

    


7X24小时极速响应


    

    


一站式无忧技术支持


    

    


免费备案服务


    

    

    

    

    

    


    

    


    

    


    

    


    

    

      

    • 联系我们
      • 

    • 24小时售后：4006784567
      • 

    • 24小时TEL ：0668-2555666
      • 

    • 售前咨询TEL：400-678-4567
      • 

    • 



      
官方微信
      



      
官方微信
      

      • 

    

    

    

    

    

    
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司

    

    
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号

    

    

    

    

免费拨打  400-678-4567

    
免费拨打  400-678-4567
免费拨打 400-678-4567 或 0668-2555555

    
    

    


    


    

    

微信公众号

    
    

返回顶部

    
返回顶部
返回顶部