【实例名称】
checkbox鼠标移入移出的特效
【实例描述】
当鼠标移动到复选框时,复选框背景色会发生改变;当鼠标移走时,复选框恢复原来的颜色.这就是本例的特效。
【实例代码】
var node;
var inited=false;
var init=function() //初始化方法
{
node=document.getElementById("chk1"); //找到页面中的checkbox控件
inited=true;
}
var check_over=function() //鼠标移入事件绑定的方法
{
if(!inited)
return;
node.style.borderStyle="solid"; //设置边框
node.style.borderColor="#FFCC00"; //设置边框颜色
node.style.backgroundColor="#EEEEEE"; //设置背景色
}
var check_out=function() //鼠标移入事件绑定的方法
{
node.style.borderStyle="none"; //设置边框
node.style.borderColor="#FFFFFF"; //设置边框颜色-白色
node.style.backgroundColor="#FFFFFF"; //设置背景色
}
οnmοuseοut="check_out()" />把鼠标移过来
【运行效果】
【难点剖析】
本例的重点是checkbox控件的“onmouseover”事件和“onmouseout”事件。“onmouseover”事件绑定的是“check—over”方法,此方法改变了checkbox的边框样式、边框颜色和背景色。“onmouseout”事件表示鼠标移走时的触发事件,其绑定了“check—out”方法,用来取消所有的特效设置。
【源码下载】