jQuery使用一個按鈕控制圖片的伸縮實現(xiàn)思路

更新時間：2013年04月19日 17:01:32 作者：

上一篇講解了jquery同時控制四張圖片的伸縮，想必大家對伸縮有一定了解了，本文將為大家介紹下使用按鈕控制圖片的伸縮，感興趣的朋友可以參考下哈

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#img1 
{ 
width: 500px; 
height: 400px; 
border: solid 1px #ccc; 
display:none; 
} 
</style> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var count = 0; 
$(function () { 
$('#Button1').click(function () { 
if (count % 2 != 0) { 
$('#img1').hide(5000); 
} 
else { 
$('#img1').show(5000); 
} 
count++; 
}) 
}) 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<img id="img1" src="images/1.jpg" /> 
<input id="Button1" type="button" value="點我看看" /> 
</div> 
</form> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jQuery實現(xiàn)列表的增加和刪除功能
這篇文章主要介紹了jQuery實現(xiàn)列表的增加和刪除功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧
2018-06-06
jQuery頁面圖片伴隨滾動條逐漸顯示的小例子
jQuery頁面圖片伴隨滾動條逐漸顯示的小例子，需要的朋友可以參考一下
2013-03-03
js jquery獲取隨機生成id的服務(wù)器控件的三種方法
由于ASP.NET網(wǎng)頁運行后，服務(wù)器控件會隨機生成客戶端id，jquery獲取時候不太好操作,下面為大家整理了三種方法，感興趣的朋友可以參考下哈，希望對大家有所幫助
2013-07-07
jQuery 實現(xiàn)鼠標(biāo)畫框并對框內(nèi)數(shù)據(jù)選中的實例代碼
本文通過實例代碼給大家介紹了jQuery 實現(xiàn)鼠標(biāo)畫框并對框內(nèi)數(shù)據(jù)選中的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-08-08
jQuery UI設(shè)置固定日期選擇特效代碼分享
這篇文章主要介紹了jQuery實現(xiàn)UI設(shè)置固定日期選擇特效，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jQuery+CSS 半開折疊效果原理及代碼(自寫)
jQuery做一個可以半折疊的DIV元素由于jQueryUI中accordion沒有提供相關(guān)的方法因此自己寫了個，代碼質(zhì)量很低希望大家多多指點
2013-03-03
jquery隨機展示頭像代碼
通過最終效果發(fā)現(xiàn)，當(dāng)頭像處于最前面時，圖像最大，透明低。越往后頭像就越小，就越透明
2011-12-12
jQuery Ajax向服務(wù)端傳遞數(shù)組參數(shù)值的實例代碼
在使用MVC時，向服務(wù)器端發(fā)送POST請求時有時需要傳遞數(shù)組作為參數(shù)值,下面通過實例代碼給大家介紹jQuery Ajax向服務(wù)端傳遞數(shù)組參數(shù)值的方法，一起看看吧
2017-09-09
基于Jquery代碼實現(xiàn)支持PC端手機端幻燈片代碼
支持PC端手機端幻燈片代碼是一款支持移動觸摸，支持鼠標(biāo)拖拽切換，支持帶進度條的自動播放模式，本文給大家分享一款基于jquery代碼實現(xiàn)支持pc端手機端幻燈片代碼，感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
用jQuery打造TabPanel效果代碼
這次我們要實現(xiàn)的控件時Tab控件，在實際的應(yīng)用中也比較多
2010-05-05