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

骑猪看日落 2022-01-11 23:13 290阅读 0赞

javascript代码

/** 
         * 弹出头像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>  
                  
                <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;">  
              
            <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>  
                     图片路径：<input type="text" name="headico" value="">  
                      
                    <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>  
                      
            </div>  
              
            </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>

转载于:https://www.cnblogs.com/JoannaQ/archive/2012/08/04/2622509.html