WEB开发网
开发学院网页设计JavaScript javascript-鼠标在焦点时移动位置(兼容FF) 阅读

javascript-鼠标在焦点时移动位置(兼容FF)

 2009-06-30 04:31:00 来源:WEB开发网   
核心提示:程序代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html

程序代码
<!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=utf-8" />
<title>鼠标在焦点时移动位置</title>
<style type="text/CSS">
/* Reset style */
* { margin:0; padding:0; Word-break:break-all; }
body { background:#FFF; color:#878787; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#0287CA; text-decoration:none; }
   a:hover { text-decoration:underline; }
ul, li { list-style:none; }
img { border:none; }

#vlist { width:800px; height:150px; margin:100px 0 0 20px; border-bottom:1px dashed #D6D6D6; background:#F0F0F0; }
   #vlist ul li { position:relative; display:inline; float:left; width:180px; height:120px; overflow:hidden; margin:15px 0 0 10px; border:2px solid #B1B1B1; cursor:pointer; }
   .po_go { position:absolute; background:#FFF; }
     .in {}
     .in img { display:block; width:180px; height:120px; }
     .out { padding:10px; }
     .v_date { padding-bottom:5px; text-align:right; font-size:11px; }
     .v_date strong { float:left; font-size:22px; }
</style>

<script type="text/javascript">

/*add  --- cssrain */
/*
由于ff 不支持 onmouseenter  和 onmouseleave。
下面这个方法 就是为了解决 ff 下的这个问题。
*/
var xb =
{
   evtHash: [],

   ieGetUniqueID: function(_elem)
   {
     if (_elem === window) { return 'theWindow'; }
     else if (_elem === document) { return 'theDocument'; }
     else { return _elem.uniqueID; }
   },

   addEvent: function(_elem, _evtName, _fn, _useCapture)
   {
     if (typeof _elem.addEventListener != 'undefined')
     {
       if (_evtName == 'mouseenter')
         { _elem.addEventListener('mouSEOver', xb.mouseEnter(_fn), _useCapture); }
       else if (_evtName == 'mouseleave')
         { _elem.addEventListener('mouseout', xb.mouseEnter(_fn), _useCapture); }
       else
         { _elem.addEventListener(_evtName, _fn, _useCapture); }
     }
     else if (typeof _elem.attachEvent != 'undefined')
     {
       var key = '{FNKEY::obj_' + xb.ieGetUniqueID(_elem) + '::evt_' + _evtName + '::fn_' + _fn + '}';
       var f = xb.evtHash[key];
       if (typeof f != 'undefined')
         { return; }
      
       f = function()
       {
         _fn.call(_elem);
       };
    
       xb.evtHash[key] = f;
       _elem.attachEvent('on' + _evtName, f);
  
       // attach unload event to the window to clean up possibly IE memory leaks
       window.attachEvent('onunload', function()
       {
         _elem.detachEvent('on' + _evtName, f);
       });
    
       key = null;
       //f = null;  /* DON'T null this out, or we won't be able to detach it */
     }
     else
       { _elem['on' + _evtName] = _fn; }
   },  

   removeEvent: function(_elem, _evtName, _fn, _useCapture)
   {
     if (typeof _elem.removeEventListener != 'undefined')
       { _elem.removeEventListener(_evtName, _fn, _useCapture); }
     else if (typeof _elem.detachEvent != 'undefined')
     {
       var key = '{FNKEY::obj_' + xb.ieGetUniqueID(_elem) + '::evt' + _evtName + '::fn_' + _fn + '}';
       var f = xb.evtHash[key];
       if (typeof f != 'undefined')
       {
         _elem.detachEvent('on' + _evtName, f);
         delete xb.evtHash[key];
       }
    
       key = null;
       //f = null;  /* DON'T null this out, or we won't be able to detach it */
     }
   },
  
   mouseEnter: function(_pFn)
   {
     return function(_evt)
     {
       var relTarget = _evt.relatedTarget;        
       if (this == relTarget || xb.isAChildOf(this, relTarget))
         { return; }

     _pFn.call(this, _evt);
     }
   },
  
   isAChildOf: function(_parent, _child)
   {
     if (_parent == _child) { return false };
    
     while (_child && _child != _parent)
       { _child = _child.parentNode; }
    
     return _child == _parent;
   }  
};
/* end */ http://bizhi.cncms.com/


function addLoadEvent(func){
   var oldonload = window.onload;
   if (typeof window.onload != 'function') {
     window.onload = func;
   } else {
     window.onload = function(){
       oldonload();
       func();
     }
   }
}


function getElementsByClassName(oElm, strTagName, strClassName) {
   var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
   var arrReturnElements = new Array();
   strClassName = strClassName.replace(/-/g, "\-");
   var oregExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");  
   var oElement;  
   for(var i=0; i<arrElements.length; i++){  
     oElement = arrElements[i];  
     if(oRegExp.test(oElement.className)){  
       arrReturnElements.push(oElement);  
       }  
   }
   return (arrReturnElements)
}


function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
   clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
   elem.style.left = "0px";
  }
  if (!elem.style.top) {
   elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
   return true;
  }
  if (xpos < final_x) {
   var dist = Math.ceil((final_x - xpos)/10);
   xpos = xpos + dist;
  }
  if (xpos > final_x) {
   var dist = Math.ceil((xpos - final_x)/10);
   xpos = xpos - dist;
  }
  if (ypos < final_y) {
   var dist = Math.ceil((final_y - ypos)/10);
   ypos = ypos + dist;
  }
  if (ypos > final_y) {
   var dist = Math.ceil((ypos - final_y)/10);
   ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}


function msgTip() {
   var elem = document.getElementById('vlist');
   var poGo = getElementsByClassName(elem, 'div', 'po_go');


   for (var i=0; i<poGo.length; i++) {
     var j = 'vlist' + '_' + i;
     poGo[i].setAttribute('id',j);

   xb.addEvent(poGo[0], 'mouseenter', function(){
     moveElement('vlist_0',0,0,10)
     }, false);
      

   xb.addEvent(poGo[0], 'mouseleave', function(){
     moveElement('vlist_0',0,-120,10)
     }, false);
  
    
     xb.addEvent(poGo[1], 'mouseenter', function(){
     moveElement('vlist_1',0,0,10)
     }, false);
      

   xb.addEvent(poGo[1], 'mouseleave', function(){
     moveElement('vlist_1',0,-120,10)
     }, false);


     xb.addEvent(poGo[2], 'mouseenter', function(){
     moveElement('vlist_2',0,0,10)
     }, false);
      

   xb.addEvent(poGo[2], 'mouseleave', function(){
     moveElement('vlist_2',0,-120,10)
     }, false);


    
   }

}


addLoadEvent(msgTip);
</script>
</head>

<body>


<div id="vlist">
   <ul>
     <li>
       <div class="po_go" style="top:-120px;" >
         <div class="in" ><a href="#"><img src="http://www.cncms.com/k2008715211916.jpg" alt="" /></a></div>
         <div class="out">
           <p class="v_date"><strong>1</strong>09:48:56</p>
           <p>描述一段浪漫唯美的苦恋:深谙泳技的渔村少女,某日在偶然间,救起溺水的富家公子,后来富家公子被救活而离开</p>
         </div>
       </div>
     </li>
     <li>
       <div class="po_go" style="top:-120px;">
         <div class="in"><a href="#"><img src="http://www.cncms.com/r2008715211938.jpg" alt="" /></a></div>
         <div class="out">
           <p class="v_date"><strong>2</strong>09:48:56</p>
           <p>描述一段浪漫唯美的苦恋:深谙泳技的渔村少女,某日在偶然间,救起溺水的富家公子,后来富家公子被救活而离开</p>
         </div>
       </div>
     </li>
     <li>
       <div class="po_go" style="top:-120px;">
         <div class="in"><a href="#"><img src="http://www.cncms.com/12008715211953.jpg" alt="" /></a></div>
         <div class="out">
           <p class="v_date"><strong>3</strong>09:48:56</p>
           <p>描述一段浪漫唯美的苦恋:深谙泳技的渔村少女,某日在偶然间,救起溺水的富家公子,后来富家公子被救活而离开</p>
         </div>
       </div>
     </li>
    
    
   </ul>
</div>

</body>
</html>

Tags:javascript 鼠标 焦点

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接