您的位置：首页 > Web前端 > JavaScript

js滑动效果，适用选项卡等

2013-11-28 11:44 281 查看

<style type="text/css">
*{font-family:宋体;font-size:32px;color:black;}
</style>

<div id="tab" align="center">
<a href="">
<span style="background-color:red" id="1"></span>
</a>

<a href="">
<span style="background-color:red" id="2"></span>
</a>

<a href="">
<span style="background-color:red" id="3"></span>
</a>

<a>
<span id="right" style="cursor:pointer" onclick="right();">>></span>
</a>

</div>

<script>
function _$(id){
return typeof id === "string" ? document.getElementById(id) : id;
}

var arrList = new Array();
var index ;
var arrLength ;
var nodenum = 3;//选项卡显示个数，需和上面同步
var movenum = 1;//每次移动个数

function initTab()
{
index = 0;
left_index = index;

arrList[0]= [0,'目标绩效','http://目标绩效'];

arrList[1]= [1,'时间效益','http://时间效益'];

arrList[2]= [2,'部门绩效排名','http://部门绩效排名'];

arrList[3]= [3,'个人绩效排名','http://个人绩效排名'];

arrList[4]= [4,'部门效益排名','http://部门效益排名'];

arrList[5]= [5,'个人效益排名','http://个人效益排名'];

arrLength= arrList.length;

if(arrLength>=nodenum){
initNode(nodenum,0);
_$("right").style.display="block";
}else {
initNode(arrLength,0);
_$("right").style.display="none";
}

}

function initNode(l,index){
for(var i=0;i<l;i++){
_$((i+1)+"").innerHTML = arrList[i+index][1];
_$((i+1)+"").parentNode.href=arrList[i+index][2];
}
}

function right()
{
index = index + movenum;
if(index>=(arrLength-(nodenum-1))){
index = 0;
}

initNode(nodenum,index);
}
initTab();
</script>

下面是在实际中的应用：

<%@ page contentType="text/html;charset=GBK"%>
<%@ include file="/../pub/pub.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="<%=request.getContextPath() %>/css/xinzeng/cbzz.css" rel="stylesheet" type="text/css" />

<title></title>
<style type="text/css">
a{text-decoration: NONE;cursor: pointer;}
.aaa{background-color:red}
</style>
</head>
<body>

<%
String spagecode = request.getParameter("SPAGECODE");
String params = Pub.getParamsNoSPageCode(request);
TableEx ex = null;
String surl[] = null;
String path = request.getContextPath()+"/";
StringBuffer dataset = new StringBuffer();
try{
ex = new TableEx("*","T_SYS_PAGEMSG","SPAGECODE='"+spagecode+"'");
String url = ex.getRecord(0).getFieldByName("SFIELDCODE").value.toString();
String pagename[] = (ex.getRecord(0).getFieldByName("SFIELDNAME").value.toString()).split("\\|");
String spageurl;
if(ex.getRecord(0).getFieldByName("SPAGETYPE").value.equals("88")){
surl = url.split("\\|");
for(int j = 0 ;j < surl.length;j++){
spageurl = surl[j].substring(surl[j].lastIndexOf("URL:")+4,surl[j].length());
spageurl = path+spageurl+params;
dataset.append(j).append(",'").append(pagename[j]).append("','").append(spageurl).append("'|");
}
}
}catch(Exception e){
e.printStackTrace();
}finally{
ex.close();
}
%>

<table id="frametb" ellpadding="0" width="100%" height="35" cellspacing="0" class="tb_bf1">

<tr>
<td id="td1"  width="169" align="center" valign="middle" class="tb_bei1" onMouseOver="monseover(this,'tb_bei');" onMouseOut="monseover(this,'tb_bei');">
<a  onClick="changColor(this)" href="" target="confoot"><span id="1"></span></a>
</td>

<td id="td2" width="169" align="center" valign="middle" class="tb_bei" onMouseOver="monseover(this,'tb_bei');" onMouseOut="monseover(this,'tb_bei');">
<a  onClick="changColor(this)" href="" target="confoot"><span id="2"></span></a>
</td>

<td id="td3" width="169" align="center" valign="middle" class="tb_bei" onMouseOver="monseover(this,'tb_bei');" onMouseOut="monseover(this,'tb_bei');">
<a  onClick="changColor(this)" href="" target="confoot"><span id="3"></span></a>
</td>

<td  onclick="right();" id="right" style="display: none;cursor: pointer;" width="22" class="tb_bei" align="center">更多</td>
<td id="tb_bei" width="100%" class="tb_bei" align="center"> </td>
</tr>
</table>

<script type="text/javascript">
var flag=1;
function changColor(obj){
flag = obj.parentNode;
obj.parentNode.className="tb_bei1";
var lis=$("frametb").getElementsByTagName("td");
for(var i = 0 ;i < lis.length;i++){
if(lis[i].id!=obj.parentNode.id&&lis[i].id!="b"){
lis[i].className="tb_bei"
}
}
}

function monseover(obj1,obj2){
if(flag=="1"){
if(obj1.id!=flag){
obj1.className=obj2;
}
}else{
if(obj1!=flag){
obj1.className=obj2;
}
}
}

var dataset = new Array();//数据节点，是一个二维数组
var dataLength ;//数据长度
var index ;//当前索引
var nodenum = 3;//选项卡显示个数，需和上面同步
var movenum = 1;//每次移动个数

//初始化选项卡
function initTab()
{
index = 0;
dataset = "<%=dataset%>";

eval("dataset=[["+dataset.replace(/\|/gi,'],[')+"]]");
dataLength= dataset.length-1;
if(dataLength>nodenum){//如何未达到指定数量，则不显示更多按钮
initNode(nodenum,0);
$("right").style.display="block";
}else {
initNode(dataLength,0);
$("right").style.display="none";
}

}

//初始化节点
function initNode(l,index){
for(var i=0;i<l;i++){
$((i+1)+"").innerHTML = dataset[i+index][1];//节点文字
$((i+1)+"").parentNode.href=dataset[i+index][2];//节点链接
}
}

var timme ;//设定一个延迟时间
function right()
{	var tds = document.getElementsByTagName("td");
for(var i = 0 ;i < tds.length;i++){
tds[i].className="aaa";
}
timme = setTimeout("doright()",100);
}

function doright()
{
index = index + movenum;
if(index>=(dataLength-(nodenum-1))){
index = 0;
}
var tds = document.getElementsByTagName("td");
for(var i = 0 ;i < tds.length;i++){
tds[i].className="tb_bei";
}
initNode(nodenum,index);
clearTimeout(timme);
}
initTab();
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航