jQuery實(shí)現(xiàn)點(diǎn)擊圖標(biāo)div循環(huán)放大縮小功能
更新時(shí)間：2018年09月30日 10:28:03 投稿：mrr
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊圖標(biāo)div循環(huán)放大縮小功能,這是一個(gè)很常見(jiàn)很基礎(chǔ)的功能，下面小編通過(guò)實(shí)例代碼給大家介紹，需要的朋友可以參考下
很基礎(chǔ)的一個(gè)功能，點(diǎn)擊左下角的圖標(biāo)按鈕，地圖的整個(gè)div會(huì)變大，變大預(yù)覽之后，再次點(diǎn)擊圖標(biāo)按鈕，地圖的整個(gè)div會(huì)變小，恢復(fù)原樣，兩個(gè)圖標(biāo)在地圖界面的放大和縮小時(shí)間不斷的切換圖標(biāo)狀態(tài)（箭頭向里面，或者箭頭向外面）
圖片.png
圖片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<style>
#scale {
background: #FFFFFF url('../img/suo.png') no-repeat scroll 0px 0px;
background-position: center center;
position: absolute;
left: 3%;
bottom: 40%;
width: 26px;
height: 26px;
}
#scale.current {
background: #FFFFFF url("../img/fang.png") no-repeat scroll 0px 0px;
background-position: center center;
}
#updmap {
border: 1px solid #1E90FF;
width: 400px;
height: 200px
}
</style>
</head>
<body>
<div id="scale" style=""></div>
<div id="updmap">
</div>
</body>
<script>
$("#scale").toggle(function() {
$(this).toggleClass("current");
$("#updmap").css({
"width": "950px",
"height": "400px",
});
}, function() {
$(this).toggleClass("current");
$("#updmap").css({
"width": "400px",
"height": "200px",
});
});
</script>
</html>
總結(jié)
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)點(diǎn)擊圖標(biāo)div循環(huán)放大縮小功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
javascript trim函數(shù)在IE下不能用的解決方法
trim 函數(shù)在firefox 下面使用沒(méi)有問(wèn)題，但是在IE下就報(bào)錯(cuò)，下面是可行的解決方法，大家可以看看2014-09-09
下面小編就為大家?guī)?lái)一篇jQuery效果函數(shù)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-09-09
用示例說(shuō)明filter()與find()的用法以及children()與find()的區(qū)別分析
本篇文章介紹了，用示例說(shuō)明filter()與find()的用法以及children()與find()的區(qū)別分析。需要的朋友參考下2013-04-04
這篇文章主要介紹了jQuery中before()方法用法,以實(shí)例形式分析了before()方法的功能、定義與具體使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery實(shí)現(xiàn)鼠標(biāo)懸停背景翻轉(zhuǎn)的黑色導(dǎo)航菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)懸停背景翻轉(zhuǎn)的黑色導(dǎo)航菜單代碼,涉及jQuery鼠標(biāo)事件結(jié)合animate動(dòng)畫實(shí)現(xiàn)背景翻轉(zhuǎn)效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
JQuery AJAX實(shí)現(xiàn)目錄瀏覽與編輯的代碼
這部分作為后臺(tái)的一部分實(shí)現(xiàn)，目的是實(shí)現(xiàn)某個(gè)指定目錄下所有文件夾和文件的瀏覽，同時(shí)不顯示不允許的格式，對(duì)于文本格式和代碼文件可以進(jìn)行編輯2008-10-10
這篇文章主要為大家詳細(xì)介紹了jQuery插件ajaxFileUpload使用教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jquery實(shí)現(xiàn)上下左右滑動(dòng)的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)上下左右滑動(dòng)的方法,是jQuery特效中非常典型的應(yīng)用,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jQuery過(guò)濾選擇器:not()方法的使用,需要的朋友可以參考下2014-04-04
本篇文章給大家講述了用webpack開(kāi)發(fā)jquery插件需要的環(huán)境以及配置講解，有需要的讀者們參考下吧。2017-12-12