分别用JavaScript和jQuery写了滑动效果的网站提示。
用jQuery很简单,用 animate() 方法就可以了。
用JavaScript稍微复杂一点,需要用到定时器实现动画效果,并且要考虑到鼠标多次移入“提示”时会开启多个定时器,则要清除定时器的情况。
效果如图:
收起时: 展开时:
HTML:
<div id="cue-hide"><span id="cue-show">小贴士 </span><p>用JavaScript和jQuery分别写滑动效果的网站提示。</p></div>
JavaScript:
/*JavaScript*/
window.onload=function(){
var cdiv=document.getElementById("cue-hide");
cdiv.onmouseover=function(){
cueshow();
};
cdiv.onmouseout=function(){
cuehide();
};
}
var timer=null;
function cueshow(){
clearInterval(timer);
var cdiv=document.getElementById("cue-hide");
timer=setInterval(function(){
if(cdiv.offsetLeft==0){
clearInterval(timer);
}else{
cdiv.style.left = cdiv.offsetLeft+25+'px';
}
},50);
};
function cuehide(){
clearInterval(timer);
var cdiv=document.getElementById("cue-hide");
timer=setInterval(function(){
if(cdiv.offsetLeft==-200){
clearInterval(timer);
}else{
cdiv.style.left = cdiv.offsetLeft-25+'px';
}
},50);
};
jQuery:
$(document).ready(function(){
$("#cue-hide").mouseenter(function(){
$("#cue-hide").animate({left:"0px"},"slow");
});
$("#cue-hide").mouseleave(function(){
$("#cue-hide").animate({left:"-200px"},"slow");
});
});