网页中的翻页功能尝试

前几周，舍友给了我一个小小的制作网页中的小一部分，就是一个具有翻页功能表格。就像第一行就是导航，当点击其中一个键的时候，下面的内容也会改变。

思路分析：注意四个地方，一：点击按键的时候，背景颜色会发生变化；二：那个小圆球的颜色也会发生变化；三：下面那个面板也会发生变化（以tab1,tab2,tab3,tab4来区别）；四：点击的按键会出现跟下面面板颜色一样的边框，但有不是四个边框都出现，而是出现其中一部分。所以，当发生点击事件的时候，要同时控制三个方面的改变，分别用三个函数来控制即可。首先用CSS把大概的模型做出来。然后再用JAVASCRIPT控制点击事件的发生。

下面先看HTML代码：<body>
<div class="path">
<div class="path1">
<ul class="tabtitle"> //列表表示上面的导航
<li class="tab"><a href="#" class="tablink" id="link1"><img src="pointIcon.png" id="tab1img" alt="tab1"/>tab1</a>
<li class="tab"><a href="#" class="tablink" id="link2"><img src="pointIcon.png" id="tab2img" alt="tab2"/>tab2</a>
<li class="tab"><a href="#" class="tablink" id="link3"><img src="pointIcon.png" id="tab3img" alt="tab3"/>tab3</a>
<li class="tab"><a href="#" class="tablink" id="link4"><img src="pointIcon.png" id="tab4img" alt="tab4"/>tab4</a>
</ul>
</div>
<div class="tabtable" id="link1_1"> //下面的面板
<p>tab1</p>
</div>
<div class="tabtable" id="link2_1">
<p>tab2</p>
</div>
<div class="tabtable" id="link3_1">
<p>tab3</p>
</div>
<div class="tabtable" id="link4_1">
<p>tab4</p>
</div>
</div>
</body>

再看CSS代码：<style type="text/css">
.path{ margin:0 auto;         //当宽度确定之后，这样的设置就是窗口置在中间的了
       width:700px;
       position:relative;         //相对定位，为子元素的绝对定位服务
    }
#link1_1{position:absolute;
          top:24px;
    left:0px;                                    //以相对定位的PASH类为母版，相对于母版向左偏移多少像素
    width:595px;
    height:244px;
    background-color:#d8d8b4;
    z-index:0;                              //Z-INDEX属性，数字大就放在上面，小的就放在下面，有覆盖的可能。
    }
#link2_1{position:absolute;
          top:24px;
    left:0px;
    width:595px;
    height:244px;
    background-color:#d8d8b4;
    z-index:-1;}
#link3_1{position:absolute;
          top:24px;
    left:0px;
    width:595px;
    height:244px;
    background-color:#d8d8b4;
    z-index:-2;}
#link4_1{position:absolute;
          top:24px;
    left:0px;
    width:595px;
    height:244px;
    background-color:#d8d8b4;
    z-index:-3;}
.tab{display:inline;
     }
.tablink{ text-decoration:none;
          padding:3px 51px;
    background-color:#3879d9;
    color:white;
}
#link1{position:absolute;
       left:0px;}
#link2{position:absolute;
        left:148px;}
#link3{position:absolute;
        left:296px;}
#link4{position:absolute;
        left:444px;}
.tablink img{border-style:none;
             margin:0px 3px 0px 0px;}
</style>

注意：上面那个解析代码的，要运行的时候要删去。

再看看js的代码：

function initAll(){ for(var i=0;i<document.links.length;i++){ //快速扫描画布内所以带有标签<a>的对象

var linkobj=document.links[i];

setupRollover(linkobj); } }

function setupRollover(thislink){ thislink.onclick=rollclick; //点击“点击”的事件 }

function rollclick(){ var clickImage=this.firstChild; //第一个子结点是图像

clickImage.outImage=new Image; //给图像对象添加一个图像属性，该属性是图像，也是图像对象

clickImage.outImage.src="chosenPointIcon.png"; // 把图像先缓冲到内存中

clickImage.src=clickImage.outImage.src; changBack(this); // 改变图标函数

changetab(this); //改变tab内容函数

changebackgroundcolor(this); //改变背景颜色函数

changborder(this); //改变边框函数 }

function changborder(thislink){ var borderArray=document.getElementsByTagName('A'); //把带有标签<a>的元素放在数组中

var cuu=thislink.id;

for(var i=0;i<borderArray.length;i++){

if(borderArray[i].className=="tablink"&&borderArray[i].id!=thislink.id){ //判断没有被点击的情况下，边框怎么表现

borderArray[i].style.borderStyle="none none none none"; //class ,id，在这里起到了作用 } }

if(cuu=="link1"){ //被点击的对象（最左边）的边框是什么表现

thislink.style.borderStyle=" solid none none solid";

thislink.style.borderWidth="1px";

thislink.style.borderColor="#d8d8b4"; }

else if(cuu=="link4"){ //最右边的 thislink.style.borderStyle=" solid solid none none";

thislink.style.borderWidth="1px";

thislink.style.borderColor="#d8d8b4"; }

else{ //中间的 thislink.style.borderStyle=" solid none none none";

thislink.style.borderWidth="1px"; thislink.style.borderColor="#d8d8b4"; } }

function changebackgroundcolor(thislink){ //改变背景颜色

var backgroundcolorArray=document.getElementsByTagName('A'); //跟上面的方面几乎一样！！

var duu=thislink.id;

for(var i=0;i<backgroundcolorArray.length;i++){

if(backgroundcolorArray[i].className==thislink.className&&backgroundcolorArray[i].id!=thislink.id)

{backgroundcolorArray[i].style.backgroundColor="#3879d9";

backgroundcolorArray[i].style.color="white"; }

else

{backgroundcolorArray[i].style.backgroundColor="#eeffdd";

backgroundcolorArray[i].style.color="#3879d9";} } }

function changBack(thislink){

var tee=thislink.id;

var linkArray=document.getElementsByTagName('A');

for(var i=0;i<linkArray.length;i++){

if(linkArray[i].className==thislink.className&&linkArray[i].id!=thislink.id){

rollout(linkArray[i]); } } }

function rollout(thislink){

var overImage=thislink.firstChild;

overImage.src="PointIcon.png"; }

function changetab(thislink){

var twolink=thislink.id+'_1';

var divArray=document.getElementsByTagName('div');

for(var i=0;i<divArray.length;i++){

if(divArray[i].className=='tabtable'&&divArray[i].id!=twolink){

overroll(divArray[i]); }

document.getElementById(twolink).style.zIndex="0"; } }

function overroll(thisdiv){ thisdiv.style.zIndex="-1"; }

initAll();

</script>

小结：第一次用JS，还不知道怎么去优化，只是把自己想到的办法，设法去完成它就算了，这种也是很简单想得到的，但又有点罗嗦的感觉。其中核心就是修改元素的STYLE属性，让跟其他的不同。同样在这个基础上，也可以添加很多的功能，例如:加上个onmouse，mouseout事件，面板上面也可以添加很多东西。ID跟CLASS利用得合理的话，也会有起到很大的作用。例如：ID，CLASS的名字，是修改STYLE属性的路径之一。当扫描画布中的带有标签<a>的元素是，同样也可以扫描带有<img>标签的元素，找出a元素，貌似是一样的，但显示的结果是不同的。用第一中方法的时候，你只要点击那个按键，颜色就会发生变化，用第二种方法的时候，要点击到那个小圆球颜色才发生变化。

今天又弄了一下，加了一点东西进去：

posted on 2012-05-05 13:25 阿浅阅读(344) 评论(0) 收藏举报

刷新页面返回顶部