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

juauedy

juauedy

2016-02-19 14:40

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享javascript-鼠标在焦点时移动位置（兼容FF），希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

程序代码
!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; iarrElements.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; ipoGo.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"strong1/strong09: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"strong2/strong09: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"strong3/strong09:48:56/p
                    p描述一段浪漫唯美的苦恋：深谙泳技的渔村少女，某日在偶然间，救起溺水的富家公子，后来富家公子被救活而离开/p
                /div
            /div
        /li  
        
    /ul
/div

（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）

/body
/html

（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）
展开更多 （50%）
分享

猜你喜欢

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

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

Javascript在IE和FF里的兼容问题

Web开发
Javascript在IE和FF里的兼容问题

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

javascript最短的拖动代码[兼容FF]

Web开发
javascript最短的拖动代码[兼容FF]

兼容IE FF Opera的javascript最短的拖动代码

Web开发
兼容IE FF Opera的javascript最短的拖动代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

鼠标在文本上移动时层的显示与消失

Html CSS布局 Div+CSS XHTML
鼠标在文本上移动时层的显示与消失

一个跟随鼠标的图片放大效果与FF兼容

Web开发
一个跟随鼠标的图片放大效果与FF兼容

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

简述数据库导入Oracle SQL*Loader指南

简述数据库导入Oracle SQL*Loader指南

对C#开发两个基本原则的深入讨论

对C#开发两个基本原则的深入讨论
下拉加载更多内容 ↓