jquery技艺又升级了.实现滑动导航栏-修复ie6不兼容
jquery技能又升级了.实现滑动导航栏-修复ie6不兼容
<%@ page contentType="text/html;charset=gb2312"%> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"> </script> <script type="text/javascript" > var accordion=function(){ var tm=sp=10; function slider(n){this.nm=n; this.arr=[]} slider.prototype.init=function(t,c,k){ var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:''; h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length; for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}} l=s.length; for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}} } slider.prototype.pro=function(d){ for(var i=0;i<this.l;i++){ var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm); if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl} else if(s.style.display==''){su(s,-1); h.className=''} } } function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)} function sl(c,f){ var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px'; c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')'; if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)} } return{slider:slider} }(); </script> <script text="text/javascript" > $('.content_left_off_title').live('click',function(){ var lefbg = $('.content_left_on_title_leftbg'); var rigbg = $('.content_left_on_title_rightbg'); var sel = $('#select'); sel.toggleClass('content_left_off_title').toggleClass('content_left_on_title_center'); sel.children().toggleClass('content_left_off_title_icon').toggleClass('content_left_on_title_icon'); sel.parent().toggleClass('content_left_off').toggleClass('content_left_on_title'); rigbg.remove(); lefbg.remove(); sel.after('<div class="content_left_off_title_line"></div>'); sel.attr('id',''); $(this).toggleClass('content_left_off_title'); $(this).toggleClass('content_left_on_title_center'); $(this).children().toggleClass('content_left_off_title_icon'); $(this).children().toggleClass('content_left_on_title_icon'); $(this).parent().toggleClass('content_left_off'); $(this).parent().toggleClass('content_left_on_title'); $(this).before('<div class="content_left_on_title_leftbg">'); $(this).after('</div><div class="content_left_on_title_rightbg"></div>'); $(this).parent().children('.content_left_off_title_line').remove(); $(this).attr('id','select'); }); </script> <div class="aboutus_left_title_img"><img src="/info/img/gywm.gif" /></div> <div id="accordion"> <dl class="accordion" id="slider"> <dt> <div class="content_left_on_title"> <div class="content_left_on_title_leftbg"></div> <div class="content_left_on_title_center" id='select'><div class="content_left_on_title_icon"></div>关于我们</div> <div class="content_left_on_title_rightbg"></div> </div> </dt> <dd> <div class="content_left_on_content">·关于我们</div> <div class="content_left_on_content">·关于我们</div> <div class="content_left_on_content">·关于我们</div> </dd> <dt> <div class="content_left_off"> <div class="content_left_off_title"><div class="content_left_off_title_icon"></div>最新动态 </div> <div class="content_left_off_title_line"></div> </div> </dt> <dd> <div class="content_left_on_content">·联系我们</div> </dd> <dt> <div class="content_left_off"> <div class="content_left_off_title"><div class="content_left_off_title_icon"></div>客户项目</div> <div class="content_left_off_title_line"></div> </div> </dt> <dd> <div class="content_left_on_content">·联系我们</div> </dd> <dt> <div class="content_left_off"> <div class="content_left_off_title"><div class="content_left_off_title_icon"></div>诚聘英才</div> <div class="content_left_off_title_line"></div> </div> </dt> <dd> <div class="content_left_on_content">·联系我们</div> </dd> <dt> <div class="content_left_off"> <div class="content_left_off_title"><div class="content_left_off_title_icon"></div>联系我们</div> <div class="content_left_off_title_line"></div> </div> </dt> <dd> <div class="content_left_on_content">·联系我们</div> </dd> </dl> <div class="content_left_bottom_img"><img src="/info/img/content_left_img.gif" /></div> </div> <script type="text/javascript"> var slider1=new accordion.slider("slider1"); slider1.init("slider",0,"open"); </script>