基于jQuery点击圆形边框弹出图片信息

分享一款基于jQuery点击圆形边框弹出图片信息。这是一款鼠标经过图片转换成圆形边框，点击可弹出文字信息。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

  <div id="teamcont">

            <div style="width: 780px; margin: 30px auto; text-align: center">

                <div class="parinforma cssshadow">

                    <div class="closebtn">

                    </div>

                    <div class="showLeft">

                        <div class="partener">

                            <img class="row1" src="img/partner/team8.jpg">

                            <div class="pname">

                                展示</div>

                            <div class="pinfo">

                                合伙人</div>

                        </div>

                    </div>

                    <div class="showRight">

                        <div class="huncontent">

                            1994年杨正宏创立了北京金融信科技发展有限责任公司， 是国内名列前茅的金融行业软件、服务和系统集成公司。<br />

                            1999年该公司年销售额达1.8亿元人民币，利润超过千万元。 2000年杨正宏主导了该公司与高阳科技（HK0818）的并购交易。并购后， 公司更名为北京高阳金信信息技术有限公司，并担任董事长。<br />

                            2003年，杨正宏创立了自己的第二家IT公司， 并于2006年出售给一家美国上市公司，实现50倍收益。 1990年杨正宏毕业于清华大学金融系，获得学士学位， 后于2009年获得中欧国际工商学院EMBA。

                        </div>

                    </div>

                    <div style="clear: both">

                    </div>

                </div>

                <div class="parinforma cssshadow">

                    <div class="closebtn">

                    </div>

                    <div class="showLeft">

                        <div class="partener">

                            <img class="row1" src="img/partner/team5.jpg">

                            <div class="pname">

                                展示</div>

                            <div class="pinfo">

                                合伙人</div>

                        </div>

                    </div>

                    <div class="showRight">

                        <div class="huncontent">

                            王伟先生拥有30多年投资、管理和运营经验。作为弘合基金的创始合伙人，他主要负责投资战略方向把控、早期团队评估和战略管理等工作。 加入弘合基金之前，王伟已完成多起成功的早期投资案例，包括银联数据服务有限公司、华谊兄弟和我爱我家等。<br />

                            2003年王伟作为合投方入资中国银联旗下子公司银联数据服务有限公司。该公司于2005年出售给Total System Services (TSS)，实现8倍回报。

                            2000年他作为独立投资人投资华谊兄弟（SZ300027，市值：373亿元人民币）。 华谊兄弟是中国目前最大的民营娱乐集团之一，其拥有、生产并发行了中国大量热门的影视作品。

                            王伟于2002年实现退出，回报达10倍。<br />

                            1999年王伟作为天使投资人入股我爱我家。该公司是中国目前排名前三的房产中介， 拥有1500多家连锁店和3万多名员工。目前他仍然持有我爱我家股份，账面回报已达百倍。

                            1990年王伟成立太合控股，目前仍为集团最大股东。

                        </div>

                    </div>

                    <div style="clear: both">

                    </div>

                </div>

                <div class="parinforma cssshadow">

                    <div class="closebtn">

                    </div>

                    <div class="showLeft">

                        <div class="partener">

                            <img class="row1" src="img/partner/team1.jpg">

                            <div class="pname">

                                展示</div>

                            <div class="pinfo">

                                合伙人</div>

                        </div>

                    </div>

                    <div class="showRight">

                        <div class="huncontent">

                            张逸龙先生拥有20多年投资、管理和运营经验。作为弘合基金的创始合伙人，他主要负责项目投资、战略管理和资本运作。 加入弘合基金之前，张逸龙主导并完成了多起杠杆收购案例（LBO）。

                            2003年张逸龙完成了对山西吕梁厚德煤业收购。在张逸龙的主导和策划下，该公司实现了扭亏为盈，并于2010年出售给山西大土河煤业集团，作价5亿元人民币。 在2000年至2002年期间，他主导完成了对中关村证券股份有限公司的重组。1998年张逸龙主导了张家界旅游开发股份有限公司的私有化，并出任董事长。该公司是独家经营湖南张家界景区的上市公司，下设武陵源分公司和四家子公司，主要从事景区开发、酒店管理等旅游业务。

                            张逸龙在1989年获得对外经贸大学国际经济合作专业学士学位，并与2003年获得北京大学EMBA。

                        </div>

                    </div>

                    <div style="clear: both">

                    </div>

                </div>

                <div class="parinforma cssshadow">

                    <div class="closebtn">

                    </div>

                    <div class="showLeft">

                        <div class="partener">

                            <img class="row1" src="img/partner/team4.jpg">

                            <div class="pname">

                                展示</div>

                            <div class="pinfo">

                                合伙人</div>

                        </div>

                    </div>

                    <div class="showRight">

                        <div class="huncontent">

                            李晓光先生拥有25年IT服务、管理和运营经验，并对通信和金融服务行业有非常深入的了解。 作为弘合基金创始合伙人，他主要负责项目投资、管理咨询、资源整合、基金日常管理等工作。

                            1997年李先生以联合创始人兼COO身份加盟了北京金融信科技发展有限责任公司。公司在2000年被高阳科技收购 ，李先生被任命为执行董事兼COO。2002年高阳科技在香港上市。

                            2003年李先生任高阳科技（HK0818）中国区总经理，全面负责中国区旗下不同行业公司的运营管理。主要业务是在中国开展金融、电信、电力等行业的应用软件开发，系统集成等业务。

                            在2004年至2010年期间，李先生出任高阳科技执行总裁兼北京高阳圣思园信息技术有限公司董事长CEO，负责公司的战略目标制定，全面负责公司的运营管理。2009年公司高阳圣思园利润超过1亿元，与中国移动、中国联通、中国电信都有深入的合作。

                            李晓光先生于1985年和1988年分别获得北京大学计算机系学士和硕士学位。

                        </div>

                    </div>

                    <div style="clear: both">

                    </div>

                </div>

                <div class="parinforma cssshadow">

                    <div class="closebtn">

                    </div>

                    <div class="showLeft">

                        <div class="partener">

                            <img class="row1" src="img/partner/team7.jpg">

                            <div class="pname">

                                展示</div>

                            <div class="pinfo">

                                合伙人</div>

                        </div>

                    </div>

                    <div class="showRight">

                        <div class="huncontent">

                            2000-2010: 担任太合控股投资经理，主导太合控股关于互联网方向的股权投资，包括上海瀚银支付、太合麦田娱乐等公司 2000年毕业于首都师范大学，获得教育学学士学位

                        </div>

                    </div>

                    <div style="clear: both">

                    </div>

                </div>

                <div class="parinforma cssshadow">

                    <div class="closebtn">

                    </div>

                    <div class="showLeft">

                        <div class="partener">

                            <img class="row1" src="img/partner/team6.jpg">

                            <div class="pname">

                                展示</div>

                            <div class="pinfo">

                                合伙人</div>

                        </div>

                    </div>

                    <div class="showRight">

                        <div class="huncontent">

                            2009-2010:就职于普华永道并购战略服务部，担任分析员; 参与了Plastic Logic Limited的重组工作,也参与了 Interbulk Group

                            plc等重大项目的尽职调查业务 2010年毕业于英国诺森比亚大学，获得财务管理专业硕士学位

                        </div>

                    </div>

                    <div style="clear: both">

                    </div>

                </div>

                <div class="parinforma cssshadow">

                    <div class="closebtn">

                    </div>

                    <div class="showLeft">

                        <div class="partener">

                            <img class="row1" src="img/partner/team2.jpg">

                            <div class="pname">

                                展示</div>

                            <div class="pinfo">

                                合伙人</div>

                        </div>

                    </div>

                    <div class="showRight">

                        <div class="huncontent">

                            2010-2012:曾就职于金元比联基金, 民生证券，担任行业分析助理; 参与调研并撰写了多家上市公司的研究报告，如钢研高纳，贵州茅台，酒鬼酒等 2013年毕业于美国马里兰大学史密斯商学院，获得金融学硕士专业

                        </div>

                    </div>

                    <div style="clear: both">

                    </div>

                </div>

                <div class="parinforma cssshadow">

                    <div class="closebtn">

                    </div>

                    <div class="showLeft">

                        <div class="partener">

                            <img class="row1" src="img/partner/team3.jpg">

                            <div class="pname">

                                展示</div>

                            <div class="pinfo">

                                合伙人</div>

                        </div>

                    </div>

                    <div class="showRight">

                        <div class="huncontent">

                            2008-2009: 联合创建了Panels United (欧洲第一家独立的户外数码媒体广告预订平台），获得天使投资 2012-2014: 担任清科集团行业分析员;

                            2012年获得最佳新人奖 2011年毕业于英国斯特林大学，获得投资分析专业硕士学位

                        </div>

                    </div>

                    <div style="clear: both">

                    </div>

                </div>

                <div id="pichuan">

                    <div class="partener">

                        <img class="row1" src="img/partner/team8.jpg">

                        <div class="pname">

                            展示</div>

                        <div class="pinfo">

                            合伙人</div>

                    </div>

                    <div class="partener">

                        <img class="row1" src="img/partner/team5.jpg">

                        <div class="pname">

                            展示</div>

                        <div class="pinfo">

                            合伙人</div>

                    </div>

                    <div class="partener">

                        <img class="row1" src="img/partner/team1.jpg">

                        <div class="pname">

                            展示</div>

                        <div class="pinfo">

                            合伙人</div>

                    </div>

                    <div class="partener">

                        <img class="row1" src="img/partner/team4.jpg">

                        <div class="pname">

                            展示</div>

                        <div class="pinfo">

                            合伙人</div>

                    </div>

                    <div style="clear: both">

                    </div>

                    <div class="partener">

                        <img class="row1" src="img/partner/team7.jpg">

                        <div class="pname">

                            展示</div>

                        <div class="pinfo">

                            合伙人</div>

                    </div>

                    <div class="partener">

                        <img class="row1" src="img/partner/team6.jpg">

                        <div class="pname">

                            展示</div>

                        <div class="pinfo">

                            合伙人</div>

                    </div>

                    <div class="partener">

                        <img class="row1" src="img/partner/team2.jpg">

                        <div class="pname">

                            展示</div>

                        <div class="pinfo">

                            合伙人</div>

                    </div>

                    <div class="partener">

                        <img class="row1" src="img/partner/team3.jpg">

                        <div class="pname">

                            展示</div>

                        <div class="pinfo">

                            合伙人</div>

                    </div>

                    <div style="clear: both">

                    </div>

                </div>

            </div>

        </div>

js代码：

$("#pichuan .partener").mouseenter(function () {

                $(this).find("div").css("color", "red");

                $(this).find("img").delay(200).stop().clearQueue().animate({

                    borderRadius: "20",

                    opacity: 1

                }, "fast")

            }).mouseleave(function () {

                $(this).find("div").css("color", "black");

                $(this).find("img").delay(200).stop().clearQueue().animate({

                    borderRadius: "60",

                    opacity: 0.9

                }, "fast")

            })

            $("#pichuan .row1").click(function () {

                var picIndex = $("#pichuan .row1").index($(this));

                $(".parinforma").hide();

                $("#pichuan").hide();

                $(".parinforma").eq(picIndex).slideDown("normal");

            })

            $("#teamcont .closebtn").mouseenter(function () {

                $(this).css({ 'background': 'url(img/close-s.png)' });

            }).mouseleave(function () {

                $(this).css({ 'background': 'url(img/close-n.png)' });

            })

            $("#teamcont .closebtn").click(function () {

                $(".parinforma").hide();

                $("#pichuan").show();

            })

via：http://www.w2bc.com/Article/34035