当前位置:首 页 > 技术文章 > 原创 > 详细

js[原生javascript]浮动层智能判断上下边界

字号字号

摘要:在网页设计中,出于用户体验或布局需要,我们很多时候需要借助javascript来完成一些内容的显示控制,由于用户的屏幕大小不一致以及要显示的内容没有固定大小的高宽,所以,显示的模块有时候需要自动适应用户的屏幕尺寸以避免用户拖拉滚动条的操作,比如:如果要显示的模块中内容过多而超出了用户的屏幕尺寸范围,……

在网页设计中,出于用户体验或布局需要,我们很多时候需要借助javascript来完成一些内容的显示控制,由于用户的屏幕大小不一致以及要显示的内容没有固定大小的高宽,所以,显示的模块有时候需要自动适应用户的屏幕尺寸以避免用户拖拉滚动条的操作,比如:如果要显示的模块中内容过多而超出了用户的屏幕尺寸范围,那就有必要把模块中超出的内容隐藏掉。

以某招聘网站为例,在职位列表页中可以显示:职位名称、公司名称、职位描述、发布日期、截止日期等,但是职位描述的内容可能会比较多,要让它直接在列表中显示是不可取的,因为会让页面显得太凌乱而降低了可读性,这时候如果用脚本来控制它的显示应该效果会更好。

具体的思路就是:职位描述是隐藏的,在用户做出某个操作之后(如:鼠标移到职位名称上)再让它显示出来。

具体实现请看代码:

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2. <input type="button" onclick="bind_fun()" value="绑定事件" />  
  3.   
  4. <table width="600" id="mytb">  
  5.   
  6. <thead><tr>  
  7. <th align="left">职位名称</th>  
  8. <th align="left">公司名称</th>  
  9. <th align="left">工作地点</th>  
  10. <th align="left">发布时间</td>  
  11. <th align="left">截止时间</th>  
  12. </tr></thead>  
  13.   
  14. <tbody>  
  15. <tr>  
  16. <td><a href="#1" target="_blank">客户代表</a><input type="hidden" value="职位描述111" /></td>  
  17. <td><a href="#1" target="_blank">**公司</a></td>  
  18. <td>**城市</td>  
  19. <td>2012-08-02</td>  
  20. <td>2012-10-30</td>  
  21. </tr><tr>  
  22. <td><a href="#2" target="_blank">销售行政专员/助理</a><input type="hidden" value="职位描述222职位描述222职位描述222职位描述222" /></td>  
  23. <td><a href="#2" target="_blank">**公司</a></td>  
  24. <td>**城市</td>  
  25. <td>2012-06-02</td>  
  26. <td>2012-06-22</td>  
  27. </tr><tr >  
  28. <td><a href="#3" target="_blank">客服主管(非技术)</a><input type="hidden" value="职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333职位描述333" /></td>  
  29. <td><a href="#3" target="_blank">**公司</a></td>  
  30. <td>**城市</td>  
  31. <td>2012-04-02</td>  
  32. <td>2012-07-09</td>  
  33. </tr><tr>  
  34. <td><a href="#4" target="_blank">市场/营销专员</a><input type="hidden" value="职位描述444职位描述444职位描述444职位描述444职位描述444职位描述444职位描述444" /></td>  
  35. <td><a href="#4" target="_blank">**公司</a></td>  
  36. <td>**城市</td>  
  37. <td>2012-05-08</td>  
  38. <td>2012-08-05</td>  
  39. </tr>  
  40. </tbody>  
  41.   
  42. <tfoot><tr><td colspan="5" style="color:#666;">分页信息:<font color="#000000" size="+2">01</font> [02] [03] [04] [05]</td></tr></tfoot>  
  43.   
  44. </table>  
  45. </body>  
CSS Code复制内容到剪贴板
  1. <style type="text/css">  
  2. /*指向箭头*/  
  3. #message_m_arrow{width:440pxheight:17pxoverflow:hiddenbackground:url(_tips_arrow.gif); position:absolutez-index:999; display:none;}  
  4. /*内容模块*/  
  5. #message_m{width:429pxheight:autooverflow:hiddenposition:absolutez-index:1000; display:none;}  
  6. .message_m_t{width:429pxheight:4pxoverflow:hiddenbackground:url(_tips_t_bg.gif);}  
  7. .message_m_c{width:419pxheight:autopadding:0px 5pxoverflow:hiddenbackground:url(_tips_c_bg.gif); font-size:12pxline-height:20px;}  
  8. .message_m_b{width:429pxheight:4pxoverflow:hiddenbackground:url(_tips_b_bg.gif);}  
  9. </style>  
JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">  
  2.   
  3. /*$id 标签选择函数*/  
  4. function $id(id,tagname){  
  5.   if(tagname!=null){  
  6.     return (typeof(id)=="string"?document.getElementById(id):id).getElementsByTagName(tagname);  
  7.   }  
  8.   else{  
  9.     return document.getElementById(id);  
  10.   }  
  11. }  
  12. /*取得HTML控件绝对位置*/  
  13. function getAbsPoint(e){  
  14.   var x = e.offsetLeft;  
  15.   var y = e.offsetTop;  
  16.   while(e = e.offsetParent){  
  17.     x += e.offsetLeft;y += e.offsetTop;  
  18.   }  
  19.   return {'x': x, 'y': y};  
  20. }  
  21.   
  22. /*取窗口可视范围的高度 */  
  23. function getClientHeight(doc){doc=doc||document;return doc.documentElement.clientHeight; }  
  24.   
  25. /*绑定事件*/  
  26. function bind_fun()  
  27. {  
  28. var message_m_arrow=null,message_m=null;  
  29. if(!$id("message_m_arrow")){message_m_arrow=document.createElement("div");message_m_arrow.setAttribute("id","message_m_arrow");document.body.appendChild(message_m_arrow);}  
  30. if(!$id("message_m")){message_m=document.createElement("div");message_m.setAttribute("id","message_m");var html='<div class="message_m_t"></div><div class="message_m_c"></div><div class="message_m_b"></div>';message_m.innerHTML=html;document.body.appendChild(message_m);}  
  31.   
  32. //得到表格“mytb”中“tbody”里的所有tr  
  33. var trs=$id($id("mytb","tbody")[0],"tr");  
  34.   
  35. //循环绑定事件  
  36. for(var i=0;i<trs.length;i++)  
  37. {  
  38.   var a=$id($id(trs[i],"td")[0],"a")[0];//得到职位名称的a标签  
  39.   if(a)  
  40.   {  
  41.     a.onmouseover=function(){over(this);};//给a标签绑定鼠标移到事件处理函数  
  42.     a.onmouseout=function(){out(this);};//给a标签绑定鼠标离开事件处理函数  
  43.   }  
  44. }  
  45.   
  46. //鼠标移到[私有函数]  
  47. function over(a)  
  48. {  
  49.   var pos=getAbsPoint(a);//得到a标签的绝对位置  
  50.   message_m_arrow.style.display="block";//显示指向箭头  
  51.     
  52.   //计算指向箭头x/y坐标  
  53.   var x=pos.x+a.offsetWidth;  
  54.   var y=pos.y+parseInt(a.offsetHeight/2,10)-parseInt(message_m_arrow.offsetHeight/2,10);  
  55.     
  56.   //定位指向箭头  
  57.   message_m_arrow.style.left=x+"px";  
  58.   message_m_arrow.style.top=y+"px";  
  59.     
  60.   $id(message_m,"div")[1].innerHTML=getText(a);//获取要放到模块中的内容  
  61.   message_m_pos(x,y);//定位内容模块     
  62. }  
  63.   
  64. //鼠标离开[私有函数]  
  65. function out(a){  
  66.   message_m_arrow.style.display="none";  
  67.   message_m.style.display="none";  
  68.   $id(message_m,"div")[1].style.height="auto";  
  69.   iframe(false);//隐藏框架  
  70. }  
  71.   
  72. //定位内容模块message_m[私有函数]  
  73. function message_m_pos(x,y)  
  74. {  
  75.   message_m.style.display="block";//显示内容模块  
  76.     
  77.   var vH=getClientHeight(document);//可见区域高度    
  78.   var mytop=document.documentElement.scrollTop+document.body.scrollTop; //滚动条位置  
  79.     
  80.   //计算内容模块x坐标[+11是因为x是指向箭头的x坐标,而指向箭头的三角宽度为11]  
  81.   x=x+11;  
  82.   //定位内容模块x坐标  
  83.   message_m.style.left=x+"px";  
  84.     
  85.   //计算内容模块y坐标的初始值  
  86.   y=y+Math.floor(message_m_arrow.offsetHeight/2)-Math.floor(message_m.offsetHeight/2);  
  87.     
  88.   //定位内容模块y坐标  
  89.   if(message_m.offsetHeight>vH)//如果模块高度超出窗口高度  
  90.   {  
  91.     var h=vH-($id(message_m,"div")[0].offsetHeight+$id(message_m,"div")[2].offsetHeight);  
  92.     $id(message_m,"div")[1].style.height=h+"px";  
  93.     y=(Math.floor(vH/2)-Math.floor(message_m.offsetHeight/2)+mytop);  
  94.     message_m.style.top=y+"px";  
  95.     iframe(true,x,y,message_m.offsetWidth,message_m.offsetHeight);  
  96.   }  
  97.   else//如果模块高度没有超出窗口高度  
  98.   {  
  99.     var max_y=vH-message_m.offsetHeight+mytop;//最大可用坐标  
  100.     var min_y=(Math.floor(vH/2)-Math.floor(message_m.offsetHeight/2)+mytop-Math.floor((vH-message_m.offsetHeight)/2))//最小可用坐标  
  101.     if(y<min_y){y=min_y;}else if(y>max_y){y=max_y;}  
  102.     message_m.style.top=y+"px";  
  103.     iframe(true,x,y,message_m.offsetWidth,message_m.offsetHeight);//显示框架  
  104.   }  
  105. }  
  106.        
  107. //获取职位描述内容[私有函数]  
  108. function getText(a)  
  109. {  
  110.   var hd=$id(a.parentNode,"input")[0];//得到装载“职位描述”隐藏控件  
  111.     
  112.   var str="";  
  113.   str+='<b>职位描述</b>';  
  114.   str+='<p style="border-top:solid 1px #f90; padding:0px; margin:0px;">';  
  115.   str+=hd.value;//隐藏的“职位描述”  
  116.   str+='</p>';  
  117.   return str;  
  118. }  
  119.   
  120. //显示或隐藏框架[只针对IE6,在IE6中,普通标签遮不住select标签][私有函数]  
  121. function iframe(show_b,x,y,w,h){if(document.all&&parseInt(navigator.userAgent.toLowerCase().match(/msie\s\d/g)[0].match(/\d/g)[0],10)==6){if(show_b){if($id("_iframe_bg")){var o=$id("_iframe_bg");o.style.height=h+"px";o.style.width=w+"px";o.style.left=x+"px";o.style.top=y+"px";o.style.display="block";}else{var o=document.createElement("iframe");o.id="_iframe_bg"; o.style.cssText="z-index:998;position:absolute; opacity:0; filter:alpha(opacity=0); display:block; width:"+w+"px; height:"+h+"px; top:"+y+"px; left:"+x+"px;";document.body.appendChild(o);}}else{if($id("_iframe_bg")){$id("_iframe_bg").style.display="none";}}}}  
  122.     
  123. }  
  124. </script>  

页面初始效果:

绑定事件后的浏览效果:

1

2

  • 添加[Admin-1]
  • 浏览[4188]
  • ▼评论[4]
这是留给你的位置,说出你的真知灼见吧![我要评论][我要收藏][我要举报]
[游客]于[2013-04-24]评论[js[原生javascript]浮动层智能判断上下边界]:

在网页设计中,出于用户体验或布局需要,我们很多时候需要借助javascript来完成一些内容的显示控制……这个是一定的了

[游客]于[2012-12-11]评论[js[原生javascript]浮动层智能判断上下边界]:

应用很广泛的一个效果

[独醉江湖]于[2012-08-14]评论[js[原生javascript]浮动层智能判断上下边界]:

收藏了以后看

[游客]于[2012-08-13]评论[js[原生javascript]浮动层智能判断上下边界]:

俺正想做这个效果呢,呵呵,先用用看