js基础

js笔记散记，只是为了方便自己以后可以回看用的：

1、所有用 “点” 的都能 “[]” 代替

odiv.style.color
odiv['style'].color
odiv['style'][color]
document['getElementById'].('div1')

2、style和className的区别

oDIv.style：行间样式  
 className：是<style></style>里的  非行简样式  
 style.color='red'优先级  高于   className  
 alert(oDiv.style.backgroundColor)//只能取到行间样式，非行间的取不  
  到   这种复合样式的取法  记得用驼峰法  
 alert(oDiv.style.color)

4、循环：没啥子好说的

while：  
var i =0;  
while(i<3){ }  
for(){}

5、选项卡：原理=》让所有的隐藏，再让当前的显示

document.getElementsByTagName('div');//得到是个数组
this：当前发生事件的元素
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;//给所有的元素加个ndex属性 通过js加的index 浏览器兼容的， 本身在标签上加index，个别浏览器不认
aBtn[i].onClick=function(){
for(var i=0;i<aBtn.length;i++){//让所有元素的样式都变没
aBtn[i].className=''
}
this.className='active'
aDiv[this.index].style.display='block//给对应下面的div进行显示
}
}

6、简易的日历：用ul里包li 里面放对应数字的图片（0-9）

innerHTML  //能识别HTML代码

alert('sdsd'+(5+7)+'ddd')//sdsd12ddd   ==>加个（）就能让两个数字相加了

var aLi= document.getElementsByTagName('li')
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var i=0;i<aLi.length;i++){
aLi[i].className='';
}
this.className='active';
oTxt.innerHTML='

'+(this.index+1)+'

'
}
}

7、变量的转换，作用域和闭包， json

（1）javascript的组成： ECMAscript 翻译 核心 解释器 几乎没有兼容
DOM HTML document 操作HTML的入口 有一些不兼容
BOM 浏览器对象模型 window 完全不兼容

（2）变量类型：
typeof a //number/string/boolean/function/object/undiefiend(没定义，定义了没给值)
parseInt()//从左像右去识别，发现不是数字就跳出去，简而言之，就是可以把字符串里的数字提出来
12px32==>12
3.5 ===》 3
abc ===>NaN 非数字
NaN和NaN 并不相等
isNaN()//判断一个数是否是NAN
parseFloat ==》转小数
显示类型转换（强制类型转换）：parseInt parseFloat
隐士类型转换： == + - === * /
var a=5， var b='5';
alert(a==b) //true 先转换类型 ，然后比较
alert(a===b)//false 不转换类型、直接比较
var a ='12';var b='5';
alert(a+b);//125 //+: 【1】字符串连接 【2】 数字相加
alert(a-b);//7 //数字相减

（3）变量的作用域
局部变量、全局变量
闭包：子函数可以使用父函数中的局部变量
（4）命名规范
可读性、规范性、类型前缀、首字母大写
a:Array
i:Interger
o:object
例如：oDiv，aLi,
(5)运算符
+ - * / %
%:求莫=》求余数
秒表时间：parseInt(s/60)+'分'
i=i+1
i++
i+=1
+= ，-=， *= ，/=， %=

（5）break，continu
break ：打破 中断 整个循环走到break的时候就跳出来 中断整个循环
continu ：继续 中断本次循环
（6）真、假
真：true 、非零数字、非空字符串、非空对象
假：false、数字零、空字符串、null、undefined
（7）json：
1） json.a， json.b++
2） json和数组区别：
var json ={a:12,b:5,c:7};
var arr = [12,5,7]
json.a //12
arr[0] // 12
json['a']
【1】 json下标是字符串 数组的下标是数字
【2】json.length //undifiend 没length
循环数组：for(var i;i<length;i++) / for (var i in array)
循环json： for（var i in json） //json里的

8、函数的返回值，不定参数，

1)、函数返回值：把值传到外面     return ''  undiefined

2)、函数传参：arguments  可变参数、不定参数*****

（1）求和：

function sum{
alert(arguments.length])//5
var result =0;
for(var i=0;i<arguments.length;i++){
result +=arguments[i]
}
return result;
}
alert(sum(1,2,3,4,5))

（2）：css函数

css(oDiv,'width')   获取样式

css(oDiv,'width','200px')   设置样式

根据参数的个数不同  ，变成不同的函数

function css(){  
   if(arguments.length == 2){//获取  
       return arguments\[0\].style\[arguments\[1\]\];  
   }else{//设置  
      return arguments\[0\].style\[arguments\[1\]\]=arguments\[2\];  
   }  

}

9、获取非行间样式:currentStyle,getComputedStyle

function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name] //在IE下
}else{
return getComputedStyle(obj,false)[name];//在火狐和chrom下
}
}

复合样式  background  bordercolor

单一样式  color

上面的方法取复合样式的时候：getStyle（obj,backgroundColor ）

10、数组

数组：数组的length既可以获取又可以赋值　　　　

    arr.length  
    arr.length=3  //就变成了3  
    push：向末尾  
    pop：在尾部删除  
    shift：头部删除  
    unshirft：从头部添加  
    splice（起点的位置，长度，插入的元素。。。。）  
   splice(x,y,z)//从x位置，删除y长度的元素，然后在x的位置插入z些元素  
    concat：数组的连接 a.concat(b)  
    join('-')  //拼接字符串，用-   a-b-c-d-e-f  
    sort()  数组的排序  
    var arr =\['sds','sds','rtrt','tytytu','uyuiuy','ddfd'\]  
    arr.sort();//按照字母的顺序排序的,sort   //11 112  
    arr.sort(function(n1,n2){  
          return n1-n2;  
    });

11、setInterval   的用法

setInterval(function(){ alert('a') },1000)  clearInterval()

（1）数码时钟：  //获取年月日

var oDate = new Date();

oDate.getFullYear()

oDate.getMonth()+1;

oDate.getDate();

oDate.getDay();//获取到是星期几  0：是周日

function toDou(n){//补0
if(n<10){
return '0'+n;
}else{
return '' + n;
}
}

var oDate = new Date();
window.onload=function(){
var aImg = docuemnet.getElementsByTagName('img');
function tick(){
var oDate=new Date();
var str = toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
for(var i=0;i<aImg.length;i++){
// aImg[i].src='img/'+str[i]+'.png';//str[i]浏览器不兼容
aImg[i].src='img/'+str.charAt(i)+'.png';
}
}
setInterval(tick, 1000)
tick();
} 

（2）延时提示框:从始至终都是让div2显示隐藏

window.onload=function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var timer = null;
oDiv2.onmouseover=oDiv1.onmouseover=function(){
clearTimeout(timer);
oDiv2.style.display='block'
};
oDiv2.onmouseout=oDiv1.onmouseout=function(){
timer=setTimeout(function(){
oDiv2.style.display='none';
},500)
}
}

（3）、无缝滚动

position：absolute

offsetLeft

oDiv.left=oDiv.offsetLeft+10+px;

div1=>position:relative

ul=>position:absolute

var oDiv = document.getElementById('div1');//最外层div
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//再放一遍重复的li
oUL.style.width=aLi[0].offsetWidth*aLi.length+'px';
function move(){
var speed=2;
//向左滚动
if(-oUl.offsetLeft>oUl.offsetWidth/2){//距离索面的距离 大于 一半的宽度
oUl.style.left='0'
}
//像右滚动
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetLeft/2+'px';
}
var timer = setInterval(move,30);
oDiv.onmouseover=function(){
clearInterval(timer);
}
oDiv.onmouseout=function(){
setInterval(move,30)
};

document.getElementsByTagName('a')[0].onclick=function(){
speed=-2;
}

document.getElementsByTagName('a')[0].onclick=function(){
speed=2;
}

}

12、dom

（1）dom基础：

支持：   IE 10%

chrom 60%

FF 99%

（2）

文本节点：ui和li空白的地方之间                    
•  
元素节点              

（3）获取子节点：childNodes   children   只算第一层的(也就是只算ul下面的li  不酸li下面的span)

oUl.childNodes.length //IE6-8 是好的    children:没有兼容问题
            nodeType 节点类型 1：元素节点 3：文本节点

循环所有的子节点：

for(var i=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.bakcgground='red'
}
}

for(var i=0;i<oUl.children.length;i++){//没有兼容问题
}

（4）：父节点

parentNode:获取包裹他的父节点
例子：点击链接，隐藏整个li
offsetParent:获取它相对定位 的父节点，如果没有，默认是body
例子：获取元素在页面上的实际位置

（5）：

首尾子节点：
有兼容问题：
firstChild //IE6-8、firstElementChild //高级浏览器
lastChild、lastElementChild
兄弟节点：
有兼容问题：
nextSibling、nextElementSibling
previousSibling、previousElementSibling

（6）操纵元素属性

元素属性操作
1）oDiv.style.display='block'
2) oDiv.style['display']='block'
3) Dom 方式
获取：getAtrribute(名称)
设置：setAtrribute(名称，值)
删除：removeAttribute（名称）

** 但凡能用到“点”或setAttribute/getAttribute 都能用方括号[]代替

（7）DOM元素灵活查找

用className选择器
如何用className选择元素
选出所有元素
通过className条件筛选
封装成函数

function getByCLass(oParent,sClass){
var aResult=[];
var childs=oParent.getElementsByTagName(*);
for(var i=0;i<childs.length;i++){
if(chils[i].className==sClass){
aRsult.push(childs[i]);
}
}
return aResult;
}

(8)创建、插入、和删除元素

创建DOM元素
createElement(标签名) 创建一个节点
appendChild（节点） 追加一个节点
插入元素
insertBefore（节点，原有节点） 在已有元素前插入
例子：倒序插入li

父级.appendChild(子节点)
父级.insertBefore(子节点，在谁之前)
删除DOM
removeChild(节点)
例子：删除li

var oLi=document.createElement('li');
var aLi=oUl.getElementsByTagName('li');
oLi.innerHTML=oTxt.value;
if(aLi.length>0){//当aLi里没有元素的时候，插入aLi[0]会报错
oUl.insetBefore(oLi,aLi[0])
}else{
oUl.appendChild(oLi)
}

//删除元素
window.onload=function(){
var aA=document.getElementsByTagName('a');
var oUl = document.getElementById('ul1');

for(var i=0;i<aA.length;i++){
aA[i].onclick=function(){
oUl.removeChild(this.parentNode);
}
}
}

(9)文档碎片

文档碎片可以提高DOM操作的性能（理论上）

document.createDocumentFragment()

//只有在低级的浏览器上可以提高性能，在高级的浏览器上不但不能提高性能，有的时候反而会降低

window.onload=function(){
var oUL=document.getElementById('ul1');
var oFrag=document.createDocumentFragment()

for(var i=0;i<10000;i++){  
    var oLi=document.createElement('li');  
   oFrag.appendChild(oLi);//先放到文档碎片里  
}  

oUl.appendChild(oFrag)//再把文档碎片放到目标元素里
}

13、DOM操作的高级应用

表格：搜索，排序、

table的属性：// tBodies,tHead,tFoot,rows,cells

表单：校验  正则

（1）表格：

  <thead>  
    <td>id</td>  
    <td>姓名</td>  
    <td>年龄</td>  
  </thead>  
  <tbody>  
    <tr>  
      <td>id</td>  
      <td>姓名</td>  
      <td>年龄</td>  
    </tr>  
    <tr>  
      <td>id</td>  
      <td>姓名</td>  
      <td>年龄</td>  
    </tr>  
    <tr>  
      <td>id</td>  
      <td>姓名</td>  
      <td>年龄</td>  
    </tr>  

(1)隔行变色，鼠标移上去加高亮

window.onload=function(){  
  var oTab=document.getElementById('tab1');  
  var oldColor='';  
  for(var i=0;i<oTab.tBodies\[0\].rows.length){//这里要加上tBodies\[0\],如果不加的话会把表头也算上}  
      //隔行变色  
       if(i%2==0){  
         oTab.tBodies\[0\].rows\[i\].background='#e3e3e3'  
       }  
       //选中显示高亮  
       oTab.tBodies\[0\].rows\[i\].onmouseover=function(){  
         oldColor=this.style.background;  
         this.style.background='red'  
       }  
       oTab.tBodies\[0\].rows\[i\].onmouseout=function(){  
         this.style.background=oldColor;  
       }  
  }

（2）表格的添加和删除

window.onload=function(){
var oName=document.getElementById('name');
var oAge=document.getElementById('age');
var oBtn=document.getElementById('add');
var oTab=document.getElementById('tab');
var id=oTab.tBodies[0].rows.length+1;//在最开始的时候把值取出来 这样id就不会重复添加
oBtn.onClick=function(){
//添加
var oTr=document.createElement('tr');
var oTd=document.createElement('td');
oTd.innerHTML=id++;//防止id数值重复
oTr.appendChild(oTd);

        var oTd=document.createElement('td');  
        oTd.innerHTML=oName.value;  
        oTr.apendChild(oTd) ;

        var oTd=document.createElement('td');  
        oTd.innerHTML=oName.age;  
        oTr.apendChild(oTd) ;

        var oTd=document.createElement('td');  
        oTd.innerHTML='<a href="javascript:;">删除</a>';  
        oTr.apendChild(oTd) ;

        oTd.getElementsByTagName('a')\[0\].onclick=function(){  
          oTab.tBodies\[0\].removeChild(this.parentNode.parentNode)//这里一定要注意是从tbodies里删除  
        };  
        oTab.tBodies\[0\].appendChild(oTr)  
     }

  }

（3）表格的搜索：//搜索：区分大小写 toLowerCase，模糊搜做 search()，多关键词搜索split()

高亮显示 筛选
//str.search('g'); //找到并返回字符串出现的位置，如果没找到返回-1
//split 用什么拆分 并返回数组
var oBtn=document.getElementById('btn')
var oSearch=document.getElementById('search');
var oTab=document.getElementById('oTab');
oBtn.onClick=function(){
var sTxt=oSearch.value.toLowerCase();
for(var i=0;i<oTab.tBodies[0].rows.length;i++){
var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var arr = sTxt.split(' ');
//高亮显示
for(var j=0;j<arr.length;j++){
if(sTab.search(arr[j])!=-1){
oTab.tBodies[0].rows[i].style.background='red'
}else{
oTab.tBodies[0].rows[i].style.background=''
}
}

    //筛选 :符合条件的显示  
    oTab.tBodies\[0\].rows\[i\].style.display=none

    for(var j=0;j<arr.length;j++){  
       if(sTab.search(arr\[j\])!=-1){  
         oTab.tBodies\[0\].rows\[i\].style.display='block'  
       }  
     }

   }  
 }

（4）表格的排序

//排序：转化 排序 插入
//表格排序 从小到大的排序
1）先把ul1里的li追加到ul2里
var oUl1=document.getElementById('ul1');
var oUl2=document.getElementById('ul2');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
var oLi=oUl1.children[0];//每次都取第一个li元素
//oUl1.removeChild(oLi);
oUl2.appendChild(oLi);//1、从原有的父级删掉 2、添加到新的父级上
}
2）对ul1本身进行删除追加
oBtn.onclick=function(){
var oLi=oUl1.children[0];
oUl1.appendChild(oLi);//把第一个元素删掉，追加到最后一位上
}

3）给一组乱序的进行排序
//排序 每次都找到最小的那个 给appendchild
//var aLi=document.getElementsByTagName('li');
//aLi.sort()会报错 ，sort是数组特有的方法，aLi其实不是个数组，是个元素的集合,所以像是dort和join类似的这种方法统统不能用
//所以要把aLi变成个数组
var aArr=[];
//把aLi里的元素赋值给数组
for(var i=0;i<aLi.length;i++){
aArr[i]=aLi[i];
}

//给aArr排序 从小 到大排好
aArr.sort(function(li1,li2){
var val1=parseInt(li1.innerHTML);
var val2=parseInt(li2.innerHTML)
return val1-val1;
})

//每次都取aArr里第一个追加到最后面
for(var j=0;j<aArr.length;j++){
oUl1.appendChild(aArr[j]);
}

//正式table排序
oBtn.onClick=function(){
var aArr=[];
//把每一行tr存到aArr数组里
for(var i=0;i<oTab.tBodies[0].rows.length;i++){
aArr[i]=oTab.tBodies[0].rows[i];
}
//对aArr数组排序
aArr.sort(function(tr1,tr2){//按照diyilie里的内容进行排序
var n1=parseInt(tr1.cell[0].innerHTML)
var n2=parseInt(tr2.cell[0].innerHTML)
return n1-n2;
});

//把aArr数组从上到下追加到table里  
for(var i=0;i<aArr.length;i++){  
  oTab.tBodies\[0\].appendChild(aArr\[i\])  
}  

}

15：运动

（1）基础运动：匀速运动

eg1：匀速运动

//div position：absolute
//运动基础 ：匀速运动
1）js运动基础
setInteval(function(){
oDiv.style.left=oDiv.style.offsetLeft+10+px;
},30)

2）到某一位置停下来
var timer=null;
var speed=10
clearInterval(timer)//把所有定时器关了，保证下面只开了一个定时器，要不然快速点击按钮会导致加速
timer=setInterval(function(){
if(oDiv.style.offsetLeft>=300){
clearInterval(timer)//到达重点以后要做的事情
}else{
//要放到else里 否则到了300的位置，点击还会走下去
oDiv.style.left=oDiv.style.offsetLeft+speed+px;//到达终点之前要做的事情
}

},30)

//总结：（1）首先关闭之前的定时器 （2）把下面的定时器（到终点），和运动分开（没到终点）

eg2：分享到侧边栏

（1）css代码

（2）html

（3）js
window.onload=function(){
//希望div1的 left从-150运动到0
var oDiv=document.getElementById('div1');
var oSpan=document.getElementsByTagName('span')[0]
oDiv.onmouseover=function(){
move(0);
}
oDiv.onmouseout=function(){
move(-150)
}
var timer=null;
function move(iTarget){
clearInterval(timer);
//先判断出速度
var speed=0;
if(oDiv.offsetLeft > iTarget){//距离左面的距离大于目标 那速度是负数
speed=-10;
}else{
speed=10;
}

    timer=setInterval(function(){  
      if(oDiv.offsetLeft==iTarget){  
        clearInterval(timer)  
      }else{  
        oDiv.style.left=oDiv.offsetLeft+speed+'px';//这里注意offsetLeft不带style  
      }  
    },30);  
  }

}

eg3.淡入淡出图片

css：
#div1{width:200px;height:200px;background:red;filter:alpha(opacity:30);opacity:0.3;}

js：
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(100)
}
oDiv.onmouseout=function(){
startMove(30)
}
}
function startMove(iTarget){
var oDiv=document.getElementById('div1');
var timer=null;
var speed=0;
var alpha=30;

  clearInterval(timer);  
  timer=setInterval(function(){  
    if(alpha>iTarget){  
      speed=-10;  
    }else{  
      speed=10;  
    }  
    if(alpha==iTarget){  
      clearInterval(timer)  
    }else{  
      alpha+=speed;  
      oDiv.style.filter='alpha(opacity:'+alpha+')';  
      oDiv.style.opacity=alpha/100;  
    }  
  },30);  
}

（2）缓冲运动：

css：
#div1{width:100px;height:100px;background:green;position:absolute;left:600px;}
#line{width:1px;height:200px;position: absolute;left:300px;border-left:1px solid red;}
button{margin-top:200px;}

html：

点击

//缓冲运动
//距离大，速度小
//距离小，速度大
//速度和距离成正比
//Math.cell(3.01) ==》4 Math.cell(-9.8)==>9//向上取整
//Math.floor(4.5); ==》4//向下取整
js：
window.onload=function(){
var oDiv=document.getElementById('div1');
var oBTn=document.getElementById('test');
var timer=null;
oBTn.onClick=move(300)
function move(iTarget){
clearInterval(timer);
var speed=(iTarget-oDiv.offsetLeft)/20;
speed>0? speed=Math.ceil(speed):speed=Math.floor(speed);
timer=setInterval(function(){
if(oDiv.offsetLeft==iTarget){
clearInterval(timer)
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30)
}

}

（3）右下角悬浮框

//解决抖
//缓冲菜单
//右侧悬浮框
#div1{right:0;width:100px;height:150px;background:red;position:absolte;bottom:0;}
window.onscroll=function(){
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
var oDiv=document.getElementById('div1');
//oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';

    //右下角悬浮框  
    startMove(document.documentElement.clientHieght-oDiv.offsetHeight+scrollTop)  
    //中间--春联悬浮框   页面的高度 - 元素的高度  ÷ 2  
    oDiv=(document.documentElement.clientHeight-oDiv.offsetHeight)+scrollTop+'px';  
    startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop_))//尽量让他变成个整数   防止他有些抖动_

_}

  var timer=null;  
  function startMove(iTarget){  
    clearInterval(timer);  
    var oDiv=document.getElementById('div1');  
    var speed=(iTarget-oDiv.offsetTop)/4;  
    speed=speed>0?Math.floor(speed):Math.ceil(speed);  
    if(oDiv.offsetTop==iTarget){  
      clearInterval(timer)  
    }else{  
      oDiv.style.top=oDiv.offsetTop+speed+'px';  
    }  
  }  

}_

(4)完美运动框架

function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
}

//startMove(oDiv, {width: 400, height: 400})

function startMove(obj, json, fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true; //假设：所有值都已经到了

    for(var attr in json)  
    {  
        var cur=0;  
        if(attr=='opacity')  
        {  
            cur=Math.round(parseFloat(getStyle(obj, attr))\*100);  
        }  
        else  
        {  
            cur=parseInt(getStyle(obj, attr));  
        }

        var speed=(json\[attr\]-cur)/6;  
        speed=speed>0?Math.ceil(speed):Math.floor(speed);

        if(cur!=json\[attr\])  
            bStop=false;

        if(attr=='opacity')  
        {  
            obj.style.filter='alpha(opacity:'+(cur+speed)+')';  
            obj.style.opacity=(cur+speed)/100;  
        }  
        else  
        {  
            obj.style\[attr\]=cur+speed+'px';  
        }  
    }

    if(bStop)  
    {  
        clearInterval(obj.timer);

        if(fnEnd)fnEnd();  
    }  
}, 30);  

}

（5）土豆右下角悬浮效果

*{margin:0;padding:0;font: 12px/1.25 tahoma,arial,宋体,sans-serif;}
li{list-style:none;}
a{text-decoration:none;}
body{width:100%;height:100%;background:#000;_position:relative;overflow:hidden;}
.page{position:fixed;_position:absolute;right:0;bottom:0;}
#zns_bottom{width:203px;height: 50px;background:url(minibar.png) no-repeat 0 0;position:absolute;right:-165px;bottom:0;z-index: 20001;}
#nav{height: 22px;margin: 5px 0 0 43px;width: 125px;}
#nav li{float: left;width: 25px;}
#nav li a{display: block;height: 22px;width: 25px;}
#nav li .show,#nav li a:hover{background: url(minibar.png) no-repeat 0 -51px;}
#nav .li_1 .show,#nav .li_1 a:hover{background-position:-25px -51px}
#nav .li_2 .show,#nav .li_2 a:hover{background-position:-50px -51px}
#nav .li_3 .show,#nav .li_3 a:hover{background-position:-75px -51px}
#nav .li_4 .show,#nav .li_4 a:hover{background-position:-100px -51px}
.zns{color: #FFFFFF;height: 16px;margin: 4px 0 0 8px;overflow: hidden;width: 160px;}
#but{ bottom: 0;display: block;height: 50px;position: absolute;right: 0;width: 33px;z-index:20002;}
.but_hide{background: url(minibar.png) no-repeat -170px 0;}
.but_hide:hover{background-position:-203px 0;}
.but_show{background: url(minibar.png) no-repeat -236px 0;}
.but_show:hover{background-position:-269px 0;}
#zns_box{bottom:-315px;display:none;height: 315px;padding: 0 0 48px;position: absolute;right: 1px;width: 200px; z-index: 20000;}
.bg{background: url(mini_jpgs.jpg) no-repeat 0 0;height: 315px;opacity: 0.9;position: absolute;right: 0;top: 0;width: 200px;}
.nav2_bg{bottom: 48px;height: 176px;left: 0;position: absolute;width: 34px;background: url(mini_jpgs.jpg) no-repeat 0 -139px;}
#list_nav{background: url(minibar.png) no-repeat scroll 0 -255px transparent;height: 139px;left: 0;position: absolute;top: 2px;width: 34px;}
#list_nav a{ color: #FFFFFF;display: block;height: 27px;line-height: 25px;text-align: center;text-decoration: none;}
#list_nav .show{color: #FF9900;}
#list_nav a:hover{color:#FFFF00;}
.clos{ background: url(minibar.png) no-repeat 0 -76px ;cursor: pointer;height: 9px;position: absolute;right: 10px;top: 14px;width: 9px;}
.box_right{color: #FFFFFF;
height: 285px;
overflow: hidden;
position: absolute;
right: 6px;
top: 28px;
width: 150px;}

oBtnShow.onclick=function ()  
{  
    startMove(oBottom, 'right', 0, function (){  
        oBox.style.display='block';  
        startMove(oBox, 'bottom', 0);  
    });  
};  
oBtnClose.onclick=function ()  
{  
    startMove(oBox, 'bottom', -315, function (){  
        oBox.style.display='none';

        startMove(oBottom, 'right', -165);  
    });  
};  

oBtn.onclick=function ()  
{  
    var oLi=document.createElement('li');

    oLi.innerHTML=oTxt.value;  
    oTxt.value='';

    if(oUl.children.length>0)  
    {  
        oUl.insertBefore(oLi, oUl.children\[0\]);  
    }  
    else  
    {  
        oUl.appendChild(oLi);  
    }

    //运动  
    var iHeight=oLi.offsetHeight;

    oLi.style.height='0';

    startMove(oLi, {height: iHeight}, function (){  
        startMove(oLi, {opacity: 100});  
    });  
    //alert(iHeight);  
};  

var now=0;

for(var i=0;i<aBtn.length;i++)  
{  
    aBtn\[i\].index=i;  
    aBtn\[i\].onclick=function ()  
    {  
        now=this.index;

        tab();  
    };  
}

function tab()  
{  
    for(var i=0;i<aBtn.length;i++)  
    {  
        aBtn\[i\].className='';  
    }  
    aBtn\[now\].className='active';  
    startMove(oUl, {top: -150\*now});  
}

function next()  
{  
    now++;  
    if(now==aBtn.length)  
    {  
        now=0;  
    }

    tab();  
}

var timer=setInterval(next, 2000);

oDiv.onmouseover=function ()  
{  
    clearInterval(timer);  
};

oDiv.onmouseout=function ()  
{  
    timer=setInterval(next, 2000);  
};  

for(var i=0;i<aEle.length;i++){  
   if(aEle\[i\].className==sClass){  
      aResult.push(aEle\[i\]);  
   }  

var oDivSmall=getByClass(oDiv, 'small\_pic')\[0\];  
var oUlSmall=oDivSmall.getElementsByTagName('ul')\[0\];  
var aLiSmall=oDivSmall.getElementsByTagName('li');

var oUlBig=getByClass(oDiv, 'big\_pic')\[0\];  
var aLiBig=oUlBig.getElementsByTagName('li');    

   var nowZIndex=2;  
   var now=0;  
   oUlSmall.style.width=aLiSmall.length\*aLiSmall\[0\].offsetWidth+'px';  
//左右按钮  
oBtnPrev.onmouseover=oMarkLeft.onmouseover=function ()  
{  
    startMove(oBtnPrev, 'opacity', 100);  
};  
oBtnPrev.onmouseout=oMarkLeft.onmouseout=function ()  
{  
    startMove(oBtnPrev, 'opacity', 0);  
};  
oBtnNext.onmouseover=oMarkRight.onmouseover=function ()  
{  
    startMove(oBtnNext, 'opacity', 100);  
};  
oBtnNext.onmouseout=oMarkRight.onmouseout=function ()  
{  
    startMove(oBtnNext, 'opacity', 0);  
};  
   //大图切换  
    //大图切换  
for(var i=0;i<aLiSmall.length;i++)  
{  
    aLiSmall\[i\].index=i;  
    aLiSmall\[i\].onclick=function ()  
    {  
        if(this.index==now)return;

        now=this.index;

        tab();  
    };

    aLiSmall\[i\].onmouseover=function ()  
    {  
        startMove(this, 'opacity', 100);  
    };  
    aLiSmall\[i\].onmouseout=function ()  
    {  
        if(this.index!=now)  
        {  
            startMove(this, 'opacity', 60);  
        }  
    };  
}

function tab()  
{  
    aLiBig\[now\].style.zIndex=nowZIndex++;

    for(var i=0;i<aLiSmall.length;i++)  
    {  
        startMove(aLiSmall\[i\], 'opacity', 60);  
    }

    startMove(aLiSmall\[now\], 'opacity', 100);

    aLiBig\[now\].style.height=0;  
    startMove(aLiBig\[now\], 'height', 320);

    if(now==0)  
    {  
        startMove(oUlSmall, 'left', 0);  
    }  
    else if(now==aLiSmall.length-1)  
    {  
        startMove(oUlSmall, 'left', -(now-2)\*aLiSmall\[0\].offsetWidth);  
    }  
    else  
    {  
        startMove(oUlSmall, 'left', -(now-1)\*aLiSmall\[0\].offsetWidth);  
    }  
}

oBtnPrev.onclick=function ()  
{  
    now--;  
    if(now==-1)  
    {  
        now=aLiSmall.length-1;  
    }

    tab();  
};

oBtnNext.onclick=function ()  
{  
    now++;  
    if(now==aLiSmall.length)  
    {  
        now=0;  
    }

    tab();  
};

var timer=setInterval(oBtnNext.onclick, 2000);

oDiv.onmouseover=function ()  
{  
    clearInterval(timer);  
};  
oDiv.onmouseout=function ()  
{  
    timer=setInterval(oBtnNext.onclick, 2000);  
};  

   //IE  event.clientX;  
  //FF ev.clientX;  
  var oEvent=ev||event;  
  alert(oEvent.clientX+','+oEvent.clientY)  

       l=document.documentElement.clientWidth-oDiv.offsetWidth;  
 }  
 if(t<0){t=0} else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){  
     t=document.documentElement.clientHeight-oDiv.offsetHeight;  

return false;  

oDiv.style.display='block';  

oTxt.onkeydown=function (ev)  
{  
    var oEvent=ev||event;

    //alert(oEvent.keyCode);

    //0-    48  
    //9-    57

    //如果 用户按的 不是退格 并且 也不是数字

    if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))  
    {  
        return false;  
    }  
};  

                document.onmousemove=function(ev){  
                    var oEvent=ev || event;  
                    oBox.style.left=oEvent.clientX-disX+'px';  
                    oBox.style.top=oEvent.clientY-disY+'px';

                }  
                document.onmouseup=function(ev){  
                    document.onmousemove=null;  
                    document.onmouseup=null;  
                    oDiv.style.left=oBox.offsetLeft+'px';  
                    oDiv.style.top=oBox.offsetTop+'px';  
                    document.body.removeChild(oBox)

                }  
                return false;  
            }  
        }

                document.onmousemove=function(ev){  
                    var oEvent=ev ||event;  
                    var l=oEvent.clientX-disX;  
                    var t=oEvent.clientY-disY;  
                    if(l<50){  
                        l=0  
                    }else if(l > oDiv2.offsetWidth-oDiv1.offsetWidth){  
                        l=oDiv2.offsetWidth-oDiv1.offsetWidth;  
                    }

                    if(t<50){  
                        t=0  
                    }else if(t > oDiv2.offsetHeight-oDiv1.offsetHeight){  
                        t=oDiv2.offsetHeight-oDiv1.offsetHeight;  
                    }

                    oDiv1.style.left=l+'px';  
                    oDiv1.style.top=t+'px';  
                }

                document.onmouseup=function(){  
                    document.onmousemove=null;  
                    document.onmouseup=null;  
                }

                return false;  
            }

        }