Home > Article > Web Front-end > jQuery mouse moves over a square image to a round edge effect code sharing_jquery

jQuery mouse moves over a square image to a round edge effect code sharing_jquery

WBOYOriginal: 2016-05-16 15:44:071295browse

This is a special effect code based on jQuery that switches a square image to a round edge with the mouse. Clicking on the image will pop up a floating layer. Users can also customize the title and text description of the corresponding image. It is suitable for displaying image pages. It is a very Practical picture special effects source code.

Operation rendering: --------------------------------Effect demonstration Source code download----------------------------------

Mouse over the square image to switch to a round edge effect

Click on the picture and a floating layer will pop up

The code to share with you the jQuery mouseover effect of switching a square image to a round edge is as follows

<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>

The above is the jQuery special effect code for switching the mouse mouse from a square image to a round edge. I hope you like it.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery map map hover display province and city code sharing_jqueryNext article：jQuery map map hover display province and city code sharing_jquery

See more

jQuery mouse moves over a square image to a round edge effect code sharing_jquery

Related articles