jQuery鼠標(biāo)經(jīng)過方形圖片切換成圓邊效果代碼分享
更新時間：2015年08月20日 10:49:05 投稿：lijiao
這篇文章主要介紹了jQuery鼠標(biāo)經(jīng)過方形圖片切換成圓邊特效，圖片可以自行替換，推薦給大家，有需要的小伙伴可以參考下。
這是一款基于jQuery鼠標(biāo)經(jīng)過方形圖片切換成圓邊特效代碼，點擊圖片會彈出浮層，用戶還可以自定義對應(yīng)圖片的標(biāo)題與文字說明，適合圖片頁面的展示，是一款非常實用的圖片特效源碼。
運行效果圖： --------------------------------效果演示 源碼下載----------------------------------
鼠標(biāo)經(jīng)過方形圖片切換成圓邊效果
點擊圖片會彈出浮層
為大家分享的jQuery鼠標(biāo)經(jīng)過方形圖片切換成圓邊效果代碼如下
<head>
<title>jQuery鼠標(biāo)經(jīng)過方形圖片切換成圓邊特效</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個一級行政區(qū)之一。
巴厘島上大部分為山地，全島山脈縱橫，地勢東高西低。島上的最高峰是阿貢火山（巴厘峰）海拔3142米。巴厘島是印度尼西亞唯一信奉印度教的地區(qū)。80%的人信奉印度教。主要通行的語言是印尼語和英語。
沙努爾、努沙-杜爾和庫達(dá)等處的海灘，是島上景色最美的海濱浴場，這里沙細(xì)灘闊、海水湛藍(lán)清澈。每年來此游覽的各國游客絡(luò)繹不絕。 由于巴厘島萬種風(fēng)情，景物甚為綺麗。因此，它還享有多種別稱，如“神明之島”、“惡魔之島”、“羅曼斯島”、“綺麗之島”、“天堂之島”、“魔幻之島”、“花之島”等。 </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">
雙魚島設(shè)施現(xiàn)代舒適。沿著從島上延伸至碼頭的長長棧道，不時有鯊魚及其它不小的魚在附近巡游。到了碼頭，沙地一側(cè)沿岸盡是數(shù)以萬計的小魚，密密麻麻結(jié)成一團(tuán)，周圍有小鯊魚或其它掠食魚類出沒。
至于碼頭另一側(cè)則是延伸成峭壁的礁巖地形，每塊礁巖周圍都有蝶魚、雀鯛等珊瑚礁魚類出沒，碼頭正下方也有成群的底棲性魚類，沿著峭壁的邊界，回游性的大物不時出沒，牛港參、海龜均有所見。就賞魚角度而言，雙魚島單單是碼頭邊就已精彩萬分。島上的日本客人很多，他們主要是來潛水的。 </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），全稱中華人民共和國香港特別行政區(qū)（Hong Kong Special Administrative Region of the People's Republic of China，簡寫：HKSAR）。由香港島、九龍半島、新界（包括大嶼山及230余個大小島嶼）組成。地處中國華南，珠江口東側(cè)，北隔深圳河與廣東深圳相接；西與澳門隔海相望；南臨南中國海。
香港是一座高度繁榮的國際大都市，是僅次于紐約和倫敦的全球第三大金融中心，與美國紐約、英國倫敦并稱“紐倫港”。香港是亞洲重要的金融、服務(wù)和航運中心，以廉潔的政府、良好的治安、自由的經(jīng)濟(jì)體系以及完善的法制聞名于世，有“東方之珠”、“美食天堂”和“購物天堂”等美譽(yù)。 </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個市轄區(qū)（永定區(qū)、武陵源區(qū)）、2個縣（慈利縣、桑植縣）。位于湖南西北部，澧水中上游，屬武陵山區(qū)腹地。張家界因旅游建市，是中國最重要的旅游城市之一，是湘鄂西、湘鄂川黔革命根據(jù)地的發(fā)源地和中心區(qū)域。
1982年9月，張家界國家森林公園成為中國第一個國家森林公園。
1988年8月，武陵源風(fēng)景名勝區(qū)列入第二批國家重點風(fēng)景名勝區(qū)；1992年，由張家界國家森林公園等三大景區(qū)構(gòu)成的武陵源自然風(fēng)景區(qū)被聯(lián)合國教科文組織列入《世界自然遺產(chǎn)名錄》；2004年2月，被列為中國首批《世界地質(zhì)公園》；2007年，被列入中國首批5A級景區(qū)。 </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">
香格里拉市是迪慶藏族自治州下轄市之一，市境位于云南省西北部，是滇、川及西藏三省區(qū)交匯處，也是“三江并流”風(fēng)景區(qū)腹地。截止到2014年，香格里拉市總面積11613平方公里，轄4個鎮(zhèn)、7個鄉(xiāng)，共有6個社區(qū)、58個行政村。
2011年，香格里拉市年末總?cè)丝跒?7.45萬人，除主體民族藏族外還有漢族、納西族、彝族、白族等十幾個民族，人口密度為10人/平方公里，是云南省面積最大、人口密度最低的市份之一。2011年，香格里拉實現(xiàn)縣級生產(chǎn)總值359580萬元，市級一、二、三產(chǎn)業(yè)增加值占全縣生總產(chǎn)值的比重為9.4:38.3:52.3。香格里拉縣主要旅游景點有哈巴雪山，普達(dá)措，梅里雪山等景點。 </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">
青島，別稱“島城”、“琴島”、舊稱“膠澳”，地處山東半島東南部沿海，膠東半島東部，東、南瀕臨黃海，隔海與朝鮮半島相望。擁有一個國家級新區(qū)（青島西海岸新區(qū)）。
青島是全國文明城市、中國最具幸福感城市、國家歷史文化名城、國家園林城市；是國家海洋科研及海洋產(chǎn)業(yè)開發(fā)中心城市，國家重要的現(xiàn)代化制造業(yè)及高新技術(shù)產(chǎn)業(yè)基地；是東北亞國際航運中心、國際港口、國家重要的區(qū)域性航空港，同時也是中國14個沿海開放城市、15個區(qū)域經(jīng)濟(jì)中心城市之一。 </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），簡稱“滬”或“申”，中華人民共和國直轄市，地處長江入?？?，隔東中國海與日本九州島相望，南瀕杭州灣，西與江蘇、浙江兩省相接，并與安徽相隔，共同構(gòu)成以上海為龍頭的“長江三角洲城市群”，是中國大陸首個自貿(mào)區(qū)“中國（上海）自由貿(mào)易試驗區(qū)”所在地。[1-2]
上海是一座國家歷史文化名城，擁有深厚的近代城市文化底蘊(yùn)和眾多歷史古跡。江南的吳越傳統(tǒng)文化與各地移民帶入的多樣文化相融合，形成了特有的海派文化。上海市已經(jīng)成功舉辦了2010年世界博覽會、中國上海國際藝術(shù)節(jié)、上海國際電影節(jié)等大型國際活動。 </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成為山地與丘陵，平原主要集中于西部沿海，地形海拔變化大。由于地處熱帶及亞熱帶氣候之交界，自然景觀與生態(tài)資源豐富多元。人口約2350萬，逾7成集中于西部5大都會區(qū)，其中以首要都市臺北為中心的臺北都會區(qū)最大。
臺灣是中國不可分割的一部分。原住民族（高山族）在17世紀(jì)漢族移入前即已在此定居；自明末清初始有較顯著之福建南部和廣東東部人民移墾，最終形成以漢族為主體的社會。南宋澎湖屬福建路；元、明在澎湖設(shè)巡檢司；明末被荷蘭和西班牙侵占；1662年鄭成功收復(fù)；清代1684年置臺灣府，屬福建省，1885年建?。?895年清政府以《馬關(guān)條約》割讓與日本；1945年抗戰(zhàn)勝利后光復(fù)；1949年國民黨政府在內(nèi)戰(zhàn)失利中退守臺灣，海峽兩岸分治至今。 </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>
<!-- 代碼 結(jié)束 -->
<div style="text-align:center;margin:0 0 20px 0">
<p><p class="STYLE1">十一，我們?nèi)ツ?lt;/p>
<p><br />
<p style="margin:20px 0"></p>
</div>
</body>
</html>
以上就是為大家分享的jQuery鼠標(biāo)經(jīng)過方形圖片切換成圓邊特效代碼，希望大家可以喜歡。
您可能感興趣的文章:
- jQuery實現(xiàn)鼠標(biāo)經(jīng)過事件的延時處理效果
- jQuery實現(xiàn)鼠標(biāo)經(jīng)過時出現(xiàn)隱藏層文字鏈接的方法
- jquery實現(xiàn)鼠標(biāo)經(jīng)過顯示下劃線的漸變下拉菜單效果代碼
- jQuery實現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點效果
- jQuery實現(xiàn)鼠標(biāo)經(jīng)過圖片變亮其他變暗效果
- jQuery實現(xiàn)鼠標(biāo)經(jīng)過提示信息的地圖熱點效果
- jquery實現(xiàn)通用版鼠標(biāo)經(jīng)過淡入淡出效果
- jQuery實現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過變色的兩種方法
- jQuery 鼠標(biāo)經(jīng)過(hover)事件的延時處理示例
- jQuery實現(xiàn)鼠標(biāo)經(jīng)過圖片預(yù)覽大圖效果
- Jquery利用mouseenter和mouseleave實現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點擊
- jquery簡單實現(xiàn)鼠標(biāo)經(jīng)過導(dǎo)航條改變背景圖
- jQuery實現(xiàn)的鼠標(biāo)經(jīng)過時變寬的效果(附demo源碼)
相關(guān)文章
簡單過濾選擇器：根據(jù)某類過濾規(guī)則進(jìn)行元素的匹配，書寫時都以冒號（：）開頭；簡單過濾選擇器是過濾選擇器中使用最廣泛的一種，感興趣的朋友可以參考下2013-04-04
這篇文章主要介紹了jQuery實現(xiàn)checkbox的簡單操作，對復(fù)選框組的全選、全不選、不全選，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了使用jQuery實現(xiàn)擲骰子游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
easyui簡介_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了easyui簡介，詳細(xì)的介紹了什么是easyui和easyui的用法，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了jquery手風(fēng)琴特效插件,效果非常棒，需要的朋友可以參考下2015-02-02
jQuery綁定點擊事件與改變事件的方式總結(jié)及多個元素綁定多個事件
我們一說到j(luò)Query中對于元素的修改,就是元素的內(nèi)容、屬性、樣式的修改,下面這篇文章主要給大家介紹了關(guān)于jQuery綁定點擊事件與改變事件的方式總結(jié)及多個元素綁定多個事件的相關(guān)資料,需要的朋友可以參考下2022-12-12
JQuery對ASP.NET MVC數(shù)據(jù)進(jìn)行更新刪除
這篇文章主要介紹了JQuery對ASP.NET MVC數(shù)據(jù)進(jìn)行更新刪除的相關(guān)資料,需要的朋友可以參考下2016-07-07
jQuery+datatables插件實現(xiàn)ajax加載數(shù)據(jù)與增刪改查功能示例
這篇文章主要介紹了jQuery+datatables插件實現(xiàn)ajax加載數(shù)據(jù)與增刪改查功能,涉及jQuery結(jié)合datatables插件針對頁面表格實現(xiàn)數(shù)據(jù)加載及增刪改查等相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了jquery制作搜狐快站頁面效果示例,需要的朋友可以參考下2014-02-02
基于jQuery的樹控件實現(xiàn)代碼(asp.net+json)
一個自己寫jQuery的樹控件,后臺用的是asp.net,其實只要服務(wù)器返回json就可以了2010-07-07