[科技]基于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();
            })