腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

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

更新時(shí)間：2015年08月20日 10:49:05 投稿：lijiao

這篇文章主要介紹了jQuery鼠標(biāo)經(jīng)過(guò)方形圖片切換成圓邊特效，圖片可以自行替換，推薦給大家，有需要的小伙伴可以參考下。

這是一款基于jQuery鼠標(biāo)經(jīng)過(guò)方形圖片切換成圓邊特效代碼，點(diǎn)擊圖片會(huì)彈出浮層，用戶還可以自定義對(duì)應(yīng)圖片的標(biāo)題與文字說(shuō)明，適合圖片頁(yè)面的展示，是一款非常實(shí)用的圖片特效源碼。

運(yùn)行效果圖： --------------------------------效果演示源碼下載----------------------------------

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

點(diǎn)擊圖片會(huì)彈出浮層

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

<head>

<title>jQuery鼠標(biāo)經(jīng)過(guò)方形圖片切換成圓邊特效</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>
<!-- 代碼 開(kāi)始 -->
<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個(gè)一級(jí)行政區(qū)之一。
巴厘島上大部分為山地，全島山脈縱橫，地勢(shì)東高西低。島上的最高峰是阿貢火山（巴厘峰）海拔3142米。巴厘島是印度尼西亞唯一信奉印度教的地區(qū)。80%的人信奉印度教。主要通行的語(yǔ)言是印尼語(yǔ)和英語(yǔ)。
沙努爾、努沙-杜爾和庫(kù)達(dá)等處的海灘，是島上景色最美的海濱浴場(chǎng)，這里沙細(xì)灘闊、海水湛藍(lán)清澈。每年來(lái)此游覽的各國(guó)游客絡(luò)繹不絕。 由于巴厘島萬(wàn)種風(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">雙魚(yú)島</div>
 </div>
 </div>
 <div class="showRight">
 <div class="huncontent"> 
 雙魚(yú)島設(shè)施現(xiàn)代舒適。沿著從島上延伸至碼頭的長(zhǎng)長(zhǎng)棧道，不時(shí)有鯊魚(yú)及其它不小的魚(yú)在附近巡游。到了碼頭，沙地一側(cè)沿岸盡是數(shù)以萬(wàn)計(jì)的小魚(yú)，密密麻麻結(jié)成一團(tuán)，周?chē)行□忯~(yú)或其它掠食魚(yú)類出沒(méi)。
至于碼頭另一側(cè)則是延伸成峭壁的礁巖地形，每塊礁巖周?chē)加械~(yú)、雀鯛等珊瑚礁魚(yú)類出沒(méi)，碼頭正下方也有成群的底棲性魚(yú)類，沿著峭壁的邊界，回游性的大物不時(shí)出沒(méi)，牛港參、海龜均有所見(jiàn)。就賞魚(yú)角度而言，雙魚(yú)島單單是碼頭邊就已精彩萬(wàn)分。島上的日本客人很多，他們主要是來(lái)潛水的。 </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），全稱中華人民共和國(guó)香港特別行政區(qū)（Hong Kong Special Administrative Region of the People's Republic of China，簡(jiǎn)寫(xiě)：HKSAR）。由香港島、九龍半島、新界（包括大嶼山及230余個(gè)大小島嶼）組成。地處中國(guó)華南，珠江口東側(cè)，北隔深圳河與廣東深圳相接；西與澳門(mén)隔海相望；南臨南中國(guó)海。
香港是一座高度繁榮的國(guó)際大都市，是僅次于紐約和倫敦的全球第三大金融中心，與美國(guó)紐約、英國(guó)倫敦并稱“紐倫港”。香港是亞洲重要的金融、服務(wù)和航運(yùn)中心，以廉潔的政府、良好的治安、自由的經(jīng)濟(jì)體系以及完善的法制聞名于世，有“東方之珠”、“美食天堂”和“購(gòu)物天堂”等美譽(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"> 
 張家界是湖南省轄地級(jí)市，原名大庸市，轄2個(gè)市轄區(qū)（永定區(qū)、武陵源區(qū)）、2個(gè)縣（慈利縣、桑植縣）。位于湖南西北部，澧水中上游，屬武陵山區(qū)腹地。張家界因旅游建市，是中國(guó)最重要的旅游城市之一，是湘鄂西、湘鄂川黔革命根據(jù)地的發(fā)源地和中心區(qū)域。
1982年9月，張家界國(guó)家森林公園成為中國(guó)第一個(gè)國(guó)家森林公園。
1988年8月，武陵源風(fēng)景名勝區(qū)列入第二批國(guó)家重點(diǎn)風(fēng)景名勝區(qū)；1992年，由張家界國(guó)家森林公園等三大景區(qū)構(gòu)成的武陵源自然風(fēng)景區(qū)被聯(lián)合國(guó)教科文組織列入《世界自然遺產(chǎn)名錄》；2004年2月，被列為中國(guó)首批《世界地質(zhì)公園》；2007年，被列入中國(guó)首批5A級(jí)景區(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個(gè)鎮(zhèn)、7個(gè)鄉(xiāng)，共有6個(gè)社區(qū)、58個(gè)行政村。
2011年，香格里拉市年末總?cè)丝跒?7.45萬(wàn)人，除主體民族藏族外還有漢族、納西族、彝族、白族等十幾個(gè)民族，人口密度為10人/平方公里，是云南省面積最大、人口密度最低的市份之一。2011年，香格里拉實(shí)現(xiàn)縣級(jí)生產(chǎn)總值359580萬(wàn)元，市級(jí)一、二、三產(chǎn)業(yè)增加值占全縣生總產(chǎn)值的比重為9.4:38.3:52.3。香格里拉縣主要旅游景點(diǎn)有哈巴雪山，普達(dá)措，梅里雪山等景點(diǎn)。 </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"> 
 青島，別稱“島城”、“琴島”、舊稱“膠澳”，地處山東半島東南部沿海，膠東半島東部，東、南瀕臨黃海，隔海與朝鮮半島相望。擁有一個(gè)國(guó)家級(jí)新區(qū)（青島西海岸新區(qū)）。
青島是全國(guó)文明城市、中國(guó)最具幸福感城市、國(guó)家歷史文化名城、國(guó)家園林城市；是國(guó)家海洋科研及海洋產(chǎn)業(yè)開(kāi)發(fā)中心城市，國(guó)家重要的現(xiàn)代化制造業(yè)及高新技術(shù)產(chǎn)業(yè)基地；是東北亞國(guó)際航運(yùn)中心、國(guó)際港口、國(guó)家重要的區(qū)域性航空港，同時(shí)也是中國(guó)14個(gè)沿海開(kāi)放城市、15個(gè)區(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），簡(jiǎn)稱“滬”或“申”，中華人民共和國(guó)直轄市，地處長(zhǎng)江入海口，隔東中國(guó)海與日本九州島相望，南瀕杭州灣，西與江蘇、浙江兩省相接，并與安徽相隔，共同構(gòu)成以上海為龍頭的“長(zhǎng)江三角洲城市群”，是中國(guó)大陸首個(gè)自貿(mào)區(qū)“中國(guó)（上海）自由貿(mào)易試驗(yàn)區(qū)”所在地。[1-2] 
上海是一座國(guó)家歷史文化名城，擁有深厚的近代城市文化底蘊(yùn)和眾多歷史古跡。江南的吳越傳統(tǒng)文化與各地移民帶入的多樣文化相融合，形成了特有的海派文化。上海市已經(jīng)成功舉辦了2010年世界博覽會(huì)、中國(guó)上海國(guó)際藝術(shù)節(jié)、上海國(guó)際電影節(jié)等大型國(guó)際活動(dò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/xuzhou.jpg" >
 <div class="pname">展示</div>
 <div class="pinfo">臺(tái)灣</div>
 </div>
 </div>
 <div class="showRight">
 <div class="huncontent"> 
 臺(tái)灣（Taiwan）位于中國(guó)大陸東南沿海的大陸架上，東臨太平洋，東北鄰琉球群島，南界巴士海峽與菲律賓群島相對(duì)，西隔臺(tái)灣海峽與福建省相望，總面積約3.6萬(wàn)平方千米，包括臺(tái)灣島及蘭嶼、綠島、釣魚(yú)島等21個(gè)附屬島嶼和澎湖列島64個(gè)島嶼。臺(tái)灣島面積35882.6258平方千米，是中國(guó)第一大島，7成為山地與丘陵，平原主要集中于西部沿海，地形海拔變化大。由于地處熱帶及亞熱帶氣候之交界，自然景觀與生態(tài)資源豐富多元。人口約2350萬(wàn)，逾7成集中于西部5大都會(huì)區(qū)，其中以首要都市臺(tái)北為中心的臺(tái)北都會(huì)區(qū)最大。
臺(tái)灣是中國(guó)不可分割的一部分。原住民族（高山族）在17世紀(jì)漢族移入前即已在此定居；自明末清初始有較顯著之福建南部和廣東東部人民移墾，最終形成以漢族為主體的社會(huì)。南宋澎湖屬福建路；元、明在澎湖設(shè)巡檢司；明末被荷蘭和西班牙侵占；1662年鄭成功收復(fù)；清代1684年置臺(tái)灣府，屬福建省，1885年建??；1895年清政府以《馬關(guān)條約》割讓與日本；1945年抗戰(zhàn)勝利后光復(fù)；1949年國(guó)民黨政府在內(nèi)戰(zhàn)失利中退守臺(tái)灣，海峽兩岸分治至今。 </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">臺(tái)灣</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)過(guò)方形圖片切換成圓邊特效代碼，希望大家可以喜歡。

您可能感興趣的文章: