分享Js弹出框代码，头像选择工具. -

362217990

浏览: 51717 次
性别:
来自: 湖南

最近访客更多访客>>

jveqi

YJ198910

NoMoneyException

kjw12345

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

分享Js弹出框代码，头像选择工具.

JavaScript jQuery 弹出窗口

这段时间自己在学习前端JS和CSS开发，因为留言和评论模块上要用到头像选择，自己写一个简单的，分享下代码。
其实稍加改动也可以用来做表情控件.

效果图：

js代码


/**
 * 弹出头像JS
 */
var ICO = new  Object();
ICO.show = function(){
	$(".pop-ico").fadeIn();
}

ICO.hide = function(){
	$(".pop-ico").fadeOut();
}

$(function(){
 	var $box = $(".pop-ico");
 	var $showbtn =$(".show-ico-btn");
 	var $headico = $("input[name='headico']");
 	var $hidebtn =$box.find(".hide-ico-btn");
 	var $icolist = $box.find(".ico-list");
 	$showbtn.bind("click",ICO.show);
 	$hidebtn.bind("click",ICO.hide);
 	//点击选择头像
 	$("> a", $icolist).each(function(){
 		$(this).bind("click",function(){
 			$(this).addClass("cur").siblings().removeClass("cur");
 			var src =$(this).find("img").attr("src");
 			$showbtn.find("img").attr("src",src);
 			$headico.val($(this).attr("data-src"));
 			ICO.hide();
 		});
 	});
});

demo.html


<!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=utf-8" />
		<title>美女图片 MN606.COM</title>
		<!-- jQuery -->
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/pop-ico.js"></script>
		<style type="text/css">
			body{font-size: 12px;font-family: "宋体";color: #333p;}
			a{text-decoration: none;}
			.cmt-ico .head-ico img {border: 1px dashed #F60;padding: 2px;}
			.pop-ico{position: absolute;width: 250px;min-height: 130px;top: 50px;left: 0px;background: #FFF;border: 1px solid #D7D7D7;z-index: 100}
			.pop-ico .ico-title{height: 20px;background-color: #F0F0F0;color: #0078B6;padding-top: 5px;padding-left: 5px;padding-right: 5px}
			.pop-ico .ico-title a{cursor: pointer;display: block; width: 15px ;height: 15px;text-align: center;position: absolute;right: 5px;top: 5px;}
			.pop-ico .ico-list{padding: 7px}
			.pop-ico .ico-list a img {border: 1px dashed #DDD;cursor: pointer;}
			.pop-ico .ico-list a:hover img, .pop-ico .ico-list .cur img {border: 1px dashed #F60;}
		</style>
</head>
<body>
<div class="main" style="width: 960px;margin: 0 auto;border: 1px solid #BEBEBE;min-height:400px"">
	<div style="background-color: #E4E4E4;padding: 10px;">
		<font size="5">头像选择器：</font>
		<a href="http://www.mn606.com/message/" target="_blank">演示地址</a>
		<a href="http://www.mn606.com/" target="_blank">美女图片</a>
	</div>
	
	<div style="padding: 10px;">
	<!-- 头像选择 start -->
	<div class="cmt-ico" style="position: relative">
			<a class="head-ico show-ico-btn" title="选择头像"><img
					class="focus-ico"
					src="images/head/ico1.gif"
					alt="选择头像" width="40" height="40">
			</a>
			&nbsp;图片路径：<input type="text" name="headico" value="">
			<!-- 弹出窗口  start-->
			<div class="pop-ico" style="display: none">
				<div class="ico-title">
					<span>选择头像</span>
					<a title="关闭窗口" class="hide-ico-btn">x</a>
				</div>
				<div class="ico-list">
					<a data-src="images/head/ico1.gif" class="cur"><img src="images/head/ico1.gif" width="40" height="40"></a>
					<a data-src="images/head/ico2.gif"><img src="images/head/ico2.gif" width="40" height="40"></a>
					<a data-src="images/head/ico3.gif"><img src="images/head/ico3.gif" width="40" height="40"></a>
					<a data-src="images/head/ico4.gif"><img src="images/head/ico4.gif" width="40" height="40"></a>
					<a data-src="images/head/ico5.gif"><img src="images/head/ico5.gif" width="40" height="40"></a>
					<a data-src="images/head/ico6.gif"><img src="images/head/ico6.gif" width="40" height="40"></a>
					<a data-src="images/head/ico7.gif"><img src="images/head/ico7.gif" width="40" height="40"></a>
					<a data-src="images/head/ico8.gif"><img src="images/head/ico8.gif" width="40" height="40"></a>
					<a data-src="images/head/ico9.gif"><img src="images/head/ico9.gif" width="40" height="40"></a>
					<a data-src="images/head/ico10.gif"><img src="images/head/ico10.gif" width="40" height="40"></a>
					<a data-src="images/head/ico11.gif"><img src="images/head/ico11.gif" width="40" height="40"></a>
					<a data-src="images/head/ico12.gif"><img src="images/head/ico12.gif" width="40" height="40"></a>
					<a data-src="images/head/ico13.gif"><img src="images/head/ico13.gif" width="40" height="40"></a>
					<a data-src="images/head/ico14.gif"><img src="images/head/ico14.gif" width="40" height="40"></a>
					<a data-src="images/head/ico15.gif"><img src="images/head/ico15.gif" width="40" height="40"></a>
					<a data-src="images/head/ico16.gif"><img src="images/head/ico16.gif" width="40" height="40"></a>
					<a data-src="images/head/ico17.gif"><img src="images/head/ico17.gif" width="40" height="40"></a>
					<a data-src="images/head/ico18.gif"><img src="images/head/ico18.gif" width="40" height="40"></a>
					<a data-src="images/head/ico18.gif"><img src="images/head/ico19.gif" width="40" height="40"></a>
					<a data-src="images/head/ico18.gif"><img src="images/head/ico20.gif" " width="40" height="40"></a>
				</div>
			</div>
			<!-- 弹出窗口  end-->
	</div>
	<!-- 头像选择 end -->
	</div>
</div>
<div class="corp" style="width: 960;margin: 0 auto;text-align: center;margin-top: 10px">
	Dev by Swing ,QQ:35263107  <a href="http://www.mn606.com" target="_blank">www.mn606.com</a> <a href="http://www.yy606.com" target="_blank">www.yy606.com</a> 
</div>
</body>
</html>