javascript-鼠标在焦点时移动位置（兼容FF）

程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>鼠标在焦点时移动位置</title>

/* 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>

/*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.knowsky.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>

<ul>

<li>

<p>描述一段浪漫唯美的苦恋：深谙泳技的渔村少女，某日在偶然间，救起溺水的富家公子，后来富家公子被救活而离开</p>

</div>

</li>

<li>

<p>描述一段浪漫唯美的苦恋：深谙泳技的渔村少女，某日在偶然间，救起溺水的富家公子，后来富家公子被救活而离开</p>

</div>

</li>

<li>

<p>描述一段浪漫唯美的苦恋：深谙泳技的渔村少女，某日在偶然间，救起溺水的富家公子，后来富家公子被救活而离开</p>

</div>

</li>

</ul>

</div>

</body>

</html>