站长之家

网上有一个很旧的代码，只能兼容IE。并且不符合W3C标准。所以也只能在IE下使用。

现在上的是一个兼容IE和FX，符合W3C标准，适用于所有浏览器。绝对原创，版权不限制，可以任意复制、传播、使用。但要注明 引用自“落伍者论坛”。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

技术难点一： 如何控制 EVENT

技术难点二：如何占用最小的本地CPU资源，使网页平稳、流畅显示。

技术难点三：兼容目前的浏览器，并可作更多的扩展应用。

技术难点四：优化使用主动模式。
（什么是主动模式？主动模式就是程序主动去获取达到要求的TITLE标签，自动生成。与传统的区别是主动模式不需要在HTML页面中对每个TITLE都增加 JAVASCRIPT语句。例如 showtitle(event) 也不需要增加 on事件，例如 onmouseover onmouseout 等。）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
为什么要优化TITLE ?

一、传统TITLE显示有延时，而优化后可以马上显示。

二、传统TITLE只能普通普通文本，而优化后TITLE可以含有HTML标签，包括超链和贴图。

三、传统模式的界面依赖浏览器默认，优化后可以通过CSS进行任何美化工作。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
扩展一：

增加鼠标位置智能识别。不需要使用on事件（onmouseover onmouseout），使鼠标移出TITLE后，TITLE不会马上消失，这样的好处是TITLE里面的超链可以对击。

源代码：（HTML部分）

其中大家看到只需要在BODY 上增加一个onmousemove=”mk_title_display_by_css();

而HTML下，TITLE只是很简洁，没有任何JS语句。

下面说说JS部分：

//////////////////////////////优化TITLE显示////////////////////////////<br /> var stitle = ”;<br /> var objx;<br /> var objy;<br /> var mousex=0;<br /> var mousey=0;<br /> var tmp_filename = ”;<br /> var title_arr = new Array();<br /> document.write(“<div id=\”mk_title_display_by_css\” style=\”position:absolute;z-index:1000;color:#000;background-color:#fff;border:1px #000 solid;font-size: 12px;padding:4px;display:none;\”></div>”);    <br /> function mk_title_display_by_css(){<br />         var theEvent = window.event || arguments.callee.caller.arguments[0];<br />         var src = theEvent.target || theEvent.srcElement;<br />         objx = parseInt(theEvent.clientX +10);<br />         objy = theEvent.clientY;<br />         if(src.title!=null && src.title!=”"){<br />                 stitle=src.title;<br />                 /*<br />                 src.title = ”;<br />                 tmp_filename = stitle.lastIndexOf(‘/’);<br />                 if (title_arr[src]!=null && title_arr[src]!=”){<br />                         title_arr[src] = src.title;<br />                         N(‘mouse_x’,' arr= ’ + tmp_filename );<br />                 }else{<br />                         N(‘mouse_x’,' src= ’ + tmp_filename );<br />                 }<br />                 */<br />                 mousex = theEvent.clientX;<br />                 mousey = theEvent.clientY;<br />                 D(‘mk_title_display_by_css’,'block’);<br />                 F(‘mk_title_display_by_css’,70);<br />                 G(‘mk_title_display_by_css’).style.left = objx + ’px’;<br />                 G(‘mk_title_display_by_css’).style.top = objy + ’px’;<br />                 N(‘mk_title_display_by_css’,stitle);<br />         }else{<br />         }<br />                 <br />         if (Math.abs(theEvent.clientX - mousex)>90 || Math.abs(theEvent.clientY - mousey)>90 ){<br />                 D(‘mk_title_display_by_css’,'none’);<br />         }<br /> }</p> <p>////////////////////////////////////////////////////////////////////////1、
JS部分相当简单，原理是建立一个DIV ，并将ID指定为 mk_title_display_by_css ，并用CSS进行一些必要美化。

2、
通过 theEvent = window.event || arguments.callee.caller.arguments[0]; 语句，进行IE和FX的识别。

3、
src = theEvent.target || theEvent.srcElement; 前者是FX，后者是IE。这种写法在FX和IE的DEBUG模式下都不会报错。

4、
stitle=src.title; 获取所有当前页面的TITLE标签里的内容。并将内容重写入DIV里面，这样就可以在TITLE里贴图和放超链了。

5、
为了程序的简洁和重复。使用了本人原创的缩写方法。请查阅：引用:
获得当前ID的缩写（相当于prototype 中的 $() ，使用G能有效防止PHP模版中，带有美元号产生与一些常用模版系统不兼容
）

G()

将内容显示在指定的ID上。VALUE和HTML均可。

N(objid, msg, revtype)

显示，隐藏指定ID

D(objid,dtype)

更改当前ID的CLASS样式。整段样式替换，而不是样式中每一个定义替换。

CC(objid,classname)

DEBUG 用的，返回指定对象的值和属性。

$E(the_message)

透明化指定ID，自动识别IE,MOZ,OPERA，兼容CSS 3.0SSS标准。

F(objid,opacity)详细可以点击浏览：
一个功能强大的JS类，体积小巧，实现功能多多
这个类，体积小巧。但是功能强大。能实现各种常用的功能。

本类是原创类，版权所有！！你可以免费使用，传播，发布，请保留版权信息。

完美支持各种浏览器IE,MOZ,FOX,OPERA等等。

这个类最大的好处，就是简化HTML页面。一个复杂的应用，仅需要几句语句的组合调用即可。

1、AJAX

AAL(method, url, asynchronous, waitid, returnid, returntype, loading, revtype)

2、获得当前ID的缩写（相当于prototype 中的 $() ，使用G能有效防止PHP模版中，带有美元号产生与一些常用模版系统不兼容）

G()

3、将内容显示在指定的ID上。VALUE和HTML均可。

N(objid, msg, revtype)

4、显示，隐藏指定ID

D(objid,dtype)

5、更改当前ID的CLASS样式。整段样式替换，而不是样式中每一个定义替换。

CC(objid,classname)

6、DEBUG 用的，返回指定对象的值和属性。

$E(the_message)

7、透明化指定ID，自动识别IE,MOZ,OPERA，兼容CSS 3.0SSS标准。

F(objid,opacity)

8、返回鼠标当前坐标，用于在鼠标当前位置显示特定ID的后续应用

MM(event)

9、指定ID在当前网页的坐标，用于在表单，提示内容旁弹出菜单。

PP(objid,objid2)

10、在页面生成一个新对象，可以是DIV,P,IFRAME。能实现JS的各种高级应用。

CE = function(t, a, y, x)

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
放在HTML内，或者SRC外部调用均可

<script type=”text/javascript”><br /> //小文龙 （xwl@qq.com） 版权所有  不去除此引说明可以免费使用、传播、复制，重发布。</p> <p>var P = {<br />   V: ’0.0.5_alpha’,<br />   B: {<br />     IE:     !!(window.attachEvent && !window.opera),<br />         Opera:  !!window.opera,<br />         Gecko:  navigator.userAgent.indexOf(‘Gecko’) > -1 && navigator.userAgent.indexOf(‘KHTML’) == -1<br />   },<br />   I: IMGDIR + ’./img/’,<br />   OC: ’olddata’,<br />   NC: ’newdata’,<br />   X: 0,<br />   Y: 0<br /> };</p> <p>////////////////////////////////////////////////////////////////////////////////<br /> var A = new Object;<br /> var A = {<br />         waitid: ”,<br />         returnid: ”,<br />         daily: ’1000′,<br />         loading: ’loadding…’<br /> }<br /> ///////////////////////////////////////////////////////////////////////////////<br /> A.C = function (){<br />         var request = false;<br />       if(window.XMLHttpRequest){<br />           return  new XMLHttpRequest();<br />           } else if(window.ActiveXObject){<br />                   var xmlHttp_link  = false;<br />                         var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLDOM', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'Msxml2.XMLHTTP'];<br />                 if(!xmlHttp_link){<br />                         for(var i=0;i<versions.length;i++){<br />                                 try{<br />                                         new ActiveXObject(versions);<br />                                         xmlHttp_link = versions;<br />                                         break;<br />                                 }catch(oError){;}<br />                         }<br />                                                 //FOR END<br />                 }<br />                                 //IF END<br />                 if(xmlHttp_link){<br />                         return new ActiveXObject(xmlHttp_link);<br />                 }<br />           } <br /> }</p> <p>A.C = A.C();<br /> ////////////////////////////////////<br /> A.H = function(){<br /> var data;<br />                 if(A.C.readyState == 4 && A.C.status == 200) {<br />                         if (A.returntype ==’HTML’){<br />                                 data =A.C.responseText;<br />                         }else if (A.returntype <br /> == ’XML’){<br />                                 data =A.C.responseXml;                <br />                         }else {<br />                                 data = ’error’ ;<br />                         }<br />                         A.returndata = data;<br />                         A.U();<br />                 }else{<br />                         A.S();<br />                 }<br /> }<br /> /////////////////////////////////<br /> A.S = function() {        <br />                 if(A.waitid && (A.C.readyState != 4 || A.C.status != 200)) {<br />                         N(A.waitid, ’<span><img src=”‘ + P.I + ’/loading.gif” alt=”loading”> ’ + A.loading + ’</span>’);<br />                 }<br />         }<br /> ////////////////////////////////<br /> A.L = function(method, url, asynchronous){<br />                 if (A.waitid){D(A.waitid,’block’);A.S();}<br />                 if (A.returnid){CC(A.returnid, P.NC);}        <br />                 A.C.open(method, url, asynchronous);<br />                 if(method==”post”)A.C.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);<br />                 A.C.send(method==’post’? url:null);<br />                 A.C.onreadystatechange = A.H;<br /> }<br /> ///////////////////////////////////<br /> A.U = function (){<br />                 if (A.waitid){setTimeout(function(){D(A.waitid,’none’);},A.daily);}<br />                 if (A.returnid){setTimeout(function(){CC(A.returnid, P.OC);N(A.returnid, A.returndata, A.revtype);},A.daily);}        <br />         <br /> }<br /> /////////////////////////////////////////////////////////////////////////////////<br /> function AAL(method, url, asynchronous, waitid, returnid, returntype, loading, revtype){<br />         method = method == ’post’ ? ’post’ : ’get’;<br />         asynchronous = asynchronous ==’true’ ? ’true’ : ’fales’;<br />         A.revtype = revtype ? revtype : ’HTML’ ; // innerHTML OR value <br />         A.returntype = returntype ? returntype : ’HTML’; // responseHTML OR responseXML<br />         A.loading = loading ? loading : A.loading;<br />         A.waitid = waitid ? waitid : A.waitid;<br />         A.returnid = returnid ? returnid : A.returnid;<br />         return A.L(method, url, asynchronous);<br />         /*<br />         if (method==’get’){<br />                 return A.L.GET(url, asynchronous);<br />         }else{<br />                 return A.L.POST(url, asynchronous);<br />         }<br />         */<br /> }<br /> ////////////////////////////////////////////////////////////////////////////////</p> <p>/////////////////////////////////////////////////////////////////////////////////<br /> function G() {<br />         var elements = new Array();<br />         var arr = arguments.length;<br />         for (var i = 0; i < arr; i++) {<br />     var element = arguments;<br />                 if (typeof element == ’string’) element = document.getElementById(element);<br />                 if (arr == 1) return element;<br />             elements.push(element);<br />         }<br /> return elements;<br /> }<br /> /////////////////////////////////////////////////////////////////////////////////<br /> function N(objid, msg, revtype){<br />         //innerHTML  objid,msg<br />         var msg = msg;<br />         //if (msg ==” || msg == undefined || typeof(msg) == ’undefined’){<br />                 //D(objid,’none’);<br />                 //msg = ”;<br />         //}<br />         if (revtype ==” || revtype == undefined || typeof(revtype) == ’undefined’ || revtype == ’HTML’){<br />                 G(objid).innerHTML = msg ;<br />         }else{<br />                 G(objid).value = msg ;<br />    &nbsp<br /> ;    }<br />         <br /> }<br /> ////////////////////////////////////////////////////////////////////////////////<br /> function D(objid,dtype){<br />         if (dtype == ’block’){<br />                 G(objid).style.display = ’block’;<br />         }else if (dtype==’none’){<br />                 G(objid).style.display = ’none’;<br />         }else {<br />                 G(objid).style.display = (G(objid).style.display == ” || G(objid).style.display == ’block’) ? ’none’ : ’block’;<br />         }<br /> }<br /> ////////////////////////////////////////////////////////////////////////////////<br /> function CC(objid,classname){<br />         G(objid).className = classname;<br /> }<br /> ////////////////////////////////////////////////////////////<br /> function $E(the_message){<br />                         alert(“|type=” + typeof the_message + ”\n\n|data=” + the_message);<br /> }<br /> ///////////////////////////////////////////////////////////////////////////////<br /> function F(objid,opacity){<br />         if (opacity>100 || opacity<10){<br />                 opacity = 30;<br />         }<br />         if (P.B.IE == true){<br />                 G(objid).style.filter = ’alpha(opacity=’ + opacity + ’)'; //IE<br />         }else if(P.B.Opera == true){<br />                 G(objid).style.opacity = (opacity/100); //OPERA AND CSS 3<br />         }else if(P.B.Gecko == true){<br />                 G(objid).style.MozOpacity = (opacity/100);//FX<br />         }else{<br />                 return false;<br />         }<br /> }<br /> //////////////////////////////////////////////////////////////////////////////<br /> function PP(objid,objid2){<br />         var ttop = G(objid).offsetTop;        //TT控件的定位点高<br />         var tleft = G(objid).offsetLeft;        //TT控件的定位点宽<br />         var thei = G(objid).clientHeight;        //TT控件本身的高<br />         alert(ttop +’ - ’+ thei +’ = ’+ tleft);<br />         G(objid2).style.left  =tleft;<br />         G(objid2).style.top=ttop+thei+10;<br /> }</p> <p>function MM(event){<br /> var mouse_x;<br /> var mouse_y;<br /> var xx;<br /> var yy;<br />         if (self.pageYOffset || self.pageXOffset) { <br />                 yy = self.pageYOffset; <br />                 xx = self.pageXOffset; <br />         } else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft ){<br />         // Explorer 6 Strict <br />                 yy = document.documentElement.scrollTop; <br />                 xx = document.documentElement.scrollLeft; <br />         } else if (document.body) {<br />         // all other Explorers <br />                 yy = document.body.scrollTop; <br />                 xx = document.body.scrollLeft; <br />         } <br />         if (P.B.IE){<br />                 mouse_x = window.event.clientX;<br />                 mouse_y = window.event.clientY;<br />         }else{<br />                 mouse_x = event.clientX;<br />                 mouse_y = event.clientY;<br />         }<br /> P.X = parseInt(xx + mouse_x + 10);<br /> P.Y = parseInt(yy + mouse_y + 10);<br /> //alert(‘ x= ’+ mouse_x +’ y= ’+mouse_y);<br /> }</p> <p>//var CE = new Object;<br /> CE = function(t, a, y, x) {<br />         var e = document.createElement(t);<br />         if (a) {<br />                 for (var k in a) {<br />                         if (k == ’class’) e.className = a[k];<br />                         else if (k == ’id’) e.id = a[k];<br />                         else e.setAttribute(k, a[k]);<br />                 }<br />         }<br />         if (y) { for (var k in y) e.style[k] = y[k]; }<br />         if (x) { e.appendChild(document.createTextNode(x)); }<br />         return e;<br /> }<br /> /*<br /> 调用形式，可以创建iframe,div,p等，要注意有些属性并不适合某些对象。<br /> var newElement = CE(‘div’, <br />     {‘class’: ’newDivClass’, id: ’newDiv’, name: ’newDivName’},<br />     {width:&<br /> nbsp;’300px’, height:’200px’, margin:’0 auto’, border:’1px solid #DDD’},<br />     ’這是存在於在新建立標籤 div 中的文字。’);</p> <p>        newElement.src=’test.htm’; //如果不能直接调用，使用外部赋值<br />         newElement.style.display =’block’; //同上<br />         G(‘ajax_cart’).appendChild(newElement); //创建的对象显示。将属性追加到前面的ID对象。<br /> */<br /> </script>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
全文完。

因为是HTML+JS 所以直接另存为就可以演示，就没必要再贴个网址放演示了。