首页 > 建站知识 > 常用网页代码 >

仿新浪博客左(右)下角漂浮代码,可关闭可最小化

来源:网络转载 作者:517源码 发表于:2012-03-21 06:13  点击:

【导读】一款简洁实用的左(右)下角漂浮代码,带关闭按钮,还可最小化可还原。

 一款简洁实用的左(右)下角漂浮代码,带关闭按钮,还可最小化可还原。

点击查看预览

织梦整站源码

下载地址:

左下角漂浮代码

右下角漂浮代码

 

效果实现代码如下:

HTML代码 

  1. <div class="float_layer" id="miaov_float_layer"> 
  2.     <h2> 
  3.         <strong>标题栏</strong> 
  4.         <a id="btn_min" href="javascript:;" class="min"></a> 
  5.         <a id="btn_close" href="javascript:;" class="close"></a> 
  6.     </h2> 
  7.     <div class="content"> 
  8. <div class="wrap">弹出内容区,请在517ym.css文件里修改显示样式。.float_layer .content { height: 150px; overflow: hidden; font-size: 14px; line-height: 18px; color: #666; text-indent: 28px; } 
  9. .float_layer .wrap { padding: 10px; }<a href="http://www.517jiaodong.net" target="_blank">517源码网收集整理</a></div> 
  10.   </div> 
  11. </div> 

CSS代码

  1. @charset "utf-8"
  2. /* CSS Document */ 
  3.  
  4. * { padding0margin0; } 
  5. li { list-stylenone; } 
  6. body { background#eee; } 
  7.  
  8. .float_layer { width300pxborder1px solid #aaaaaadisplay:nonebackground#fff; } 
  9. .float_layer h2 { height25pxline-height25pxpadding-left10pxfont-size14pxcolor#333backgroundurl(images/title_bg.gif) repeat-xborder-bottom1px solid #aaaaaapositionrelative; } 
  10.  
  11. .float_layer .min { width21pxheight20pxbackgroundurl(images/min.gif) no-repeat 0 bottompositionabsolute; top: 2px; left: 25px; } 
  12. .float_layer .min:hover { backgroundurl(images/min.gif) no-repeat 0 0; } 
  13.  
  14. .float_layer .max { width21pxheight20pxbackgroundurl(images/max.gif) no-repeat 0 bottompositionabsolute; top: 2px; left: 25px; } 
  15. .float_layer .max:hover { backgroundurl(images/max.gif) no-repeat 0 0; } 
  16.  
  17. .float_layer .close { width21pxheight20pxbackgroundurl(images/close.gif) no-repeat 0 bottompositionabsolute; top: 2px; left: 3px; } 
  18. .float_layer .close:hover { backgroundurl(images/close.gif) no-repeat 0 0; } 
  19.  
  20. .float_layer .content { height150pxoverflowhiddenfont-size14pxline-height18pxcolor#666text-indent28px; } 
  21. .float_layer .wrap { padding10px; } 

JS代码

  1. function miaovAddEvent(oEle, sEventName, fnHandler) 
  2.     if(oEle.attachEvent) 
  3.     { 
  4.         oEle.attachEvent('on'+sEventName, fnHandler); 
  5.     } 
  6.     else 
  7.     { 
  8.         oEle.addEventListener(sEventName, fnHandler, false); 
  9.     } 
  10.  
  11. window.onload = function() 
  12.     var oDiv=document.getElementById('miaov_float_layer'); 
  13.     var oBtnMin=document.getElementById('btn_min'); 
  14.     var oBtnClose=document.getElementById('btn_close'); 
  15.     var oDivContent=oDiv.getElementsByTagName('div')[0]; 
  16.      
  17.     var iMaxHeight=0; 
  18.      
  19.     var isIE6=window.navigator.userAgent.match(/MSIE 6/ig) && !window.navigator.userAgent.match(/MSIE 7|8/ig); 
  20.      
  21.     oDiv.style.display='block'
  22.     iMaxHeight=oDivContent.offsetHeight; 
  23.      
  24.     if(isIE6) 
  25.     { 
  26.         oDiv.style.position='absolute'
  27.         repositionAbsolute(); 
  28.         miaovAddEvent(window, 'scroll', repositionAbsolute); 
  29.         miaovAddEvent(window, 'resize', repositionAbsolute); 
  30.     } 
  31.     else 
  32.     { 
  33.         oDiv.style.position='fixed'
  34.         repositionFixed(); 
  35.         miaovAddEvent(window, 'resize', repositionFixed); 
  36.     } 
  37.      
  38.     oBtnMin.timer=null
  39.     oBtnMin.isMax=true
  40.     oBtnMin.onclick=function () 
  41.     { 
  42.         startMove 
  43.         ( 
  44.             oDivContent, (this.isMax=!this.isMax)?iMaxHeight:0, 
  45.             function () 
  46.             { 
  47.                 oBtnMin.className=oBtnMin.className=='min'?'max':'min'
  48.             } 
  49.         ); 
  50.     }; 
  51.      
  52.     oBtnClose.onclick=function () 
  53.     { 
  54.         oDiv.style.display='none'
  55.     }; 
  56. }; 
  57.  
  58. function startMove(obj, iTarget, fnCallBackEnd) 
  59.     if(obj.timer) 
  60.     { 
  61.         clearInterval(obj.timer); 
  62.     } 
  63.     obj.timer=setInterval 
  64.     ( 
  65.         function () 
  66.         { 
  67.             doMove(obj, iTarget, fnCallBackEnd); 
  68.         },30 
  69.     ); 
  70.  
  71. function doMove(obj, iTarget, fnCallBackEnd) 
  72.     var iSpeed=(iTarget-obj.offsetHeight)/8; 
  73.      
  74.     if(obj.offsetHeight==iTarget) 
  75.     { 
  76.         clearInterval(obj.timer); 
  77.         obj.timer=null
  78.         if(fnCallBackEnd) 
  79.         { 
  80.             fnCallBackEnd(); 
  81.         } 
  82.     } 
  83.     else 
  84.     { 
  85.         iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 
  86.         obj.style.height=obj.offsetHeight+iSpeed+'px'
  87.          
  88.         ((window.navigator.userAgent.match(/MSIE 6/ig) && window.navigator.userAgent.match(/MSIE 6/ig).length==2)?repositionAbsolute:repositionFixed)() 
  89.     } 
  90.  
  91. function repositionAbsolute() 
  92.     var oDiv=document.getElementById('miaov_float_layer'); 
  93.     var left=document.body.scrollleft||document.documentElement.scrollLeft; 
  94.     var top=document.body.scrollTop||document.documentElement.scrollTop; 
  95.     var width=document.documentElement.clientWidth; 
  96.     var height=document.documentElement.clientHeight; 
  97.      
  98.     oDiv.style.left=left+width-oDiv.offsetWidth+'px'
  99.     oDiv.style.top=top+height-oDiv.offsetHeight+'px'
  100.  
  101. function repositionFixed() 
  102.     var oDiv=document.getElementById('miaov_float_layer'); 
  103.     var width=document.documentElement.clientWidth; 
  104.     var height=document.documentElement.clientHeight; 
  105.      
  106.     oDiv.style.left=width-oDiv.offsetWidth+'px'
  107.     oDiv.style.top=height-oDiv.offsetHeight+'px'

 

有帮助
(0)
0%
没帮助
(0)
0%
  • 上一篇:没有了
  • 下一篇:侧栏跟随滚动条代码 提高侧栏点击率
  •