這是一款基于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鼠標經過方形圖片切換成圓邊特效代碼，希望大家可以喜歡。
新聞熱點
疑難解答
