实现像163那样的鼠标延迟感应特性,请教不用层,用table能怎么实现,js高手来拿分吧?

Question

延迟敏感度？不是吧？用记时器可以延迟。。setTimeout,setInterval

Answer 1

可能刚才没说清楚,说简单点吧:
http://www.92ajax.com/Article/ajax/200703/2436.html
就是要实现上面网址的脚本,不过换成表格的形式,不能用层

Answer 2

muxrwc(厕所宣言：信念永不变，追猫永不弃。) 延迟敏感度？不是吧？用记时器可以延迟。。setTimeout,setInterval
就是延迟鼠标敏感度,163不是已经实现了吗,我只不过想把它用表格来实现!!js高手来帮心啦!!谢谢,解决立即给分!!

Answer 3

cloudgamer(欢迎交流qq215754452) 就是那些Tab变换的地方,你鼠标反映要慢些(相对其它网站),你查看源文件就可以看到"增加鼠标延迟感应特性"的那段脚本了.163用的都是层,我现在的页面用的是表格,不知道怎么实现这种效果

Answer 4

muxrwc(厕所宣言：信念永不变，追猫永不弃。)
具体是什么特效？，能截个图，给看看么？
http://community.csdn.net/Expert/topic/5579/5579262.xml?temp=.2986414可能还是没描述得很清楚吧,就是163首页上面的那些Tab,鼠标快速划过的时候不会变,但鼠标放在上面的话才会变,主要是实现了鼠标onMouseOver的延迟功能;各位高手打开源文件找到"增加鼠标延迟感应特性"就知道了;我现在要用表格来实现这种效果,当然不能用简单的setTimeout可以实现的!谢谢!!

Answer 5

能不能给一个可以看的demo，所谓延迟鼠标敏感===setTimeout

Answer 6

你说的效果，可以给一个可以直接观看的demo么？
你给了一个封装的类让改模式这样貌似很麻烦的说。。如果提供一个可以观看的demo，大家可以直接帮你提供或者写出来，基本类似的效果。。
况且你说了若干次“就是163首页上面的那些Tab”这些都是泛指根本不足做为参考。我这里有一个demo你可以看下。。
<script type="text/javascript">
var CMenu = function () {
this.initialize.call(this, arguments);
};CMenu.prototype = {

initialize : function (arg) {
var wc = this, div = wc.div = arg[0];
wc.time = arg[1];
wc.timer = 0;
div.onmouseover = function () {
wc.look(1);
};

div.onmouseout = function () {
wc.look(0);
};
},

show : function (a) {
var wc = this, div = wc.div;
wc.timer = 0;
div.style.height = a ? 80 : 20 + "px";
},

look : function (a) {
var wc = this;
if (wc.timer != 0) {
window.clearTimeout(wc.timer);
wc.timer = 0;
}
wc.timer = window.setTimeout(function () {
wc.show(a);
}, wc.time);
}

};window.onload = function () {
new CMenu(document.getElementById("wc"), 666);
};
</script>
<div id="wc" style="width:200px; height:20px; background-color:#F4F4F4; border:#CCCCCC 1px solid;">&nbsp;</div>

Answer 7

muxrwc(厕所宣言：信念永不变，追猫永不弃。) http://www.92ajax.com/Article/ajax/200703/2436.html
这个就是163上面的那个脚本(当然163上面也可以直接下载下来),不过的这个脚本只能用在163用层表示的Tab上面,我要求的是用我上面的表格(就是发贴的那段)来实现Tab变换(因为我们的主页都是用表格来布局的,没用到层).

Answer 8

我们的网址:
http://220.168.249.237/cdcxy0601/index_business.html看下哟,我现在这个Tab变换太快了,我想实现不要鼠标划过就变的效果(像163那样子变好了),谢谢!!

Answer 9

这个就是从163上面抓下来的那个脚本,里面的Tab都调了startajaxtabs()这个函数:
<script type="text/javascript">
//<![CDATA[
// 163 AJAX Tab 
// update 2006.10.18
// 增加鼠标延迟感应特性。
// update 2006.10.8
// A 标签 href 属性将保持原有HTML功能。增加urn属性为AJAX Load 路径。
// update 2006.10.11
// 修正IE5.0 undefined 未定义错误，增加脚本错误屏蔽
var Browser = new Object();
Browser.isMozilla = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined');
Browser.isIE = window.ActiveXObject ? true : false;
Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);
Browser.isOpera = (navigator.userAgent.toLowerCase().indexOf("opera")!=-1);
if (Browser.isFirefox) { // entend Event Mod for FireFox
extendEventObject();
}
function extendEventObject() {
Event.prototype.__defineGetter__("srcElement", function () {
var node = this.target;
while (node.nodeType != 1) node = node.parentNode;
return node;
}); Event.prototype.__defineGetter__("fromElement", function () {
var node;
if (this.type == "mouseover")
node = this.relatedTarget;
else if (this.type == "mouseout")
node = this.target;
if (!node) return;
while (node.nodeType != 1) node = node.parentNode;
return node;
}); Event.prototype.__defineGetter__("toElement", function () {
var node;
if (this.type == "mouseout")
node = this.relatedTarget;
else if (this.type == "mouseover")
node = this.target;
if (!node) return;
while (node.nodeType != 1) node = node.parentNode;
return node;
});
}
function IsChild(cNode,pNode){
while(cNode!=null){
cNode=cNode.parentNode;
if(cNode==pNode) return true; 
}
return false;
}
var ajccache=new Object();
var waitInterval;
var tempref;
var MouseDelayTime=150;//鼠标感应延迟300毫秒
function getTBprefixName(str,sta){
if(str.indexOf("active")!=-1 || str.indexOf("normal")!=-1) str=str.substr(6);
else if(str.indexOf("over")!=-1) str=str.substr(4);
else str="";
return sta+str;
}
function startajaxtabs(){
for(var i=0;i<arguments.length;i++)
{
var ulobj=document.getElementById(arguments[i]);
ulist=ulobj.getElementsByTagName("li");
for(var j=0;j<ulist.length;j++)
{
var thelist=ulist[j];
if(thelist.parentNode.parentNode!=ulobj) continue;//只有第一层li有效 fixed 2006.9.29
var ulistlink=thelist.getElementsByTagName("a")[0];
var ulistlinkurl=ulistlink.getAttribute("urn");
var ulistlinktarget=ulistlink.getAttribute("rel");
thelist.setActive=function(bactive){
if(bactive){
this.status="active";
this.className=getTBprefixName(this.className,"active");
}else{
this.status="normal";
this.className=getTBprefixName(this.className,"normal");
}
}
thelist.LoadTab=function(){
this.setActive(true);
this.parentNode.parentNode.activetab.setActive(false);
this.parentNode.parentNode.activetab=this;
var ulistlink=this.getElementsByTagName("a")[0];
loadAJAXTab(ulistlink.getAttribute("urn"),ulistlink.getAttribute("rel"));
}
thelist.onmouseover=function(aEvent){
var myEvent = window.event ? window.event : aEvent;
var fm=myEvent.fromElement;
if(IsChild(fm,this) || fm==this) return;//过滤子元素event
if(this.status=="active") return;
tempref=this;
clearTimeout(waitInterval);
waitInterval=window.setTimeout("tempref.LoadTab();",MouseDelayTime);
} thelist.onmouseout=function(aEvent){
var myEvent = window.event ? window.event : aEvent;
var em=myEvent.toElement;
if(IsChild(em,this) || em==this) return; //过滤子元素event
if(this.status=="active") return;
clearTimeout(waitInterval);
} if(ulistlinkurl.indexOf("#default")!=-1){
thelist.setActive(true);
ulobj.activetab=thelist;
ajccache[ulistlinkurl]=getElement(ulistlinktarget).innerHTML;
}else{
thelist.setActive(false);
} }
if(ulobj.activetab==null) ulobj.activetab=ulist[0];
}
}function getXmlhttp()
{
var http_request;

if(window.XMLHttpRequest) { 
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { 
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { 
window.alert("can't create XMLHttpRequest object.");
return null;
}
return http_request;
}function loadAJAXTab(url,contentid){
var ocontent=getElement(contentid);
if(ajccache[url]==null) {
var xhttp=getXmlhttp();
xhttp.onreadystatechange=function(){
if(xhttp.readyState == 4 && (xhttp.status==200 || window.location.href.indexOf("http")==-1))
{
ocontent.innerHTML=xhttp.responseText;
ajccache[url]=ocontent.innerHTML;
}
}
xhttp.open("GET",url,true);
xhttp.send(null);
}else{
ocontent.innerHTML=ajccache[url];
}
}
window.onerror=function(){return true}

Answer 10

今天实在是困呢，我昨天到现在抗了个36。。昂无辜的我被游戏吸引的说CODE。。
<script type="text/javascript">
var CMenu = function () {
this.initialize.call(this, arguments);
};CMenu.prototype = {

initialize : function (arg) {
var wc = this;
wc.time = arg[0];
wc.timer = 0;
wc.now = null;
},

show : function (div) {
var wc = this;
wc.timer = 0;
if (wc.now) wc.now.style.height = "20px";
div.style.height = "40px";
wc.now = div;
},

look : function (div, a) {
var wc = this;
if (wc.timer != 0) {
window.clearTimeout(wc.timer);
wc.timer = 0;
}
wc.timer = window.setTimeout(function () {
wc.show(div);
}, wc.time);
},

add : function (div) {
var wc = this;
div.onmouseover = function () {
wc.look(div);
};
}

};window.onload = function () {
var wc = new CMenu(260);
wc.add(document.getElementById("wc1"));
wc.add(document.getElementById("wc2"));
wc.add(document.getElementById("wc3"));
wc.add(document.getElementById("wc4"));
wc.add(document.getElementById("wc5"));
wc.add(document.getElementById("wc6"));
wc = null;
};
</script>
<span id="wc1" style="width:80px; height:20px; background-color:#F4F4F4; border:#CCCCCC 1px solid;">&nbsp;</span>
&nbsp;
<span id="wc2" style="width:80px; height:20px; background-color:#F4F4F4; border:#CCCCCC 1px solid;">&nbsp;</span>
&nbsp;
<span id="wc3" style="width:80px; height:20px; background-color:#F4F4F4; border:#CCCCCC 1px solid;">&nbsp;</span>
&nbsp;
<span id="wc4" style="width:80px; height:20px; background-color:#F4F4F4; border:#CCCCCC 1px solid;">&nbsp;</span>
&nbsp;
<span id="wc5" style="width:80px; height:20px; background-color:#F4F4F4; border:#CCCCCC 1px solid;">&nbsp;</span>
&nbsp;
<span id="wc6" style="width:80px; height:20px; background-color:#F4F4F4; border:#CCCCCC 1px solid;">&nbsp;</span>

Answer 11

它那个类带ajax信息读取什么的。。你的那个又不需要那功能，所以写个简单点的比较好。

Answer 12

<script>
var req = null;
function processReqChange() { ... }
function loadUrl( url ) { ...  }var seachTimer = null;
function runSearch()
{
  if ( seachTimer != null )
    window.clearTimeout( seachTimer );
  seachTimer = window.setTimeout( function() {
    loadUrl( 'antipat1_content.html?s='+searchText.value );
    seachTimer = null;
   }, 1000 );
}
</script><input id="searchText" type="text" onkeyup="runSearch()">这个是用setTimeout做的差不多的效果
参考

Answer 13

waitInterval=window.setTimeout("tempref.LoadTab();",MouseDelayTime);你提供的163的代码
不就是用setTimeout嘛

Answer 14

muxrwc(厕所宣言：信念永不变，追猫永不弃。) 老大,不好意思,你那个功能其实还是类似于settimeout(我说的是鼠标停在Tab上少于2秒钟之内不会触发,而多于2秒才会触发;而不是让它等2秒触发)!!你可以试下163上面的那些Tab:
鼠标快速划过的时候不会变,放上去才会变(触发的条件是由时间决定的),这个是与settimeout完全不同的.var MouseDelayTime=150;//鼠标感应延迟300毫秒控制是鼠标在Tab上比原来的敏感度延迟300毫秒!!

Answer 15

哎,可能是我表达有问题:这样说大家能理解不?:鼠标停在Tab上少于2秒钟之内不会触发事件,而多于2秒才会触发;
而不是让Tab等2秒触发;
大家看这个功能能实现不(163已经实现了,大家可以试下看,Tab上面鼠标快速划过的时候不会变,停在上面才会变)?

Answer 16

昂，基本类似。如果是鼠标放上坚持若干ms，你可以给它在加一个onmouseout方法。用来清除记时器。。<script type="text/javascript">
var CMenu = function () {
//滑动效果
this.initialize.call(this, arguments);
};CMenu.prototype = { initialize : function (arg) {
//初始化参数
var wc = this;
wc.time = arg[0]; //初始化滑动延迟时间
wc.timer = 0; //初始化记时器存储变量
wc.now = null; //初始化当前目标成员
},

show : function (div) {
//设置选中成员
var wc = this;
wc.timer = 0; //清空记时器
if (wc.now) wc.now.style.height = "20px";
div.style.height = "40px";
wc.now = div; //给选中成员重新付值
},

look : function (div, a) {
//延迟控制
var wc = this;

if (wc.timer != 0) window.clearTimeout(wc.timer); //如果有记时器清除

wc.timer = window.setTimeout(function () { //重新设置记时器
wc.show(div); //到时间显示
}, wc.time);
},

add : function (div) {
//添加成员
var wc = this;
div.onmouseover = function () {
//覆盖鼠标经过函数
wc.look(div);
};
div.onmouseout = function () {
//覆盖鼠标移开函数
if (wc.timer) window.clearTimeout(wc.timer);
};
}

};window.onload = function () {
var wc = new CMenu(260);
wc.add(document.getElementById("wc1"));
wc.add(document.getElementById("wc2"));
wc.add(document.getElementById("wc3"));
wc.add(document.getElementById("wc4"));
wc.add(document.getElementById("wc5"));
wc.add(document.getElementById("wc6"));
wc = null;
};
</script>
<span id="wc1" style="width:80px; height:20px; background-color:#F4F4F4; border:#CCCCCC 1px solid;">&nbsp;</span>
&nbsp;
<span id="wc2" style="width:80px; height:20px; background-color:#F4F4F4; border:#CCCCCC 1px solid;">&nbsp;</span>
&nbsp;
<span id="wc3" style="width:80px; height:20px; background-color:#F4F4F4; border:#CCCCCC 1px solid;">&nbsp;</span>
&nbsp;
<span id="wc4" style="width:80px; height:20px; background-color:#F4F4F4; border:#CCCCCC 1px solid;">&nbsp;</span>
&nbsp;
<span id="wc5" style="width:80px; height:20px; background-color:#F4F4F4; border:#CCCCCC 1px solid;">&nbsp;</span>
&nbsp;
<span id="wc6" style="width:80px; height:20px; background-color:#F4F4F4; border:#CCCCCC 1px solid;">&nbsp;</span>

Answer 17

谢谢muxrwc(厕所宣言：信念永不变，追猫永不弃。),终于实现了,非常感谢!!

Answer 18

真不明白
163明明用的就是setTimeout
//鼠标感应延迟300毫秒
只是实现的结果
lz还是好好看看代码吧

Answer 19

<span>aaaaa</span> <span id="aa">bbbbb</span> <span>aaaaa</span>
<div id="bb" style="display:none;">22222222</div>
<script type="text/javascript">
var aa = document.getElementById("aa");
var bb = document.getElementById("bb");
aa.onmouseover = function () {
    aa.c = setTimeout(function () {
        bb.style.display = "block";
    }, 300)
}
aa.onmouseout = function () {
    clearTimeout(aa.c)
    bb.style.display = "none";
}
</script>