javascript实现卡片式效果

2008年05月05日星期一 14:52

main.htm
------------------------- <iframe id="box" width="100%" height="100%" frameborder="0" name="box" src="index.aspx" οnlοad="javascript:linkbox.addlink(box.document.title,box.document.location);"></iframe><iframe id="linkbox" width="100%" height="16" frameborder="no" name="linkbox" src="link.htm"></iframe>-----------------------
link.htm
-----------------------
<html>
<head><title>LinkTabs Page</title><style type="text/css">.currHome{
padding-left: 15px;
padding-top: 2px;
padding-bottom: 2px;
background-image: url('../images/tab_curr_home.gif');
background-repeat: no-repeat;
background-position: left;
font-size: 9pt;
color: #3A4663;
text-decoration: none;
font-family: 宋体, Arial, Helvetica, sans-serif;
}.currLink{padding-left: 15px;padding-top: 2px;padding-bottom: 2px;background-image: url('../images/tab_curr.gif');background-repeat: no-repeat;background-position: left;font-size: 9pt;color: #3A4663;text-decoration: none;font-family: 宋体, Arial, Helvetica, sans-serif;
}
.currNext{
padding-left: 15px;
padding-top: 2px;
padding-bottom: 2px;
background-image: url('../images/tab_currNext.gif');
background-repeat: no-repeat;
background-position: left;
font-size: 9pt;
color: #3A4663;
text-decoration: none;
font-family: 宋体, Arial, Helvetica, sans-serif;
}
.normHome{
padding-left: 15px;
padding-top: 2px;
padding-bottom: 2px;
background-image: url('../images/tab_norm_home.gif');
background-repeat: no-repeat;
background-position: left;
font-size: 9pt;
color: #3A4663;
text-decoration: none;
font-family: 宋体, Arial, Helvetica, sans-serif;
}
.normLink{
padding-left: 15px;
padding-top: 2px;
padding-bottom: 2px;
background-image: url('../images/tab_norm.gif');
background-repeat: no-repeat;
background-position: left;
font-size: 9pt;
color: #3A4663;
text-decoration: none;
font-family: 宋体, Arial, Helvetica, sans-serif;
}.currEnd{padding-left:15px;padding-top:2px;padding-bottom:2px;background-image:url('../images/tab_curr_end.GIF');background-repeat:no-repeat;background-position:left;font-size: 9pt; color: #9CB6DB; text-decoration: none;font-family: 宋体, Arial, Helvetica, sans-serif;
}.normEnd{
padding-left: 15px;
padding-top: 2px;
padding-bottom: 2px;
background-image: url('../images/tab_norm_end.GIF');
background-repeat: no-repeat;
background-position: left;
font-size: 9pt;
color: #9CB6DB;
text-decoration: none;
font-family: 宋体, Arial, Helvetica, sans-serif;
} </style><script language="javascript" type="text/javascript">var tab_array = new Array();//链接数组var tab="";var currIndex=-1;//当前项var startIndex=0;//开始显示项function addlink(title,link){if (title.indexOf(" - ")>-1)title=title.split(" - ")[1];currIndex=-1;for(i=0;i<tab_array.length;i++){if (tab_array[i]==title+","+link)currIndex=i;}if (currIndex==-1)//经上面检查没有在数组中为新链接.{//如果不等于主页的地址if (link!=document.location.toString().substring(0,document.location.toString().length-8)+"index.aspx"){if (tab_array.length>30){tab_array=tab_array.reverse();tab_array.pop();tab_array=tab_array.reverse();     }//添加新链接tab_array.push(title+","+link);currIndex=tab_array.length-1;//重置开始显示项startIndexresetStartIndex(currIndex);}}buildTab();}//重置开始显示项startIndex（当前项currIndex在未尾）function resetStartIndex(currIndex){//卡片区的宽var cardw=document.body.clientWidth-(17+16+16+16)-(15+24)-20;//显示的卡片的宽var tabsw=0;//从后往前算for(i=currIndex;i>-1;i--){ title=tab_array[i].split(",")[0];link=tab_array[i].split(",")[1];if (tabsw+title.length*12<cardw){startIndex=i;tabsw+=(title.length*12)+15;//15这卡片样式中padding-Left}elsei=-1;//跳出}}
function buildTab()
{var title="主页";var link="index.aspx";card.innerHTML="";if (currIndex==-1)card.innerHTML+="<a href='"+link+"' target='box' class='currHome'>"+title+"</a>";elsecard.innerHTML+="<a href='"+link+"' target='box' class='normHome'>"+title+"</a>";//卡片区宽var cardw=document.body.clientWidth-(17+16+16+16)-(15+24)-20;//可显示的卡片宽var tabsw=0;//显示的卡片数var tabNum=0;//从要显示的项开始算for(i=startIndex;i<tab_array.length;i++){ title=tab_array[i].split(",")[0];link=tab_array[i].split(",")[1];if (tabsw+title.length*12+15<cardw){if (currIndex==tabNum+startIndex)card.innerHTML+="<a href='"+link+"' target='box' class='currLink'>"+title+"</a>";else if ((currIndex+1==tabNum+startIndex)||((currIndex==-1) && (tabNum==0)) )   card.innerHTML+="<a href='"+link+"' target='box' class='currNext'>"+title+"</a>";elsecard.innerHTML+="<a href='"+link+"' target='box' class='normLink'>"+title+"</a>"; tabsw+=title.length*12+15;//15为卡片样式中的padding-LefttabNum+=1;}elsei=tab_array.length;//跳出}if (currIndex==startIndex+tabNum-1)card.innerHTML+="<span class='currEnd' >&nbsp;</span>";elsecard.innerHTML+="<span class='normEnd' >&nbsp;</span>";
}
function firstArrowOnclick()
{startIndex=0;buildTab();
}
function forwardArrowOnclick()
{if (startIndex>0){startIndex-=1;buildTab();}
}
function nextArrowOnclick()
{if (startIndex<tab_array.length-1){startIndex+=1;buildTab();}
}
function endArrowOnclick()
{if (tab_array.length>0){startIndex=tab_array.length-1;buildTab();}
}</script></head>
<body scroll="no" style="margin:0px;" bgcolor="#9CB6DB"><table style="width: 100%" cellspacing="0" cellpadding="0"><tr><td width="33">   <img οnclick="firstArrowOnclick();" alt="第一个" src="../images/firstArrow.gif" width="17" height="15" style="cursor:hand" /><img οnclick="forwardArrowOnclick();" alt="前一个" src="../images/forwardArrow.gif" width="16" height="15" style="cursor:hand;" /></td><td><div id="card" style=" background-color: #9CB6DB; "></div></td><td width="32">   <img οnclick="nextArrowOnclick();" alt="下一个" src="../images/nextArrow.gif" width="16" height="15" style="cursor:hand;" /><img οnclick="endArrowOnclick();" alt="最后一个" src="../images/endArrow.gif" width="16" height="15" style="cursor:hand" /></td></tr>
</table>&nbsp;</body>
</html>

javascript实现卡片式效果相关推荐

小程序页面卡片式效果
效果图 wxml <view class="backgroud-float"><view class="flex-row"><vi ...
javascript php 界面,js实现卡片式项目管理界面UI设计效果_javascript技巧
这是一款非常有创意的卡片式项目管理界面UI设计效果.该UI设计中,将各个项目以卡片的方式堆叠排列在屏幕上,当点击了其中的某个项目的时候,该项目图片会全屏放大,向下滚动鼠标可以看到该项目的介绍信息. 该 ...
android 折叠式布局,Android卡片式折叠交互效果
原标题:Android卡片式折叠交互效果近日有报道称:在互联网共享单车最早起步的上海,目前有150万辆共享单车.迅猛的增速之下,上海市交通委紧急叫停,成为继杭州.广州等城市之后,国内又一个暂停新增投 ...
Android横向滚动卡片,Android仿探探卡片式滑动效果实现
前言第一次进入探探软件界面,就被这种通过卡片式滑动来选择"喜欢/不喜欢"的设计所吸引了.当时就非常想通过自己来实现这种仿探探式的效果,然而却没什么思路.不过毋庸置疑的是,这种效果 ...
Android横向滚动卡片,RecyclerView+CardView实现横向卡片式滑动效果
现在来介绍两种控件recyclerview和cardview,并通过实例将它们结合在一起实现一种横向卡片式滑动效果. 1.recyclerview recyvlerview是android sdk 新 ...
卡片式轮播图效果实现
基于 react 实现,vue 类似效果图思路效果图中绿色边框为轮播图区域水平式多张图片水平排列整体宽度为单张图片n倍 translateX 位移方式一次整体移动一张图片宽度 ...
Android仿探探卡片式滑动效果实现
第一次进入探探软件界面,就被这种通过卡片式滑动来选择"喜欢/不喜欢"的设计所吸引了.当时就非常想通过自己来实现这种仿探探式的效果,然而却没什么思路.不过毋庸置疑的是,这种效果的原理 ...
模仿最新版爱奇艺卡片式轮播效果CardBannerDemo
本文介绍了一款模仿最新版爱奇艺卡片式轮播lib github地址:https://github.com/xuezj/CardBannerDemo CardBannerDemo 效果图 Attribut ...
android卡片风格,[Android] Android 卡片式控件CardView的优雅使用
[Android] Android 卡片式控件CardView的优雅使用 CardView是在安卓5.0提出的卡片式控件其具体用法如下: 1.在app/build.gradle 文件中添加 comp ...

javascript实现卡片式效果

javascript实现卡片式效果相关推荐

最新文章

热门文章