jQuery鼠标经过方形图片切换成圆边效果代码分享


Posted in Javascript onAugust 20, 2015

这是一款基于jQuery鼠标经过方形图片切换成圆边特效代码,点击图片会弹出浮层,用户还可以自定义对应图片的标题与文字说明,适合图片页面的展示,是一款非常实用的图片特效源码。

运行效果图: --------------------------------效果演示 源码下载----------------------------------

jQuery鼠标经过方形图片切换成圆边效果代码分享

鼠标经过方形图片切换成圆边效果

jQuery鼠标经过方形图片切换成圆边效果代码分享

点击图片会弹出浮层

jQuery鼠标经过方形图片切换成圆边效果代码分享

为大家分享的jQuery鼠标经过方形图片切换成圆边效果代码如下

<head>

<title>jQuery鼠标经过方形图片切换成圆边特效</title>
<link href="css/lrtk.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<style type="text/css">
<!--
.STYLE1 {
 font-size: x-large;
 font-weight: bold;
}
-->
</style>
</head>
<body>
<!-- 代码 开始 -->
<div id="teamcont" >
 <div style="width:780px;margin:10px auto; text-align:center">
 <div class="parinforma cssshadow">
 <div class="closebtn"></div>
 <div class="showLeft">
 <div class="partener">
 <img class="row1" src="img/partner/balidao.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">巴厘岛</div>
 </div>
 </div>
<div class="showRight">
 <div class="huncontent">
 巴厘岛(Bali Island),是世界著名的旅游岛,行政上称为巴厘省,是印度尼西亚33个一级行政区之一。
巴厘岛上大部分为山地,全岛山脉纵横,地势东高西低。岛上的最高峰是阿贡火山(巴厘峰)海拔3142米。巴厘岛是印度尼西亚唯一信奉印度教的地区。80%的人信奉印度教。主要通行的语言是印尼语和英语。
沙努尔、努沙-杜尔和库达等处的海滩,是岛上景色最美的海滨浴场,这里沙细滩阔、海水湛蓝清澈。每年来此游览的各国游客络绎不绝。 由于巴厘岛万种风情,景物甚为绮丽。因此,它还享有多种别称,如“神明之岛”、“恶魔之岛”、“罗曼斯岛”、“绮丽之岛”、“天堂之岛”、“魔幻之岛”、“花之岛”等。   </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/maerdaifu.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">双鱼岛</div>
 </div>
 </div>
 <div class="showRight">
 <div class="huncontent"> 
 双鱼岛设施现代舒适。沿着从岛上延伸至码头的长长栈道,不时有鲨鱼及其它不小的鱼在附近巡游。到了码头,沙地一侧沿岸尽是数以万计的小鱼,密密麻麻结成一团,周围有小鲨鱼或其它掠食鱼类出没。
至于码头另一侧则是延伸成峭壁的礁岩地形,每块礁岩周围都有蝶鱼、雀鲷等珊瑚礁鱼类出没,码头正下方也有成群的底栖性鱼类,沿着峭壁的边界,回游性的大物不时出没,牛港参、海龟均有所见。就赏鱼角度而言,双鱼岛单单是码头边就已精彩万分。岛上的日本客人很多,他们主要是来潜水的。 </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/xianggang.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">香港</div>
 </div>
 </div>
 <div class="showRight">
 <div class="huncontent"> 
 香港(Hong Kong),全称中华人民共和国香港特别行政区(Hong Kong Special Administrative Region of the People's Republic of China,简写:HKSAR)。由香港岛、九龙半岛、新界(包括大屿山及230余个大小岛屿)组成。地处中国华南,珠江口东侧,北隔深圳河与广东深圳相接;西与澳门隔海相望;南临南中国海。
香港是一座高度繁荣的国际大都市,是仅次于纽约和伦敦的全球第三大金融中心,与美国纽约、英国伦敦并称“纽伦港”。香港是亚洲重要的金融、服务和航运中心,以廉洁的政府、良好的治安、自由的经济体系以及完善的法制闻名于世,有“东方之珠”、“美食天堂”和“购物天堂”等美誉。 </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/zhangjiajie.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">张家界</div>
 </div>
 </div>
 <div class="showRight">
 <div class="huncontent"> 
 张家界是湖南省辖地级市,原名大庸市,辖2个市辖区(永定区、武陵源区)、2个县(慈利县、桑植县)。位于湖南西北部,澧水中上游,属武陵山区腹地。张家界因旅游建市,是中国最重要的旅游城市之一,是湘鄂西、湘鄂川黔革命根据地的发源地和中心区域。
1982年9月,张家界国家森林公园成为中国第一个国家森林公园。
1988年8月,武陵源风景名胜区列入第二批国家重点风景名胜区;1992年,由张家界国家森林公园等三大景区构成的武陵源自然风景区被联合国教科文组织列入《世界自然遗产名录》;2004年2月,被列为中国首批《世界地质公园》;2007年,被列入中国首批5A级景区。 </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/xianggelila.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">香格里拉</div>
 </div>
 </div>
 <div class="showRight">
 <div class="huncontent"> 
 香格里拉市是迪庆藏族自治州下辖市之一,市境位于云南省西北部,是滇、川及西藏三省区交汇处,也是“三江并流”风景区腹地。截止到2014年,香格里拉市总面积11613平方公里,辖4个镇、7个乡,共有6个社区、58个行政村。
2011年,香格里拉市年末总人口为17.45万人,除主体民族藏族外还有汉族、纳西族、彝族、白族等十几个民族,人口密度为10人/平方公里,是云南省面积最大、人口密度最低的市份之一。2011年,香格里拉实现县级生产总值359580万元,市级一、二、三产业增加值占全县生总产值的比重为9.4:38.3:52.3。香格里拉县主要旅游景点有哈巴雪山,普达措,梅里雪山等景点。 </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/qingdao.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">青岛</div>
 </div>
 </div>
 <div class="showRight">
 
 <div class="huncontent"> 
 青岛,别称“岛城”、“琴岛”、旧称“胶澳”,地处山东半岛东南部沿海,胶东半岛东部,东、南濒临黄海,隔海与朝鲜半岛相望。拥有一个国家级新区(青岛西海岸新区)。
青岛是全国文明城市、中国最具幸福感城市、国家历史文化名城、国家园林城市;是国家海洋科研及海洋产业开发中心城市,国家重要的现代化制造业及高新技术产业基地;是东北亚国际航运中心、国际港口、国家重要的区域性航空港,同时也是中国14个沿海开放城市、15个区域经济中心城市之一。 </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/xiong.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">上海</div>
 </div>
 </div>
 <div class="showRight">
 
 <div class="huncontent"> 
 上海(Shanghai),简称“沪”或“申”,中华人民共和国直辖市,地处长江入海口,隔东中国海与日本九州岛相望,南濒杭州湾,西与江苏、浙江两省相接,并与安徽相隔,共同构成以上海为龙头的“长江三角洲城市群”,是中国大陆首个自贸区“中国(上海)自由贸易试验区”所在地。[1-2] 
上海是一座国家历史文化名城,拥有深厚的近代城市文化底蕴和众多历史古迹。江南的吴越传统文化与各地移民带入的多样文化相融合,形成了特有的海派文化。上海市已经成功举办了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/xuzhou.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">台湾</div>
 </div>
 </div>
 <div class="showRight">
 <div class="huncontent"> 
 台湾(Taiwan)位于中国大陆东南沿海的大陆架上,东临太平洋,东北邻琉球群岛,南界巴士海峡与菲律宾群岛相对,西隔台湾海峡与福建省相望,总面积约3.6万平方千米,包括台湾岛及兰屿、绿岛、钓鱼岛等21个附属岛屿和澎湖列岛64个岛屿。台湾岛面积35882.6258平方千米,是中国第一大岛,7成为山地与丘陵,平原主要集中于西部沿海,地形海拔变化大。由于地处热带及亚热带气候之交界,自然景观与生态资源丰富多元。人口约2350万,逾7成集中于西部5大都会区,其中以首要都市台北为中心的台北都会区最大。
台湾是中国不可分割的一部分。原住民族(高山族)在17世纪汉族移入前即已在此定居;自明末清初始有较显著之福建南部和广东东部人民移垦,最终形成以汉族为主体的社会。南宋澎湖属福建路;元、明在澎湖设巡检司;明末被荷兰和西班牙侵占;1662年郑成功收复;清代1684年置台湾府,属福建省,1885年建省;1895年清政府以《马关条约》割让与日本;1945年抗战胜利后光复;1949年国民党政府在内战失利中退守台湾,海峡两岸分治至今。 </div>
 </div>
 <div style="clear:both"></div>
 </div>
 
 <div id="pichuan">
 <div class="partener">
 <img class="row1" src="img/partner/balidao.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">巴厘岛</div>
 </div>
 <div class="partener"><img class="row1" src="img/partner/maerdaifu.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">马尔代夫</div>
 </div>
 <div class="partener"><img class="row1" src="img/partner/xianggang.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">香港</div>
 </div>
 <div class="partener"><img class="row1" src="img/partner/zhangjiajie.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">张家界</div>
 </div>
 <div style="clear:both"></div> 
 <div class="partener"><img class="row1" src="img/partner/xianggelila.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">香格里拉</div> 
 </div>
 <div class="partener"><img class="row1" src="img/partner/qingdao.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">青岛</div>
 </div>
 <div class="partener"><img class="row1" src="img/partner/xiong.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">上海</div>
 </div>
 <div class="partener"><img class="row1" src="img/partner/xuzhou.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">台湾</div>
 </div>
 <div style="clear:both"></div> 
 </div>
 </div> 
</div> 
<script>
 $("#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();
 })

</script>
<!-- 代码 结束 -->

<div style="text-align:center;margin:0 0 20px 0">

<p><p class="STYLE1">十一,我们去哪</p>
<p><br />
<p style="margin:20px 0"></p>
</div>
</body>
</html>

 以上就是为大家分享的jQuery鼠标经过方形图片切换成圆边特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 #Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 #Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 #Javascript
js图片翻书效果代码分享
Aug 20 #Javascript
JS给Textarea文本框添加行号的方法
Aug 20 #Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 #Javascript
javascript如何操作HTML下拉列表标签
Aug 20 #Javascript
You might like
smarty获得当前url的方法分享
2014/02/14 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
php use和include区别总结
2019/10/13 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
vue实现循环切换动画
2018/10/17 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
Python生成随机验证码的两种方法
2015/12/22 Python
python迭代器与生成器详解
2016/03/10 Python
python实现二分查找算法
2017/09/21 Python
Python中文件的读取和写入操作
2018/04/27 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
python中的django是做什么的
2020/07/31 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
小区门卫值班制度
2014/01/24 职场文书