ホームページ >ウェブフロントエンド >jsチュートリアル >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 プログラミング設計に役立つことを願っています。