分享一款基于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

基于jQuery点击圆形边框弹出图片信息的更多相关文章

  1. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  2. 基于jQuery点击缩略图右侧滑出大图特效

    基于jQuery点击缩略图右侧滑出大图特效是一款基于strip.pkgd插件实现的点击左侧缩略图右侧滑出大图切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  3. Jquery 点击图片在弹出层显示大图

    http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...

  4. 一款基于jQuery外观优雅带遮罩弹出层对话框

    今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...

  5. jquery 点击页面流畅弹出预定文字

    js代码: <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script&g ...

  6. [转]Jquery 点击图片在弹出层显示大图

    这个还行不需要别的包! https://www.cnblogs.com/antis/p/7053991.html

  7. vue封装公用弹出框方法，实现点击出现操作弹出框

    vue封装公用弹出框方法,实现点击出现操作弹出框 如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽 ...

  8. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  9. js实现点击<li>标签弹出其索引值

    据说这是一道笔试题,以下是代码,没什么要文字叙述的,就是点击哪个<li>弹出哪个<li>的索引值即可: <html> <head> <style& ...

随机推荐

  1. Java实现可视化迷宫

    代码地址如下:http://www.demodashi.com/demo/14547.html 需求 使用深度优先算法求解迷宫路径,使用Java实现求解过程的可视化,可单步运行,形象直观. 演示效果 ...

  2. 深入PHP内核之函数和返回值

    1.关于返回值,PHP内核中使用了大量的宏来实现,我们先看一个函数 PHP_FUNCTION  宏的定义(Zend/zend_API.h) #define PHP_FUNCTION ZEND_FUNC ...

  3. [原创]-[WEB]代码高亮工具

    代码高亮显示,不是什么新鲜玩艺了,各种各样的插件多了去了.       一开始想在baidu空间里贴代码,用GeSHi生成的高亮HTML复制到编辑器就可以了,不过QQ空间却不行,复制过去的格式全部被清 ...

  4. iOS UIKit Dynamics入门 UIKit动力学，实现重力、连接、碰撞、悬挂等动画效果

    本文为转载文章 版权归原文所有 什么是UIKit动力学(UIKit Dynamics) 其实就是UIKit的一套动画和交互体系.我们现在进行UI动画基本都是使用CoreAnimation或者UIVie ...

  5. <转>字符编码笔记：ASCII，Unicode和UTF-8

    本文转自:http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html 今天中午,我突然想搞清楚Unicode和UTF-8之间 ...

  6. JFinal record类型数据在前台获取

    1.jfinal record还得自己处理一下 可以使用 this.setSessionAttr("user", record.getColumns()); 这样在jsp中el表达 ...

  7. .NET操作XML文件之泛型集合的序列化与反序列化

    程序集:System.Xml.Serialization(在 System.Xml.Serialization.dll 中) 命名空间:System.Xml.Serialization 公共函数代码: ...

  8. js 重写 bootstrap 样式 alert/confirm 消息窗口

    相信很多人都受够了 alert.confirm 的样子,最近正在用 bootstrap 做项目,顺便封装了一个 bootstrap 样式的消息框. 实现起来很简单,bootstrap 本身就自带了 m ...

  9. vue v-model 与 组件化的表单组件如何沟通

    参考mint-ui的代码: https://github.com/ElemeFE/mint-ui/blob/master/packages/radio/src/radio.vue https://gi ...

  10. mysql两列合成一列

    update manage set mark = concat(mark,remark) select concat(mark,remark) as pp from manage