jQuery弹出层

来源:https://www.sucaihuo.com/js/859.html 2016-06-01 15:38浏览(1250) 收藏

jquery弹出层特效制作一个类似flash动画效果的弹出层特效,鼠标点击按钮弹出一个带动画animate效果的浮动弹出层。jquery下载。
jQuery弹出层
分类:悬浮层/弹出层 > 弹窗 难易:初级
查看演示 下载资源 下载积分: 20 积分

载入js

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	$(".showdiv").click(function(){
	
		var box =300;
		
		var th= $(window).scrollTop()+$(window).height()/1.6-box;
		
		var h =document.body.clientHeight;
		
		var rw =$(window).width()/2-box;
		
		$(".showbox").animate({top:th,opacity:'show',width:600,height:340,right:rw},500);
		
		$("body").prepend("<div class='mask'></div>");
		
		$(".mask").css({opacity:"0.5"}).css("height",h);
		
		return false;
		
	});
	
	$(".showbox .close").click(function(){
	
		$(this).parents(".showbox").animate({top:0,opacity: 'hide',width:0,height:0,right:0},500);
		
		$(".mask").fadeOut("fast");
		
	});
	
});
</script>

html

<div class="showbox"> <h2>jquery 浮动层、弹出层<a class="close" href="#">关闭</a></h2> <div class="mainlist"> <ul> <li><span>▪</span><a href="http://www.sucaihuo.com/" target="_blank">用jquery特效制作左侧侧边浮动导航菜单滑动显示或隐藏</a></li> <li><span>▪</span><a href="http://www.sucaihuo.com/" target="_blank">jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器</a></li> </ul> </div> </div>

评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2