
这个问题牵扯到js的闭包,一直没时间看,js中的临时变量大致意思感觉有点类似于java中得静态变量吧。。别喷我,这块东西真没看。
你这么绑定,如果想达到你的效果,就得把那个i这个临时变量跟每个li对象绑一块使用,也就是function1的参数num 最好跟你的li有关系,比如说num是每个li的id
就可以这么写
for(var i=0;i<listlength;i++){
list[i]onmouseover=function(){function1(thisid);}
}
单独使用临时变量i 貌似没办法解决。
第一:js进行鼠标悬停事件来处理DOM实际上是不合理的。对于界面交互上能通过css处理的事件就不要用js来处理;
第二:恰好css对于鼠标悬停是有对应的选择器及其处理;
处理方法:如图A:
假设A的id为a,css代码如下:
#a{width:100px;
height:36px;
float:left;
}
//对于位置的固定可以自行选择处理,当前用float固定。
#a:hover{
width:200px
}
结果将会如你图中所需要的完成。
如必须用JS处理的话,代码如下:
//既定a的样式已明确://html代码:
<span id='a' onmouseover="fc1(this)"
onmouseout="fc2(this)"></span>
<script>
function fc1(node){
nodestylewidth = '200px';
}
function fc2(node){
nodestylewidth = '100px';
}
</script>
<div id="left"> 学校要闻。。。<div>
<div id="right" style='display:none'> 学校要闻信息内容 </div>
Jquery 写法:
$('#left')on('onmouseover', function(){ //绑定onmouseover 事件
$('#right')css('display','block'); //显示右边子菜单
} );
$('#left')on('onmouseout', function(){ //绑定onmouseout 事件
$('#right')css('display','none'); //鼠标移出后设置为隐藏
}
绑定onmouseover事件的同时也要绑定onmouseout 不然就会一直显示
css 那部分你可以用自己设定的 这里我用display none只是做个例子
假设定义所有div的onmouseover事件触发的函数为:
function overFn(){
// do Something
}
则有以下办法可以在overFn获知事件是哪个div触发的:
1、函数定义修改:
function overFn(obj){
//obj这参数就是事件源的div
}
在html中,你应该这样来传递obj:
<div onmouseover="overFn(this)">this就代表了当前div</div>
<div onmouseover="overFn(this)">每一个div都只需要传递this</div>
2、同样修改函数定义:
function overFn(e){
// e表示的是鼠标经过事件本身
// 考虑兼容性获取事件源div
// obj就是取得的事件源,也就是发生鼠标经过事件的div
var obj = etarget || windoweventsrcElement;
}
在html中,你应该这样传递事件:
<div onmouseover="overFn(event)">event就表示发生的事件,它会携带很多信息,方便你在函数中使用</div>
<div onmouseover="overFn(event)">每一个div都只需要传递event,不要传别的</div>
大家好,我是IT修真院北京分院第22期的学员杨纲,一枚正直纯洁善良的WEB前端程序员。
1背景介绍
什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写。 DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 在 HTML DOM中,所有事物都是节点。DOM 是被视为节点树的 HTML。
2知识剖析
1什么是DOM节点 HTML 文档中的所有内容都是节点 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点。 >
你试一下下面的案例就明白了,这是最简单的用法
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>测试案例</title>
<script>
function bigImg(x){
xstyleheight="64px";
xstylewidth="64px";
}
function normalImg(x){
xstyleheight="32px";
xstylewidth="32px";
}
</script>
</head>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smileygif" alt="Smiley" width="32" height="32">
<p>函数 bigImg() 在鼠标指针移动到笑脸是触发。</p>
<p>函数 normalImg() 在鼠标指针移出笑脸是触发</p>
</body>
</html>
以上就是关于js循环调用方法的问题,求解!!!全部的内容,包括:js循环调用方法的问题,求解!!!、js鼠标悬停事件、javascript问题,实现菜单的展开,onmouseover事件等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)