51job弹出层效果

作者：佚名来源：互联网文章点击数：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>51job弹出层效果-By gyct 20080822</title>
</head>
<body onload="init();">
<script language="javascript">

</script>
<input type="button" name="btnSltArea" value="工作地点" onclick="hide();displayLayer('popupArea')" class="anbg1" style="BACKGROUND-COLOR: #ffefe2;cursor:pointer"/>
<select name="select">
<option>test</option>
</select>
<table style="visibility:hidden;background:#FFFFFF;" id="popupArea" width="500" border="1" cellpadding="4" cellspacing="0" bordercolor="#FF6600"><tr><td><span onclick="cancel();hiddenLayer('popupArea');" style="float:right;cursor:pointer;">关闭</span>51job弹出层示例</td>
</tr>
<tr>
    <td>·[办公室|人际]怎样与上司融洽相处<br />
      ·[劳动法|劳动合同]签订培训合同要注意...<br />
      ·[本周气象]逾7万名赛会志愿者服务北京...<br />
      ·[就职|规划]奥运冠军背后的职场哲学<br />
      ·[培训|奥运]揭秘奥运场馆志愿者培训<br />
    ·[培训|法语]法语考证界的“五虎将”</td>
</tr>
<tr>
    <td> </td>
</tr>
</table>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script>
var IMGPATH  = '/';
var form='';
var php_bgPicture   = "orangebg.gif";
var php_arrow       = "01.gif";
var php_bgColor     = "#FF831F";
var objX = 0;
var objY = 0;
var bodyScrollWidth=0;
var bodyScrollHeight=0;
var screenAvailWidth=window.screen.availWidth;
var screenAvailHeight=window.screen.availHeight;
var bdMvEvt;
var bdUpEvt;
function recoverBodyEvent() {
    document.body.onmousemove = bdMvEvt;
    document.body.onmouseup = bdUpEvt;
}
if(navigator.appName.indexOf("Explorer") > -1){//ie
var exp=1;
}
else{//for ff
var exp=2;
}
var layer=new Array();
var dragObj=new Array();
var dragObjId=new Array();
reCalBodySize();
function reCalBodySize(){
bodyScrollWidth=document.documentElement.scrollWidth;
bodyScrollHeight=document.documentElement.scrollHeight;
}
function checkAndResetStyleTop (obj) {
var clientHeight=obj.firstChild.clientHeight;
var styleTop=parseInt(obj.style.top.substring(0,obj.style.top.length-2));
if ( clientHeight+styleTop>bodyScrollHeight ) {
  obj.style.top=(bodyScrollHeight- clientHeight)+'px';
}
}
function set_div_style(obj,id,top,left,width,height,position,border,cursor,background) {
        var obj = obj;
        obj.id = id?id:null;
        obj.style.top = top?top:'0px';
        obj.style.left = left?left:'0px';
        obj.style.width = width?width:'0px';
        obj.style.height = height?height:'0px';
        obj.style.position = position?position:"static";
        obj.style.border = border?border:"1px #000 solid";
        obj.style.cursor = cursor?cursor:"default";
        obj.style.background = background?background:"";
        return obj
}
function drag_mouse_down(event,obj){
var obj_left = obj.style.left;
var obj_top = obj.style.top;
var obj_left = obj_left.replace(/p|x/g,"");
var obj_top = obj_top.replace(/p|x/g,"");
if ( event == null ) {//IE必须
  event=window.event;
}
var clientX = String(event.clientX).replace(/p|x/g,"");
var clientY = String(event.clientY).replace(/p|x/g,"");
objX = clientX - obj_left;
objY = clientY - obj_top;
}
function drag(event,obj){
if( objX != 0 && objY != 0 ) {
  if ( event == null ) {//IE必须
   event=window.event;
  }
  if ( event.button == 1 || event.button == 0 ){
   var objWidth=obj.clientWidth;
   var objHeight=obj.clientHeight;
   reCalBodySize();
   var leftPo= event.clientX-objX;
   if ( leftPo < 0 ) {
    leftPo=0;
   }
   if ( leftPo > bodyScrollWidth-objWidth ) {
    leftPo=bodyScrollWidth-objWidth;
   }
   var topPo=event.clientY-objY;
   if ( topPo < 0 ) {
    topPo=0;
   }
   if ( topPo > bodyScrollHeight-objHeight ) {
    topPo=bodyScrollHeight-objHeight;
   }
   obj.style.left=leftPo+'px';
   obj.style.top=topPo+'px';
  }
}
}
function GetLength(strTemp){
var i,sum;
sum=0;
for(i=0;i<strTemp.length;i++){
  if ((strTemp.charCodeAt(i)>=0) && (strTemp.charCodeAt(i)<=255))
   sum = sum + 1;
  else
   sum=sum + 2;
}
return sum;
}
function subStringPro(str, length){
var stri = '';
for(i=0,j=0; j<length;){
  if ((str.charCodeAt(i)>=0) && (str.charCodeAt(i)<=255)) {
   stri += str.charAt(i);
   j++;
  } else {
   stri += str.charAt(i);
   j += 2;
  }
  i++;
}
return stri;
}
//*********************
//隐藏元素
function HideElement(strElementTagName){
try{
  for(i=0;i<window.document.all.tags(strElementTagName).length; i++){
   var objTemp = window.document.all.tags(strElementTagName)[i];
   objTemp.style.visibility = "hidden";
  }
}catch(e){
  alert(e.message);
}
}
//显示元素
function ShowElement(strElementTagName){
try{
  for(i=0;i<window.document.all.tags(strElementTagName).length; i++){
   var objTemp = window.document.all.tags(strElementTagName)[i];
   objTemp.style.visibility = "visible";
  }
}catch(e){
  alert(e.message);
}
}
function hideElementAll(){
HideElement("SELECT");
HideElement("OBJECT");
HideElement("IFRAME");
}
function showElementAll(){
ShowElement("SELECT");
ShowElement("OBJECT");
ShowElement("IFRAME");
}
//滤镜效果
function hide() {
synSizeByBody("globalDiv");
document.getElementById("globalDiv").style.display = "block";
if ( 1 == exp ) {
  hideElementAll();
}
}
function cancel() {
document.getElementById("globalDiv").style.display = "none";
if ( 1 == exp ) {
  showElementAll();
}

recoverBodyEvent();
}
function buildGlobalDiv(){
  var globalDiv=document.createElement('div');
  globalDiv.id='globalDiv';
  globalDiv.style.display='none';
  globalDiv.style.zIndex='98';
  globalDiv = set_div_style(globalDiv,'globalDiv','0px','0px',bodyScrollWidth+'px',bodyScrollHeight+'px',"absolute"," #333333 0px solid","default","darkgray");

  if ( 1 == exp ) {
   globalDiv.style.filter="alpha(opacity=30)";
  }
  else {
   globalDiv.style.opacity=30/100;
  }
  document.body.appendChild(globalDiv);
}
function synSizeByBody(objId) {
reCalBodySize();
if ( document.getElementById(objId) != null ) {
  document.getElementById(objId).style.width = (bodyScrollWidth)+'px';
  document.getElementById(objId).style.height = (bodyScrollHeight)+'px';
}
}
//将悬浮层的位置定位在body可见区域中央
function GetCenterXY_ForLayer(objdiv){
objdiv.style.display='block';
var styleWidth=objdiv.style.width.substring(0,objdiv.style.width.length-2);
var clientHeight=objdiv.clientHeight;
var objLeft = parseInt(document.documentElement.scrollLeft+(document.documentElement.clientWidth - styleWidth)/2)+'px';
var relTop=(document.documentElement.clientHeight-clientHeight)/2 > 0 ? (document.documentElement.clientHeight-clientHeight)/2:0;
var objTop = parseInt(document.documentElement.scrollTop+relTop)+'px';
objdiv.style.top = objTop;
objdiv.style.left = objLeft;
checkAndResetStyleTop(objdiv);
}
//************************************************************
function $(str) {//通过对象ID返回对象
if (typeof str == 'string' && document.getElementById(str) != null ) {
  return document.getElementById(str);
}
return false;
}
function buildDiv(myLayerID){
var layer=document.getElementById(myLayerID);
layer.style.visibility='hidden';
layer.style.zIndex='999';
var styleWidth=layer.width+'px';
var styleHeight=layer.clientHeight+'px';

layer = set_div_style(layer,myLayerID,'0px','0px',styleWidth,'0px',"absolute","0px solid #c0d4db","default","#fff");
dragObj=layer.firstChild.firstChild;
dragObj.style.cursor='move';
dragObj.onmousedown = function(event){drag_mouse_down(event,this.parentNode.parentNode)};
layer.onselectstart=function(){return false};
if ( 1 == exp ) {
  layer.firstChild.onresize=function(){checkAndResetStyleTop(this.parentNode);};
}
else {
  layer.firstChild.onclick=function(){checkAndResetStyleTop(this.parentNode)};
}
}
function hiddenLayerOther(layerID){
for( var i=0;i<dragObjId.length;i++ ){
  if ( dragObjId[i] != layerID && document.getElementById(dragObjId[i]) != null ) {
   hiddenLayer(dragObjId[i]);
  }
}
}
function displayLayer(layerID){
buildDiv(layerID);
if ( document.getElementById(layerID) != null){
  var dv = document.getElementById(layerID);
  hiddenLayerOther(layerID);
  if ( dv.style.visibility == "hidden" ) {
   GetCenterXY_ForLayer(dv);
   dv.style.visibility = "visible";
  }
  document.body.onmousemove = function (event){drag(event,dv)};
  document.body.onmouseup = function(){objX = 0;objY=0};
}
return false;
}
function hiddenLayer()
{
var argArr = hiddenLayer.arguments;
for(var i=0;i<argArr.length;i++){
  if ( document.getElementById(argArr[i])!=null )
  {
   document.getElementById(argArr[i]).style.visibility = "hidden";
  }
}
}
</script>
</body>
</html>

Tags:51job 弹出层特效

上一篇：首页顶部显示一会儿再慢慢上升消失的flash广告代码
下一篇：仿6.cn效果, 按钮控制信息左右信息滚动

·一个弹出层的JS特效	09-05
·简单代码实现的个性产品列表	08-20
·仿163 幻灯片特效	08-18
·符合标准的对联广告代码	08-16
·奥运奖牌榜代码	08-14
·半完美模拟滚动条simScroll...	08-13
·最新北京奥运官方网站幻灯片切换效果	08-12
·js文字滚动效果	08-11

热门浏览

·快速实用的人物磨皮及美白方法	05-31
·Photoshop简单给MM美白和润色	07-14
·用Photoshop简单打造毛笔字效果	03-15
·扩展你的思维--影子的创意	03-19
·Photoshop制作一颗中国水晶心	04-21
·Fireworks打造个性网店闪字签名	03-24
·PS制作简单的半调立体字	05-21
·实例详细讲解ASP生成静态页面方	03-15
·PS把帅哥的照片转手绘效果	07-25
·国外优秀场景CG设计欣赏	03-21
·Photoshop把美女照片制作成拼图	04-19
·很朦胧很震撼的人体摄影	03-15
·新加坡设计师Charlene Chua作品	03-17
·汶川地震报道超强震撼版式	05-19

编辑推荐

·可口可乐的全新视界	08-19
·网站的视觉设计十八条	08-16
·爱情的见证——不一样的婚礼摄	08-15
·金牌榜 - html分析/xml分页应用	08-15
·百家争鸣决战奥运营销之巅	08-15
·奥运奖牌榜代码	08-14
·企业文化决定发展专访优久总裁	08-02
·PS制作七夕情人节闪图签名	08-01
·如何让层垂直居中于浏览器窗口	07-28
·快准狠——图王畅谈中小网站	07-28
·用ASP+XML打造留言本	07-16
·凌乱中的完美韵律 Barral Fabi	07-14
·关于DNS服务器的配置问题	07-11
·雅虎站点管理器如何提升网站流	07-10