jQuery使用一個按鈕控制圖片的伸縮實(shí)現(xiàn)思路
更新時間：2013年04月19日 17:01:32 作者：
上一篇講解了jquery同時控制四張圖片的伸縮，想必大家對伸縮有一定了解了，本文將為大家介紹下使用按鈕控制圖片的伸縮，感興趣的朋友可以參考下哈
復(fù)制代碼 代碼如下:
<!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="點(diǎn)我看看" />
</div>
</form>
</body>
</html>
您可能感興趣的文章:
- jquery實(shí)現(xiàn)點(diǎn)擊向下展開菜單項(xiàng)(伸縮導(dǎo)航)效果
- jQuery實(shí)現(xiàn)的動態(tài)伸縮導(dǎo)航菜單實(shí)例
- JQuery伸縮導(dǎo)航練習(xí)示例
- jquery入門—編寫一個導(dǎo)航條(可伸縮)
- jquery實(shí)現(xiàn)可點(diǎn)擊伸縮與展開的菜單效果代碼
- jquery實(shí)現(xiàn)選中單選按鈕下拉伸縮效果
- jQuery實(shí)現(xiàn)首頁頂部可伸縮廣告特效代碼
- jQuery照片伸縮效果不影響其他元素的布局
- 使用jQuery同時控制四張圖片的伸縮實(shí)現(xiàn)代碼
- JQuery 圖片的展開和伸縮實(shí)例講解
- jquery實(shí)現(xiàn)頂部向右伸縮的導(dǎo)航區(qū)域代碼
相關(guān)文章
這篇文章主要介紹了jQuery實(shí)現(xiàn)列表的增加和刪除功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06
jQuery頁面圖片伴隨滾動條逐漸顯示的小例子，需要的朋友可以參考一下2013-03-03
js jquery獲取隨機(jī)生成id的服務(wù)器控件的三種方法
由于ASP.NET網(wǎng)頁運(yùn)行后，服務(wù)器控件會隨機(jī)生成客戶端id，jquery獲取時候不太好操作,下面為大家整理了三種方法，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
jQuery 實(shí)現(xiàn)鼠標(biāo)畫框并對框內(nèi)數(shù)據(jù)選中的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了jQuery 實(shí)現(xiàn)鼠標(biāo)畫框并對框內(nèi)數(shù)據(jù)選中的實(shí)例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-08-08
這篇文章主要介紹了jQuery實(shí)現(xiàn)UI設(shè)置固定日期選擇特效，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jQuery做一個可以半折疊的DIV元素由于jQueryUI中accordion沒有提供相關(guān)的方法因此自己寫了個，代碼質(zhì)量很低希望大家多多指點(diǎn)2013-03-03
通過最終效果發(fā)現(xiàn)，當(dāng)頭像處于最前面時，圖像最大，透明低。越往后頭像就越小，就越透明2011-12-12
jQuery Ajax向服務(wù)端傳遞數(shù)組參數(shù)值的實(shí)例代碼
在使用MVC時，向服務(wù)器端發(fā)送POST請求時有時需要傳遞數(shù)組作為參數(shù)值,下面通過實(shí)例代碼給大家介紹jQuery Ajax向服務(wù)端傳遞數(shù)組參數(shù)值的方法，一起看看吧2017-09-09
基于Jquery代碼實(shí)現(xiàn)支持PC端手機(jī)端幻燈片代碼
支持PC端手機(jī)端幻燈片代碼是一款支持移動觸摸，支持鼠標(biāo)拖拽切換，支持帶進(jìn)度條的自動播放模式，本文給大家分享一款基于jquery代碼實(shí)現(xiàn)支持pc端手機(jī)端幻燈片代碼，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
這次我們要實(shí)現(xiàn)的控件時Tab控件，在實(shí)際的應(yīng)用中也比較多2010-05-05