基于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
基于jQuery点击圆形边框弹出图片信息的更多相关文章
- 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效
基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...
- 基于jQuery点击缩略图右侧滑出大图特效
基于jQuery点击缩略图右侧滑出大图特效是一款基于strip.pkgd插件实现的点击左侧缩略图右侧滑出大图切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- Jquery 点击图片在弹出层显示大图
http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...
- 一款基于jQuery外观优雅带遮罩弹出层对话框
今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...
- jquery 点击页面流畅弹出预定文字
js代码: <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script&g ...
- [转]Jquery 点击图片在弹出层显示大图
这个还行不需要别的包! https://www.cnblogs.com/antis/p/7053991.html
- vue封装公用弹出框方法，实现点击出现操作弹出框
vue封装公用弹出框方法,实现点击出现操作弹出框 如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽 ...
- 基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- js实现点击<li>标签弹出其索引值
据说这是一道笔试题,以下是代码,没什么要文字叙述的,就是点击哪个<li>弹出哪个<li>的索引值即可: <html> <head> <style& ...
随机推荐
- jquery中的replaceWith()和html()的区别
区别在于,html()会替换指定元素内部的HTML,而replaceWith()会替换元素本身及其内部的HTML. //目标div <div id="myid" /> ...
- ios block常见的错误（二）——循环引用
这篇博文继续block的常见错误——循环引用. 循环引用是很多初学者不能察觉的,其产生的原因,是block中的代码会对对象进行强引用. 读者请阅读示例代码1,并思考示例代码1所创建的对象能否被正常销毁 ...
- PHP-九个非常有用的功能[转]
1. 函数的任意数目的参数你可能知道PHP允许你定义一个默认参数的函数.但你可能并不知道PHP还允许你定义一个完全任意的参数的函数下面是一个示例向你展示了默认参数的函数:// 两个默认参数的函数fun ...
- HDUOJ------2492Ping pong
Ping pong Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- iOS:即时通讯之<了解篇 SocKet>
什么是socket? 计算机专业术语就是: 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.Socket的英文原义是“孔”或“插座”.作为BSD UNIX的进 ...
- OGG_GoldenGate数据传递文件Trial（案例）
2014-03-05 Created By BaoXinjian
- JSP页面中文乱码
近期搭建了一个JAVA WEB项目,引入了国际化的ResourceBundle. 顺便赞一个,Eclipse Mars,自带了中文转unicode编码的功能. ① 根据语言选择,初始化Resource ...
- ASP.NET自定义Web服务器控件-DropDownList/Select下拉列表控件
using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; usin ...
- STM32 GPIO口模式配置
F103系列 typedef struct { uint16_t GPIO_Pin; /*!< Specifies the GPIO pins to be configured. This pa ...
- django post和get 比较
当我们提交表单仅仅需要获取数据时就可以用GET: 而当我们提交表单时需要更改服务器数据的状态,或者说发送e-mail,或者其他不仅仅是获取并显示数据的时候就使用POST. 在这个搜索书籍的例子里,我们 ...