首页>>导航菜单>>CSS3实现黑色卷角翻页导航条 纯好看，不算很实(2014-08-25)

CSS3实现黑色卷角翻页导航条 纯好看，不算很实

CSS3实现黑色卷角翻页导航条 纯好看，不算很实
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="notice"><div class="arrow"></div>拖动书角看效果</div>  
  2.   
  3. <div class="form" id="form">  
  4.     <div class="corner" id="corner"></div>  
  5.     <ul class="button">  
  6.         <li><a href="http://freejs.net/daohangcaidan.html">导航菜单</a></li>  
  7.         <li><a href="http://freejs.net/tabbiaoqian.html">Tab标签</a></li>  
  8.         <li class="borderno"><a href="http://www.freejs.net">freejs</a></li>  
  9.     </ul>  
  10. </div>    

 

XML/HTML Code
  1. <script type="text/javascript">  
  2. (function(){  
  3.     var form=document.getElementById("form");  
  4.     var corner=document.getElementById("corner")  
  5.     var ftop=form.offsetTop;  
  6.     var fleft=form.offsetLeft;  
  7.     var switchopen=0;  
  8.     corner.onmousedown=function(e){  
  9.         e.preventDefault();   
  10.         form.style.cursor="move";  
  11.         switchopen=1;  
  12.         }  
  13.     form.onmousemove=function(e){  
  14.         if(switchopen==1){  
  15.             if(e.pageX-fleft>90 ||e.pageY-ftop>90){  
  16.                 cornercorner.style.width=corner.style.height=90+"px";  
  17.                 cornercorner.style.left=corner.style.top=-4+"px"  
  18.                 }  
  19.             else{  
  20.                 cornercorner.style.width=corner.style.height=e.pageY-ftop+"px";  
  21.                 }  
  22.         }  
  23.     }  
  24.     form.onmouseup=function(){  
  25.         switchopen=0;  
  26.                 this.style.cursor="default";  
  27. }  
  28. })()  
  29. </script>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_410.html