JQuery教程弹出层效果

层叠效果
特别喜欢jquery的广告语,write less,do more作为一个seo多小懂点js,而jquery却是js优秀的库之一,易学能迅速解决我们入门并使用,下面是自己的学习笔记,代码使用理解!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹出层效果</title>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>  //引入jquery库
<script type="text/javascript" src="js/jquery.easydrag.handler.beta2.js"></script>   
<script type="text/javascript">

$(document).ready(function(){         //可简写为($(function(){})),效果一样,这样就可以把js写在body标签前

	$('.one').click(function(){   //click事件
		
		$('.box').show();         //show展示
		
		
		});
		
		
	$('span').click(function(){
		
		
		$('.box').hide();       //hide隐藏
		
		
		});


	$('.box_all').easydrag();    //使弹出框可拖动
		
	
	});



</script>
<style type="text/css">                //css部分
* { padding:0; margin:0; }

body { font-size:12px; padding:100px; }


.box_all { float:left; padding:5px; background:#eee; position:absolute; top:30%; left:30%;}

.box { width:500px; border:1px solid #4c7ebd; display:none; }

.box h1 { height:30px; line-height:30px; color:#fff; font-size:14px; background:#87b0e1; padding-left:10px; }

.box span { float:right; padding-right:10px; cursor:pointer;}

.box span a { display:block; height:30px; width:30px; background:url(img/close.jpg) no-repeat; text-indent:-9999px;}

.box span a:hover { background:url(img/close_hover.jpg) no-repeat;}

.box p { padding:10px; height:400px; background:#fff; border:3px solid #eee; }

.one { display:block;}


</style>
</head>

<body>
<a href="#" class="one">蔸雨SEO</a><br />
<input type="submit" class="one" value="蔸雨SEO" />
<br />
<input type="text" class="one" value="蔸雨SEO" />
<div class="box_all">
  <div class="box">
    <h1><span><a href="#">关闭</a></span>标题</h1>
    <p>内容</p>
  </div>
</div>
</body>
</html>

代码参考来自于后盾网,百度搜索【后盾网】,你就知道!

发表评论

电子邮件地址不会被公开。