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

赞 (0)

相关推荐

  • jQuery实现table隔行换色和鼠标经过变色的两种方法

    一.隔行换色 复制代码 代码如下: $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定: 复制代码 代码如下: $("table tr:nth-child(odd)").css("background-col

  • jQuery 鼠标经过(hover)事件的延时处理示例

    jQuery 鼠标经过(hover)事件的延时处理示例

    一.关于鼠标hover事件及延时 鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处理.但是,有时候,为了避免不必要的干扰,常会对鼠标hover事件进行延时处理.所谓干扰,就是当用户鼠标不经意划过摸个链接,选项卡,或是其他区域时,本没有显示隐藏层,或是选项卡切换,但是由于这些元素上绑定了hover事件(或是mouseover事件),且无延时,这些时间就会立即触发,反而会对用户进行干

  • jQuery实现鼠标经过图片预览大图效果

    jQuery实现鼠标经过图片预览大图效果

    jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScript来说,同样的效果,但是很简单的代码.jQuery中的核心知识点就是选择器的使用,选择器的内容我会在之后的博客中总结,希望大家去看下,学好了选择我器,相当于完全掌握了jQuery. 这篇博文是实现怎么通过jQuery实现我们在购物网站中常见的:当鼠标经过了图片数,图片会放大进行预览大图.接下来我就粘

  • jQuery实现鼠标经过弹出提示信息的地图热点效果

    jQuery实现鼠标经过弹出提示信息的地图热点效果

    本文实例讲述了jQuery实现鼠标经过弹出提示信息的地图热点效果.分享给大家供大家参考.具体如下: 这里的jQuery鼠标经过弹出提示信息地图热点效果,很多网站上有用到,送给大家,对作者表示感谢. 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&

  • Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

    实例如下所示: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击</title>    <script src="JS/jquery-1.9.1.js" type="text/javascript"></

  • jQuery实现鼠标经过提示信息的地图热点效果

    jQuery实现鼠标经过提示信息的地图热点效果 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>地图热点效果-鼠标经过弹出提示信息</title> <meta http-equiv="Conte

  • jQuery实现鼠标经过时出现隐藏层文字链接的方法

    jQuery实现鼠标经过时出现隐藏层文字链接的方法

    本文实例讲述了jQuery实现鼠标经过时出现隐藏层文字链接的方法.分享给大家供大家参考.具体如下: 这里演示Jquery显示隐藏层的方法,鼠标经过时出现文字链接,模拟评分效果,这里没有加动作,仅显示了前台效果的实现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-txt-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

  • jQuery实现鼠标经过事件的延时处理效果

    jQuery鼠标经过(hover)事件的延时处理,具体JS代码如下: (function($){ $.fn.hoverDelay = function(options){ var defaults = { hoverDuring: 200, outDuring: 200, hoverEvent: function(){ $.noop(); }, outEvent: function(){ $.noop(); } }; var sets = $.extend(defaults,options ||

  • jquery简单实现鼠标经过导航条改变背景图

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jQuery实现的鼠标经过时变宽的效果(附demo源码)

    本文实例讲述了jQuery实现的鼠标经过时变宽的效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lan

  • jQuery实现鼠标经过图片变亮其他变暗效果

    以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

  • jquery实现通用版鼠标经过淡入淡出效果

    复制代码 代码如下: <a class="jq_btn" href="#"><div></div></a> //鼠标移上去效果 $(".jq_btn").hover(function(){ $(this).find("div").stop().fadeIn(); },function(){ $(this).find("div").stop().fadeOut(

  • jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

    jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

    本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery实现的下滑线导航菜单,鼠标经过主菜单的时候,下滑线就会自动跟向哪里,如果该菜单有两级子菜单,则同样会显示下滑菜单,带渐变效果.菜单操作很灵敏,使用有自定义的封装插件SuperSlide.2.1.js,所在使用时请自行下载这个JS插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015

随机推荐