无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻 > 公司新闻 >

如何运营小程序_JS完成标签滚动切换效果

时间:2021-01-11 10:58来源:如何运营小程序 作者:jianzhan 点击:
JS完成标识翻转转换实际效果 文章投稿:laozhang 本文给大伙儿产生的是用JS完成item标识点一下后翻转转换的实际效果,有兴趣爱好的朋友检测学习培训一下吧。文中的JS实际效果是
JS实现标签滚动切换效果     投稿:laozhang   这篇文章给大家带来的是用JS实现item标签点击后滚动切换的效果,有兴趣的朋友测试学习下吧。

本文的JS效果是在鼠标点击ITEM标签的时候,实现下方的内容跟随滚动切换的效果,我们先来看下运行后的效果图。

以下是凡科原创的运行代码:

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 html xmlns="1999/xhtml" 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=gb2312" / 
 title jQuery实现的平滑滚动选项卡 /title 
 script type="text/javascript" src="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 
 div 
 div 
 div list item 1 /div 
 div list item 2 /div 
 div list item 3 /div 
 div list item 4 /div 
 div list item 5 /div 
 div list item 6 /div 
 /div 
 div /div 
 div 
 div list block 1 /div 
 div list block 2 /div 
 div list block 3 /div 
 div list block 4 /div 
 div list block 5 /div 
 div list block 6 /div 
 /div 
 /div 
 script type="text/javascript" 
 jQuery(document).ready(function(){
 var myTabs = new Tabs('.tabs','.list_item','.tabs_block','.list_block',jQuery);
 /script 
 p 更多代码请访问: a href="a /p 
 /body 
 /html 

在代码中我们引用了百度的jquery

 script type="text/javascript" src="jquery/2.0.0/jquery.min.js" /script 

需要的朋友跟着学习下吧,感谢你对凡科的支持。


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信

在线咨询
联系电话

400-888-8866