이 기사에서는 주로 JS를 사용하여 항목 라벨을 클릭한 후 스크롤 전환을 달성하는 효과를 제공합니다. 관심 있는 친구는 테스트하고 배울 수 있습니다. 그것이 모두에게 도움이 되기를 바랍니다.
이 글의 JS 효과는 ITEM 라벨을 마우스로 클릭할 때 스크롤 전환에 따라 아래 내용의 효과를 얻는 것입니다. 먼저 작업 후 렌더링을 살펴보겠습니다.
다음은 실행 코드입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery实现的平滑滚动选项卡</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> .tabs{width: 1200px; margin: 0 auto; height: 336px; overflow: hidden;} .tabs_item{height: 36px;} .tabs_block{height: 300px;} .list_item{float: left; width: 200px; height: 36px; line-height: 36px; font-size: 26px; text-align: center;background-color:#FC0;cursor: pointer;} .list_item.active{color: #FFF;background-color:#F60} .tabs_block{width: 20000px; position: relative;} .list_block{display: none; float: left; width: 1200px; height: 300px; font-size: 100px; text-align: center; line-height: 300px;background-color:#F4F4F4} .list_block.show{display: block;} </style> <script>jQuery.easing['easeOutCubic'] = function (x, t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b; }; function Tabs(tabs,list,block,item,$){ var tabs = $(tabs); var width = tabs.width(); tabs.find(list+':first').addClass('active'); tabs.find(item+':first').addClass('show'); tabs.find(list).click(function(){ var $this = $(this); var i = tabs.find(block).find('.show').index(); var n = $this.index(); $this.addClass('active').siblings('.active').removeClass('active'); tabs.find(item).eq(n).addClass('show'); if(n > i){ tabs.find(block).stop().animate({'left':'-'+width+'px'},600,'easeOutCubic',function(){ tabs.find(block).css('left','0px'); tabs.find(item).eq(n).siblings('.show').removeClass('show'); }); }else{ tabs.find(block).css('left','-'+width+'px').stop().animate({'left':0},600,'easeOutCubic',function(){ tabs.find(item).eq(n).siblings('.show').removeClass('show'); }); } }); } </script> </head> <body> <p class="tabs"> <p class="tabs_item"> <p class="list_item">list item 1</p> <p class="list_item">list item 2</p> <p class="list_item">list item 3</p> <p class="list_item">list item 4</p> <p class="list_item">list item 5</p> <p class="list_item">list item 6</p> </p> <p class="clear"> </p> <p class="tabs_block"> <p class="list_block">list block 1</p> <p class="list_block">list block 2</p> <p class="list_block">list block 3</p> <p class="list_block">list block 4</p> <p class="list_block">list block 5</p> <p class="list_block">list block 6</p> </p> </p> <script type="text/javascript"> jQuery(document).ready(function(){ var myTabs = new Tabs('.tabs','.list_item','.tabs_block','.list_block',jQuery); }); </script> <p style="text-align:center">更多代码请访问:<a href="http://www.jb51.net" target="_blank">脚本之家</a></p> </body> </html>
바이두의 jquery를 인용한 코드입니다.
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
관련 권장 사항:
네이티브 JS에 대한 자세한 설명은 여러 스크롤을 제어하는 것입니다. 막대 동기식 Scroll
콘텐츠 영역이 아래쪽으로 스크롤되는지 여부를 결정하는 js에 대한 자세한 설명
테이블 스크롤 및 페이징 튜토리얼의 JavaScript 구현
위 내용은 라벨 스크롤 전환 효과의 JS 구현에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!