程序代码
<!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.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>
<div id="vlist">
<ul>
<li>
<div class="po_go" style="top:-120px;" >
<div class="in" ><a href="#"><img src="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="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="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>
