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

最新推荐文章于 2025-03-17 11:29:06 发布

原创最新推荐文章于 2025-03-17 11:29:06 发布 · 597 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #jQuery #提示 #滑动 #定时器

日常练习--前端小效果专栏收录该内容

19 篇文章

订阅专栏

本文介绍了使用JavaScript和jQuery实现网站提示滑动效果的方法。通过具体代码示例，展示了如何利用定时器和animate()方法控制元素的左移动画，实现提示框的显示与隐藏。

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