今天我们用JQuery来实现鼠标悬停触发事件
完成效果:鼠标移动到控件上则触发一个效果(弹窗、显示图片等),鼠标移开则消失;
使用的对象:JQuery对象
详解:hover方法,在JQuery中被区分为事件,
$('#Llink').hover([over,]out):
over:鼠标移到元素上要触发的函数(可选);out:鼠标移出元素要触发的函数
over和out是两个函数名,也可以用匿名函数方法:
$('#Llink').hover(function(){...},function(){...});
如果over缺省:out 描述:hover()方法通过绑定变量"handlerInOut"来切换方法:$("td").bind("mouseenter mouseleave",handlerInOut);$("td").hover(handlerInOut);
代码实现:
<script type="text/javascript">
$('doocument').ready(function(){
function showImage () {
$('#imgDiv').css('display','block');
$('#img').attr('src','day/gem2.png');
}
function hideImage () {
$('#imgDiv').css('display','none');
$('#img').attr('src','');
}
$('#aLink').hover(showImage,hideImage);
});
</script>
<body>
<a href="javascript:void(0);" id="aLink">浏览</a>
<div id="imgDiv" style="display:none">
<img id="img" border="0" src="" ></img>
</div>
</body>
代码解释:$('doocument').ready(function(){...});作用是在html页面全部加载完成后才执行js代码,此处我们的触发事件要等到html加载完成后才有作用;
除了以上方法,还可以直接吧<script></script>块插入到html代码后面(不要这么写,尽量将script块写在head里);
JQuery对象设置样式时,会屏蔽各浏览器的差别,通过使用$('#id').css(name,value)可以直接修改控件的style样式属性;
<div id="imgDiv" style="display:none">
<img id="img" border="0" src="" ></img>
</div>
悬停触发效果的对象是“浏览”这个连接字符串,在这里我们将href连接置空(javascript:void(0);点击后什么都不做)
首先要获取JQuery对象$('#aLink');
图片被放在display属性为none的div块中,且src路径为空,即初始状态图片不会显示;
然后触发显示函数中 $('#imgDiv').css('display','block');使div块变为可见,再通过$('#img').attr('src','day/gem2.png');来追加src的内容为图片路径;
此函数完成后,图片控件即成为有文件路径的、并且可见的控件;
当鼠标移开时触发隐藏函数:用$('#imgDiv').css('display','none');重新将div置为不可见;
并且用$('#img').attr('src','');将路径置空(因为下次悬停又需要追加路径,如果不置空则会出错);
如果我们用原生JavaScript来实现相同的功能,则代码修改为:
showImage函数中改为
var imgDiv = document.getElementById('imgDiv');
imgDiv.style.display = 'block';//设置imgDiv为可见
var imgObj = document.getElementById('img');
imgObj.src = 'day/gem2.png';//在imgObj加入一个图片
hideImage函数中改为
var imgDiv = //document.getElementById('imgDiv');
imgDiv.style.display = 'none';//设置imgDiv为可见
var imgObj = document.getElementById('img');
imgObj.src = '';//图片路径置空