js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > js选项卡

js实现点击tab导航滑动相应的新闻内容列表特效代码

发布时间:2017-01-05 15:46:02    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

js实现点击tab导航滑动相应的新闻内容列表特效代码

js实现点击tab导航滑动相应的新闻内容列表特效代码

//
// 	Code taken and adapted from CodaEffects.js - (C) 2007 Panic, Inc.
// 	http://www.panic.com
//  
// 
//

var currentSection = "home-pane"; // The default loaded section on the page
var tabTag = "-tab";
var paneTag = "-pane";

// Scroll the page manually to the position of element "link", passed to us.

function ScrollSection(link, scrollArea, offset)
{

	// Store the last section, and update the current section

	if (currentSection == link) {
		return;
	}
	lastSection = currentSection;
	currentSection = link;
	
	// Change the section highlight.
	// Extract the root section name, and use that to change the background image to 'top', revealing the alt. state

    sectionTab = currentSection.split("-")[0] + tabTag;
    document.getElementById(sectionTab).className = 'active';
    if (lastSection) {
	   lastTab = lastSection.split("-")[0] + tabTag;
	    document.getElementById(lastTab).className = "inactive";
	}
    
	// Get the element we want to scroll, get the position of the element to scroll to
	
	theScroll = document.getElementById(scrollArea);
	position = findElementPos(document.getElementById(link));
	
	// Get the position of the offset div -- the div at the far left.
	// This is the amount we compensate for when scrolling
	
	if (offset != "") {
		offsetPos = findElementPos(document.getElementById(offset));
		position[0] = position[0] - offsetPos[0];
	}

	
	scrollStart(theScroll, theScroll.scrollLeft, position[0], "horiz");
	// return false;
}
function ScrollArrow(direction, toolbar, scrollArea, offset) {

	toolbarElem = document.getElementById(toolbar);
	toolbarNames = new Array();
    
	// Find all the <li> elements in the toolbar, and extract their id's into an array.
    
	if (toolbarElem.hasChildNodes())
	{
		var children = toolbarElem.childNodes;
		for (var i = 0; i < children.length; i++) 
		{
			if (toolbarElem.childNodes[i].tagName == "LI") {
				toolbarNames.push(toolbarElem.childNodes[i].id.split("-")[0]);
			}
		}
	}

	// Now iterate through our array of tab names, find matches, and determine where to go.

	for (var i = 0; i < toolbarNames.length; i++) {
		if (toolbarNames[i] == currentSection.split("-")[0]) {
			if (direction == "left") {
				if (i - 1 < 0) {
					gotoTab = toolbarNames[toolbarNames.length - 1];
				} else {
					gotoTab = toolbarNames[i - 1];
				}
			} else {
				if ((i + 1) > (toolbarNames.length - 1)) {
					gotoTab = toolbarNames[0];
				} else {
					gotoTab = toolbarNames[i + 1];
				}
			}
		}
	}
	
	// Go to the section name!
	
	ScrollSection(gotoTab+paneTag, scrollArea, offset);

}
var scrollanim = {time:0, begin:0, change:0.0, duration:0.0, element:null, timer:null};

function scrollStart(elem, start, end, direction)
{
	//console.log("scrollStart from "+start+" to "+end+" in direction "+direction);

	if (scrollanim.timer != null) {
		clearInterval(scrollanim.timer);
		scrollanim.timer = null;
	}
	scrollanim.time = 0;
	scrollanim.begin = start;
	scrollanim.change = end - start;
	scrollanim.duration = 25;
	scrollanim.element = elem;
	
	if (direction == "horiz") {
		scrollanim.timer = setInterval("scrollHorizAnim();", 15);
	}
	else {
		scrollanim.timer = setInterval("scrollVertAnim();", 15);
	}
}

function scrollVertAnim()
{
	if (scrollanim.time > scrollanim.duration) {
		clearInterval(scrollanim.timer);
		scrollanim.timer = null;
	}
	else {
		move = sineInOut(scrollanim.time, scrollanim.begin, scrollanim.change, scrollanim.duration);
		scrollanim.element.scrollTop = move; 
		scrollanim.time++;
	}
}

function scrollHorizAnim()
{
	if (scrollanim.time > scrollanim.duration) {
		clearInterval(scrollanim.timer);
		scrollanim.timer = null;
	}
	else {
		move = sineInOut(scrollanim.time, scrollanim.begin, scrollanim.change, scrollanim.duration);
		scrollanim.element.scrollLeft = move;
		scrollanim.time++;
	}
}
function findElementPos(elemFind)
{
	var elemX = 0;
	var elemY = 0;
	do {
		elemX += elemFind.offsetLeft;
		elemY += elemFind.offsetTop;
	} while ( elemFind = elemFind.offsetParent )

	//console.log("Found element "+elemFind+" at "+elemY+"/"+elemX);

	return Array(elemX, elemY);
}
function sineInOut(t, b, c, d)
{
	return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}



tab导航 tab 滑动

js仿阿里巴巴的滑动TAB导航特效代码、不规则tab切换

js实现点击tab导航滑动相应的新闻内容列表特效代码

tab选项卡切换特效并且带更多按钮

jquery双重切换的tab选项卡特效代码

jquery tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等特效

jquery SuperSlide仿京东首页促销产品tab选项卡切换特效

jquery实现网页右下角向上弹出广告代码,支持tab切换

jquery左右布局的缓动Tab切换选项卡特效

jquery竖向tab切换焦点图特效

jquery实现网页右下角弹出并且支持tab标签选项卡的图片广告代码

js tab选项卡新闻列表切换特效

jquery实现可触摸控制的tab选项卡特效

jquery定位滚动tab选项卡效果

jquery TabSwitch 选项卡插件

jquery实现支持响应的TAB手风琴特效代码

jquery实现向上滑动切换Tab选项卡特效

jQuery实现tab选项卡标签自动切换特效

jquery实现彩色标签图片tab选项卡滑动切换特效代码

jQuery滑动选项卡多个tab切换插件演示_js代码

横向(纵向)时间轴tab标签切换和水平(垂直)切换幻灯片效果 demo1# 横向滚动

js仿阿里巴巴的滑动TAB导航特效代码、不规则tab切换

js实现黑色不规则TAB选项卡特效代码