jQuery如何实现平滑滚动的标签分栏切换效果
- 更新时间:2020-07-08 09:38:20
- 编辑:郜婉清
参考资料
- jQuery实战 PDF 电子书 / 99.0 MB / Bear Bibeault 推荐度:
- jQuery实战(第2版) PDF 电子书 / 29.9 MB / [美]Bear Bibeault / [美]Yehuda Katz 推荐度:
- jQuery实战案例精粹 PDF 电子书 / 272 MB / 吴绍兴//李勇//明廷 推荐度:
- jQuery程序设计基础教程 课后答案 / 2.7 MB / 姚敦红 杨凌 张志美 推荐度:
- 《轻松玩转jQuery》源代码 配套资源 / 649.46 KB / 蓝健 推荐度:
正文内容
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程序设计有所帮助。
相关教程
-
jquery背景墙聚光灯效果的实例代码
这篇文章主要介绍了jquery实现背景墙聚光灯效果示例,需要的朋友可以参考下
发布时间:2020-01-17
-
jquery二级导航菜单的示例效果
这篇文章主要介绍了jquery实现带二级菜单的导航示例,需要的朋友可以参考下
发布时间:2020-03-14
-
jQuery实现鼠标经过图片变亮离开变暗的效果代码
jQuery实现的仿商城图片变亮变暗效果,鼠标悬停图片之后该图片变亮,其他图片变暗。移开鼠标所有图片变亮,兼容主流浏览器,适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、
发布时间:2019-08-09
-
jquery实现鼠标拖动效果的代码
因为鼠标没有拖动事件(按下鼠标并移动),只有按下,抬起,移动
发布时间:2019-09-24
-
使用jQuery实现放大镜效果
这篇文章主要介绍了jQuery实现的放大镜效果,结合实例形式分析了jQuery插件zoom.js实现放大镜功能的相关操作技巧,需要的朋友可以参考下
发布时间:2020-01-14
-
jQuery实现3d旋转星空效果实例代码
这篇文章主要介绍了jQuery实现炫丽的3d旋转星空效果,涉及jQuery数值运算与页面元素属性动态变换相关操作技巧,需要的朋友可以参考下
发布时间:2020-06-04
-
介绍带动画效果的二级导航菜单Jquery特效
导航菜单在网页中呈现的频率还是比较多的,因为效果相当不错,接下来为大家介绍下使用jquery实现经典二级导航菜单,各位童鞋们快来围观哦
发布时间:2020-03-10
-
jquery实现的Banner广告收缩效果的实例
这篇文章主要介绍了jquery实现的Banner广告收缩效果代码,可实现点击按钮收缩与展开广告图片的功能,非常简单实用,需要的朋友可以参考下
发布时间:2020-05-19
-
jquery如何实现侧边栏左右伸缩效果
下面小编就为大家分享一篇jquery实现侧边栏左右伸缩效果的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
发布时间:2020-03-05
-
实例详解jQuery和HTML5实现WebGL高性能烟花绽放动画效果
这篇文章主要介绍了jQuery+HTML5实现WebGL高性能烟花绽放动画效果,可实现烟花升空爆炸的绚丽动画效果,并附带demo源码供读者下载参考,需要的朋友可以参考下
发布时间:2020-03-16
-
PHP与jQuery开发实例
这书由浅入深地叙述了怎么使用PHP与jQuery搭建高宽比互动的Web运用。每一章聚焦点一个主题风格,探讨Web开发者常常必须处理的一类实际难题。书中以实际上范例及编码表述的方法得出了有目
大小:9.8 MBPHP开发
-
jQuery实战从入门到精通
本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术,适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书
大小:189.1 MBjQuery电子书
-
jQuery UI开发指南
《jQuery UI开发指南》 是jQuery UI的快速开发指南,全面介绍jQuery UI如何改进HTML页面展示,内容包括jQuery UI 1.8版本的下列扩展特性:选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历
大小:6.02 MB前端开发电子书
-
Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践
本书是著名前端开发大牛阮晓龙老师爽作,HTML5、CSS3、jQuery、AJAX一站搞定,一本真正好学、实用又精彩的书,讲述了用HTML5 CSS3设计构建网站的必备知识,欢迎下载
大小:167.1 MBWeb前端电子书
-
jQuery实战案例精粹
jQuery实战案例精粹 从Web开发的实际应用角度出发,结合当下热门的 jQuery插件技术,深入浅出地介绍了 jQuery高性能开发的技巧,是前端开发、设计人员的绝佳选择。 本书共 22章,介绍了 jQuer
大小:272 MBjQuery电子书