分享一款基于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 Groupplc等重大项目的尽职调查业务 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://***/Article/34035

转载于:https://www.cnblogs.com/liaohuolin/p/4452443.html

基于jQuery点击圆形边框弹出图片信息相关推荐

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

    [转]Jquery 点击图片在弹出层显示大图 使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: h ...

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

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

  3. html点击图片弹出大图特效代码,Jquery 点击图片在弹出层显示大图

    使用jquery,实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片如下: 1.点击前的效果: 2.点击后的效果: html代码如下: 弹出层图片 Js代码如下: ...

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

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

  5. 点击输入框弹出文字html,jQuery实现点击文本框弹出热门标签的提示效果

    jQuery实现点击文本框弹出热门标签的提示示例_网页代码站 body { font-size:12px;font-family:Arial; } #m_tagsItem { background:# ...

  6. jQuery实现点击文本框弹出热门标签的提示示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 使用jquery的blockui插件显示弹出层

    使用jquery的blockui插件显示弹出层 Posted on 2011-04-14 16:34 孤独者 阅读(9975) 评论(0) 编辑 收藏 在做网站的开发过程中,可能需要使用弹出层,使用j ...

  8. php手机网站底部导航代码,jQuery微信手机端底部弹出导航菜单列表代码

    jQuery微信手机端底部弹出导航菜单列表代码 jQuery微信手机端底部弹出导航菜单列表代码是一款网页底部点击按钮弹出浮动的图标菜单列表的手机特效. js代码 function showList() ...

  9. 点击文本框弹出热门标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

最新文章

  1. Facebook最新语音算法曝光!自监督语音识别,错误率低至2.43%
  2. 餐巾计划问题 线性规划与网络流24题之10 费用流
  3. linux下rsync+inotify实现服务器之间文件实时同步
  4. hdu5438(2015长春网络赛B题)
  5. P4169-[Violet]天使玩偶/SJY摆棋子【CDQ分治】
  6. c语言不通包里的函数,C语言中实现不同函数间jump的方法 -电脑资料
  7. 布尔盲注怎么用,一看你就明白了。布尔盲注原理+步骤+实战教程
  8. iOS开发UI篇—APP主流UI框架结构
  9. linux fls函数,Linux学习笔记- find 命令详解
  10. windows通信端口初始化失败_STM32实例——USART串口通信实验(二)
  11. ARM指令学习,王明学learn
  12. c语言实现ftp客户端,下载ftp的文件内容信息
  13. mysql类目树关系的保存和全排列查询
  14. RPA - 前置机虚拟化U盾识别方案
  15. 学习笔记(12):Google开发专家带你学 AI:入门到实战(Keras/Tensorflow)(附源码)-深度学习“四件套”:数据、模型、损失函数与优化器
  16. 计算机打印机无法打印,电脑打印机无法打印怎么办 打印机无法打印解决教程...
  17. VMware安装流畅系统Chrome OS以及国产系统FedyOS(基于Chrome OS的二次开发)
  18. 【C语言练习】分离英语句子中的单词并统计每个单词出现次数后排序输出
  19. 浅析浏览器书签的导入和导出
  20. 迪杰斯特拉算法(求最短路径)

热门文章

  1. cad怎么表示出一个孔_cad沉孔及孔深符号怎么通过文字输入方式打出来?【AutoCAD教程】...
  2. QCustomPlot 缩放拖动卡顿
  3. Windows和Linux服务启动脚本
  4. 自走棋手游服务器稳定,多多自走棋 2.0新版本值得“留守”吗?
  5. LRU(末位淘汰)算法
  6. 转载 2016最新Java学习计划
  7. 用Labelme实现图像分割
  8. 2018考研英语考试时间怎么分配?
  9. cnpm不是内部命令的解决方案 安装淘宝镜像 cnpm
  10. 微信小程序————搜索框获取本地缓存搜索记录