可展开收起效果的网站提示框

本文主要是介绍可展开收起效果的网站提示框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

分别用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"); });
});

 

这篇关于可展开收起效果的网站提示框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---