欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery鼠標經(jīng)過方形圖片切換成圓邊效果代碼分享

 更新時間：2015年08月20日 10:49:05   投稿：lijiao  
這篇文章主要介紹了jQuery鼠標經(jīng)過方形圖片切換成圓邊特效，圖片可以自行替換，推薦給大家，有需要的小伙伴可以參考下。

這是一款基于jQuery鼠標經(jīng)過方形圖片切換成圓邊特效代碼，點擊圖片會彈出浮層，用戶還可以自定義對應圖片的標題與文字說明，適合圖片頁面的展示，是一款非常實用的圖片特效源碼。

運行效果圖： --------------------------------效果演示 源碼下載----------------------------------

鼠標經(jīng)過方形圖片切換成圓邊效果

點擊圖片會彈出浮層

為大家分享的jQuery鼠標經(jīng)過方形圖片切換成圓邊效果代碼如下

<head>

<title>jQuery鼠標經(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%的人信奉印度教。主要通行的語言是印尼語和英語。
沙努爾、努沙-杜爾和庫達等處的海灘，是島上景色最美的海濱浴場，這里沙細灘闊、海水湛藍清澈。每年來此游覽的各國游客絡繹不絕。 由于巴厘島萬種風情，景物甚為綺麗。因此，它還享有多種別稱，如“神明之島”、“惡魔之島”、“羅曼斯島”、“綺麗之島”、“天堂之島”、“魔幻之島”、“花之島”等。   </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"> 
 雙魚島設施現(xiàn)代舒適。沿著從島上延伸至碼頭的長長棧道，不時有鯊魚及其它不小的魚在附近巡游。到了碼頭，沙地一側沿岸盡是數(shù)以萬計的小魚，密密麻麻結成一團，周圍有小鯊魚或其它掠食魚類出沒。
至于碼頭另一側則是延伸成峭壁的礁巖地形，每塊礁巖周圍都有蝶魚、雀鯛等珊瑚礁魚類出沒，碼頭正下方也有成群的底棲性魚類，沿著峭壁的邊界，回游性的大物不時出沒，牛港參、海龜均有所見。就賞魚角度而言，雙魚島單單是碼頭邊就已精彩萬分。島上的日本客人很多，他們主要是來潛水的。 </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余個大小島嶼）組成。地處中國華南，珠江口東側，北隔深圳河與廣東深圳相接；西與澳門隔海相望；南臨南中國海。
香港是一座高度繁榮的國際大都市，是僅次于紐約和倫敦的全球第三大金融中心，與美國紐約、英國倫敦并稱“紐倫港”。香港是亞洲重要的金融、服務和航運中心，以廉潔的政府、良好的治安、自由的經(jī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/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月，武陵源風景名勝區(qū)列入第二批國家重點風景名勝區(qū)；1992年，由張家界國家森林公園等三大景區(qū)構成的武陵源自然風景區(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ū)交匯處，也是“三江并流”風景區(qū)腹地。截止到2014年，香格里拉市總面積11613平方公里，轄4個鎮(zhèn)、7個鄉(xiāng)，共有6個社區(qū)、58個行政村。
2011年，香格里拉市年末總人口為17.45萬人，除主體民族藏族外還有漢族、納西族、彝族、白族等十幾個民族，人口密度為10人/平方公里，是云南省面積最大、人口密度最低的市份之一。2011年，香格里拉實現(xiàn)縣級生產(chǎn)總值359580萬元，市級一、二、三產(chǎn)業(yè)增加值占全縣生總產(chǎn)值的比重為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"> 
 青島，別稱“島城”、“琴島”、舊稱“膠澳”，地處山東半島東南部沿海，膠東半島東部，東、南瀕臨黃海，隔海與朝鮮半島相望。擁有一個國家級新區(qū)（青島西海岸新區(qū)）。
青島是全國文明城市、中國最具幸福感城市、國家歷史文化名城、國家園林城市；是國家海洋科研及海洋產(chǎn)業(yè)開發(fā)中心城市，國家重要的現(xiàn)代化制造業(yè)及高新技術產(chǎn)業(yè)基地；是東北亞國際航運中心、國際港口、國家重要的區(qū)域性航空港，同時也是中國14個沿海開放城市、15個區(qū)域經(jī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/xiong.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">上海</div>
 </div>
 </div>
 <div class="showRight">
 
 <div class="huncontent"> 
 上海（Shanghai），簡稱“滬”或“申”，中華人民共和國直轄市，地處長江入?？?，隔東中國海與日本九州島相望，南瀕杭州灣，西與江蘇、浙江兩省相接，并與安徽相隔，共同構成以上海為龍頭的“長江三角洲城市群”，是中國大陸首個自貿(mào)區(qū)“中國（上海）自由貿(mào)易試驗區(qū)”所在地。[1-2] 
上海是一座國家歷史文化名城，擁有深厚的近代城市文化底蘊和眾多歷史古跡。江南的吳越傳統(tǒng)文化與各地移民帶入的多樣文化相融合，形成了特有的海派文化。上海市已經(jīng)成功舉辦了2010年世界博覽會、中國上海國際藝術節(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世紀漢族移入前即已在此定居；自明末清初始有較顯著之福建南部和廣東東部人民移墾，最終形成以漢族為主體的社會。南宋澎湖屬福建路；元、明在澎湖設巡檢司；明末被荷蘭和西班牙侵占；1662年鄭成功收復；清代1684年置臺灣府，屬福建省，1885年建省；1895年清政府以《馬關條約》割讓與日本；1945年抗戰(zhàn)勝利后光復；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>
<!-- 代碼 結束 -->

<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鼠標經(jīng)過方形圖片切換成圓邊特效代碼，希望大家可以喜歡。

相關文章

最新評論