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

这是一个基于jQuery的特效代码，从方形图片切换到圆形边缘。点击图片会弹出浮动图层。用户还可以自定义对应图片的标题和文字描述，适合图片页面的显示。这是一个非常实用的图片特效源代码。

运行效果图：下载效果演示的源代码。

鼠标经过正方形图片后切换到圆形边缘效果

点击图片会弹出浮动图层

大家共享的jQuery鼠标通过方形图片切换到圆边。效果代码如下

HeadtitlejQuery鼠标通过方形图片/titlelink切换到圆角边缘效果href=' CSS/lrtk.css' rel='样式表' type=' text/CSS '/script type=' text/JavaScript ' src=' http 3360 js/jQuery-1 . 7 . 1 . js '/script style type='。-. STYLe 1 { font-size : x-large；font-weight:粗体；}-/款式/床头柜！-code start-div id=' team cont ' div style=' width :780 px；margin:10px汽车；text-align : center ' Div class=' parin forma CSS shadow ' Div class=' closebtn '/Div class=' show left ' Div class=' partner ' img class=' row 1 ' src=' http : img/partner/Bali Dao . jpg ' Div class=' pname ' exhibit/Div Div class=' pinfo ' Bali/Div/Div class=' show right ' Div class=' hun content '巴厘岛是一个世界著名的旅游岛，行政上称之为巴厘岛巴厘岛大部分是山地，山脉横贯全岛，地势东高西低。岛上最高峰是海拔3142米的阿公山(巴厘岛峰)。巴厘岛是印度尼西亚唯一的印度教地区。80%的人信仰印度教。主要使用的语言是印度尼西亚语和英语。萨努尔、努沙杜尔和库达的海滩是岛上最美丽的海滩，这里的沙滩宽阔，海水蔚蓝清澈。每年都有来自世界各地的游客来到这里。由于巴厘岛的各种习俗，风景非常美丽。因此也享有各种别称，如“神岛”“魔鬼岛”“罗马人岛”“美丽岛”“天堂岛”“魔岛”“花岛”等。/Div/Div style=' clear : both '/Div/Div class=' parin forma CSS shadow ' Div class=' closebtn '/Div class=' show left ' Div class=' partner ' img class=' row 1 ' src=' http : img/partner/maerdaifu . jpg ' Div class=' pname ' show/Div class=' pinfo '双鱼座岛/Div/Div/Div class=' show right ' Div class=' hun content '设施中沿着从小岛延伸到码头的长长栈道，鲨鱼等大鱼不时在附近巡游。码头上，沙滩边有成千上万条小鱼，密密麻麻地聚集在一起，被小鲨鱼或其他食肉鱼类包围着。至于码头的另一边，有礁石伸入悬崖。每块礁石周围都有蝴蝶鱼、裂头蚴和其他珊瑚鱼。码头正下方也有成群的底栖鱼。沿着悬崖的边界，不时会发现迁徙的大东西，包括牛、香港人参和海龟。就观鱼而言，双鱼座岛就在码头旁边，很精彩。岛上有许多日本客人。他们主要是来潜水的。/Div/Div style=' clear : both '/Div/Div class=' parin forma CSS shadow ' Div class=' closebtn '/Div class=' show left ' Div class=' partner ' img class=' row 1 ' src=' http : img/partner/Xiang . jpg ' Div class=' pname ' exhibit/Div Div class=' pinfo ' Hong/Div/Div class=' show right ' Div class=' hun content ' Hong，Hong，Hong它由香港岛、九龙半岛和新界(包括大屿山和230多个大小岛屿)组成。位于华南，珠江口东侧，北靠深圳河与广东深圳相连。西与澳门隔海相望；南至南海。香港是一个高度繁荣的国际大都市，也是仅次于纽约和伦敦的世界第三大金融中心。它与美国的纽约和英国的伦敦合称为“纽兰港”。香港是亚洲重要的金融、服务和航运中心。它以廉政、良好的法律和秩序、自由的经济制度和完善的法律制度而闻名。它有“东方之珠”、“美食天堂”和“购物天堂”的美誉。

/Div/Div style=' clear : both '/Div/Div class=' parinforma CSS shadow ' Div class=' closebtn '/Div class=' show left ' Div class=' partner ' img class=' row 1 ' src=' http : img/partner/张家界. jpg ' Div class=' pname ' show/Div class=' pinfo '张家界/Div/Div class=' show right ' Div class=' hun content '张家界是一个位于湖南西北部，澧水中上游，属武陵山区腹地。张家界是中国最重要的旅游城市之一，是湘鄂西、川黔革命根据地的发祥地和中心地区。1982年9月，张家界国家森林公园成为中国第一个国家森林公园。1988年8月，武陵源风景区被列入第二批国家重点风景名胜区；1992年，由张家界国家森林公园等3个景区组成的武陵源自然风景区被联合国教科文组织列为《世界自然遗产名录》；2004年2月被列为国内第一批《世界地质公园》；2007年被列入全国首批5A级景区。/Div/Div style=' clear : both '/Div/Div class=' parinforma CSS shadow ' Div class=' closebtn '/Div class=' show left ' Div class=' partner ' img class=' row 1 ' src=' http : img/partner/xiangelila . jpg ' Div class=' pname ' show/Div class=' pinfo ' Shangri-La/Div/Div/Div class=' show right ' Div class=' hun content ' Shangri该市位于云南省西北部，云南、四川、西藏三省交汇处，也是“三江并流”景区的腹地。截至2014年，香格里拉总面积11613平方公里，辖4镇7乡，6个社区，58个行政村。2011年，香格里拉年末总人口17.45万人，包括汉族、纳西族、彝族、白族，人口密度为每平方公里10人，是云南省人口密度最大、最低的城市之一。香格里拉2011年实现县级GDP 35.958亿元，市级一、二、三产业增加值占9.333660.39336533535香格里拉县主要旅游景点有哈巴雪山、普达措、梅里雪山等。/Div/Div style=' clear : both '/Div/Div class=' parinforma CSS shadow ' Div class=' closebtn '/Div class=' show left ' Div class=' partner ' img class=' row 1 ' src=' http : img/partner/Qingdai . jpg ' Div class=' pname ' exhibit/Div Div class=' pinfo ' Qingdai/Div/Div class=' show right ' Div class=' hun content ' Qingdai，又名拥有国家级新区(青岛西海岸新区)。青岛是全国文明城市、中国最幸福城市、国家历史文化名城、国家园林城市；是国家海洋科学研究和海洋产业发展的中心城市，国家重要的现代制造业和高新技术产业基地；它是国际航运中心、国际港口和东北亚重要的区域机场。也是中国14个沿海开放城市和15个区域经济中心城市之一。/Div/Div style=' clear : both '/Div/Div class=' parinforma CSS shadow ' Div class=' closebtn '/Div class=' show left ' Div class=' partner ' img class=' row 1 ' src=' http : img/partner/Xiong . jpg ' Div class=' pname ' show/Div Div class=' pinfo ' Shanghai/Div/Div/Div class=' show right ' Div class=' hun content ' Shanghai，简称与日本九州岛隔海相望，南濒杭州湾，西接江浙两省，与安徽分离，共同形成以上海为龙头的长三角城市群[1-2]上海是国家历史文化名城，现代城市文化底蕴深厚，历史古迹众多。

江南吴越的传统文化与全国各地移民带来的多元文化相融合，形成了独特的海派文化。上海成功举办了2010年世博会、中国上海国际艺术节、上海国际电影节等大型国际活动。/Div/Div style=' clear : both '/Div/Div class=' parinforma CSS shadow ' Div class=' closebtn '/Div class=' showleft ' Div class=' partner ' img class=' row 1 ' src=' http : img/partner/徐州. jpg ' Div class=' pname ' show/Div Div class=' pinfo '台湾省/Div/Div/Div class=' showright ' Div class=' hun content '台湾省所在地南部巴士海峡与菲律宾群岛相对，西部与福建省隔台湾省海峡相望，总面积约3.6万平方公里，包括台湾省岛、蓝雨、绿岛、钓鱼岛等21个附属岛屿，澎湖列岛64个岛屿。 台湾省岛面积35882.6258平方公里，是中国最大的岛屿，属山地丘陵地区。平原主要集中在西海岸，地形和海拔变化很大。地处热带和亚热带气候交汇处，自然景观和生态资源丰富多样。人口约2350万，70%以上集中在西部五大都市圈，其中以台北为中心的台北都市圈规模最大。台湾省是中国不可分割的一部分。17世纪汉族迁入之前，原住民(高山族)就在这里定居。明末清初，闽南、粤东地区的人们迁居耕田，最终形成了以汉族为主的社会。南宋的澎湖属于福建路；元、明在澎湖设立巡检司；明朝末年，被荷兰和西班牙入侵。郑成功于1662年收复；清代，1684年置台，隶属福建省，1885年建立；1895年清政府以《马关条约》割让给日本；1945年抗日战争胜利后的恢复；1949年，国民党政府在内战失败后撤退到台湾省，台湾海峡两岸已经分裂。

/div/div style=' clear : both '/div/div id=' pichuan ' div class=' partner ' img class=' row 1 ' src=' http : img/partner/Bali Dao。jpg ' div class=' pname '展示/div div class='pinfo '巴厘岛/div/div class=' partner ' img class=' row 1 ' src=' http : img/partner/maerdaifu。jpg ' div class=' pname '展示/div div class='pinfo '马尔代夫/div/div class=' partner ' img class=' row 1 ' src=' http : img/partner/Xiang。jpg ' div class=' pname '展示/div div class='pinfo '香港/div/div class=' partner ' img class=' row 1 ' src=' http : img/partner/张家界。jpg' div class='pname '展示/div div class='pinfo '张家界/div/div style=' clear : both '/div div class=' partner ' img class=' row 1 ' src=' http : img/partner/Xiang elila。jpg ' div class=' pname '展示/div div class='pinfo '香格里拉/div/div class=' partner ' img class=' row 1 ' src=' http : img/partner/青岛。jpg' div class='pname '展示/div div class='pinfo '青岛/div/div class=' partner ' img class=' row 1 ' src=' http : img/partner/Xiong。jpg ' div class=' pname '展示/div div class='pinfo '上海/div/div class=' partner ' img class=' row 1 ' src=' http : img/partner/徐州。jpg' div class='pname '展示/div div class='pinfo '台湾/div/div style=' clear : both '/div/div/div脚本$(' #皮川.partener ').mouseenter(function(){ $(this)).查找(' div ').css('color '，' red ')；$(这个)。查找(' img ').延迟(200)。停止()。clearQueue().动画({ borderRadius: ' 20 '，opacity: 1 }，' fast') }).mouseleave(函数(){ $(此)).查找(' div ').css('color '，' black ')；$(这个)。查找(' img ').延迟(200)。停止()。clearQueue().animate({ borderradius 3360 ' 60 '，opacity: 0.9 }，' fast ')} $(' # pic chuan。第1行').click(function(){ var picIndex=$(' # pic川。第1行').索引($(this))；$('.形式上的).hide()；$(' pic川').hide()；$('.形式上的).eq(picIndex).向下滑动("正常");}) $('#teamcont .关闭BTN ' .mouseenter(function(){ $(this)).CSS({ ' background ' : ' URL(img/close-s . png)' })；}).mouseleave(函数(){ $(此)).CSS({ ' background ' : ' URL(img/close-n . png)' })；}) $('#teamcont .关闭BTN ' .单击(函数(){ $(').形式上的).hide()；$(' pic川').show()；})/脚本！-代码结束-div style=' text-align : center；边距：0 0 20px 0 ' PP类=' STYLe 1 '十一，我们去哪/ppbr/p style=' margin 336020 px 0 '/p/div/body/html

以上是大家分享的jQuery鼠标代码，通过方形图片切换成圆边特效代码。希望大家都能喜欢。