Detailed analysis of JS implementation of label scrolling switching effect-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed analysis of JS implementation of label scrolling switching effect

Dec 25, 2017 pm 03:08 PM

javascript Label scroll

This article mainly brings you the effect of using JS to achieve scrolling switching after clicking on the item label. Friends who are interested can test it and learn it. Hope it helps everyone.

The JS effect of this article is to achieve the effect of switching the content below with the scroll when the mouse clicks on the ITEM label. Let's first take a look at the rendering after running.

The following is the running code:

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;
&lt;title&gt;jQuery实现的平滑滚动选项卡&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;style&gt;
.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;}
&lt;/style&gt;
&lt;script&gt;jQuery.easing[&#39;easeOutCubic&#39;] = 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+&#39;:first&#39;).addClass(&#39;active&#39;);
 tabs.find(item+&#39;:first&#39;).addClass(&#39;show&#39;);
 tabs.find(list).click(function(){
 var $this = $(this);
 var i = tabs.find(block).find(&#39;.show&#39;).index();
 var n = $this.index();
 $this.addClass(&#39;active&#39;).siblings(&#39;.active&#39;).removeClass(&#39;active&#39;);
 tabs.find(item).eq(n).addClass(&#39;show&#39;);
 if(n &gt; i){
 tabs.find(block).stop().animate({&#39;left&#39;:&#39;-&#39;+width+&#39;px&#39;},600,&#39;easeOutCubic&#39;,function(){
  tabs.find(block).css(&#39;left&#39;,&#39;0px&#39;);
  tabs.find(item).eq(n).siblings(&#39;.show&#39;).removeClass(&#39;show&#39;);
  });
 }else{
 tabs.find(block).css(&#39;left&#39;,&#39;-&#39;+width+&#39;px&#39;).stop().animate({&#39;left&#39;:0},600,&#39;easeOutCubic&#39;,function(){
  tabs.find(item).eq(n).siblings(&#39;.show&#39;).removeClass(&#39;show&#39;);
  });
 }
 });
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p class=&quot;tabs&quot;&gt;
 &lt;p class=&quot;tabs_item&quot;&gt;
  &lt;p class=&quot;list_item&quot;&gt;list item 1&lt;/p&gt;
  &lt;p class=&quot;list_item&quot;&gt;list item 2&lt;/p&gt;
  &lt;p class=&quot;list_item&quot;&gt;list item 3&lt;/p&gt;
  &lt;p class=&quot;list_item&quot;&gt;list item 4&lt;/p&gt;
  &lt;p class=&quot;list_item&quot;&gt;list item 5&lt;/p&gt;
  &lt;p class=&quot;list_item&quot;&gt;list item 6&lt;/p&gt;
 &lt;/p&gt;
 &lt;p class=&quot;clear&quot;&gt; &lt;/p&gt;
 &lt;p class=&quot;tabs_block&quot;&gt;
  &lt;p class=&quot;list_block&quot;&gt;list block 1&lt;/p&gt;
  &lt;p class=&quot;list_block&quot;&gt;list block 2&lt;/p&gt;
  &lt;p class=&quot;list_block&quot;&gt;list block 3&lt;/p&gt;
  &lt;p class=&quot;list_block&quot;&gt;list block 4&lt;/p&gt;
  &lt;p class=&quot;list_block&quot;&gt;list block 5&lt;/p&gt;
  &lt;p class=&quot;list_block&quot;&gt;list block 6&lt;/p&gt;
 &lt;/p&gt;
 &lt;/p&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
 jQuery(document).ready(function(){
  var myTabs = new Tabs(&#39;.tabs&#39;,&#39;.list_item&#39;,&#39;.tabs_block&#39;,&#39;.list_block&#39;,jQuery);
 });
&lt;/script&gt;
&lt;p style=&quot;text-align:center&quot;&gt;更多代码请访问：&lt;a href=&quot;http://www.jb51.net&quot; target=&quot;_blank&quot;&gt;脚本之家&lt;/a&gt;&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

In the code we quoted Baidu’s jquery

1	`<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>`

Copy after login

Related recommendations:

Detailed explanation of native JS is to control multiple scroll bars to follow the scrolling synchronously

Detailed explanation of js to determine whether the content area is scrolled to the bottom

JavaScript implementation of table scrolling and paging tutorial

The above is the detailed content of Detailed analysis of JS implementation of label scrolling switching effect. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn