首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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鼠标经过方形图片切换成圆边特效代码，希望大家可以喜欢。

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
Javascript !!的作用
Dec 04 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
Ajax基础知识详解
Feb 17 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
详解vue中localStorage的使用方法
Nov 22 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
开幕词(63) 导游词(322) 报告(147) 口号(179) 慰问信(53) 汇报材料(247) 闭幕词(9) 党团范文(807) 计划(88) 工作总结(1972)
You might like
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
php访问查询mysql数据的三种方法
2006/10/09 PHP
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
PHP.vs.JAVA
2016/04/29 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
javascript修改图片src的方法
2015/01/27 Javascript
基于jquery ui的alert,confirm方案（支持换肤）
2015/04/03 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件
2017/06/29 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python实现稀疏矩阵示例代码
2017/06/09 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
python实现批量转换图片为黑白
2020/06/16 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
2016年记者节感言
2015/12/08 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
python随机打印成绩排名表
2021/06/23 Python
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
Python制作表白爱心合集
2022/01/22 Python
详解Go语言中Get/Post请求测试
2022/06/01 Golang
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技