当前位置:学会吧培训频道电脑知识学习网页制作Javascript教程javascript-鼠标在焦点时移动位置(兼容FF)» 正文

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

[08-08 00:41:31]   来源:http://www.xuehuiba.com  Javascript教程   阅读:8339
概要:程序代码<!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; }bo
javascript-鼠标在焦点时移动位置(兼容FF),标签:javascript视频教程,javascript教程下载,http://www.xuehuiba.com

程序代码
<!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

[1] [2] [3] [4]  下一页


Tag:Javascript教程javascript视频教程,javascript教程下载电脑知识学习 - 网页制作 - Javascript教程
Copyright 学会吧 All Right Reserved.
在线学习社区!--学会吧
1 2 3 4 5 6 7 7 8 9 10 11 12 13