使用jQuery同時控制四張圖片的伸縮實現(xiàn)代碼
更新時間：2013年04月19日 16:57:45 作者：
控制圖片的伸縮想必大家都有看到過吧，不過同時控制四張圖片的伸縮卻不是那么的常見吧，接下來為大家詳細(xì)介紹下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">
.imgclass
{
height:200px;
width:200px;
}
.imgclass1
{
width:210px; height:210px;
}
table tr td
{
width:250px; height:250px;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
// 獲取的是所有類型(tagname)為img的元素
// $('img').show(3000);
// $('img').hide(3000);
// //獲取的是所有class屬性的值為“imgclass”的元素
// $('.imgclass').hide(3000);
// $('.imgclass').show(3000);
// $("#img1, #img2, #Button1").hide(2000);
// $("#img1, #img2, #Button1").show(2000); //一定是將所有id用一對''括起來，而不能每個id分別用引號括起來
// //多個選擇器既可以是id，也可以是id，tagname和classname的混合體
// $("#img1, #img2, input").hide(2000);
// $("#img1, #img2, input").show(2000);
//改變圖片樣式
$('#Button2').click(function () {
// $('#img2').removeClass();//刪除Id為img2的class樣式
$('#img2').addClass('imgclass1');//然后再添加一個樣式，再次點擊按鈕操作圖片時，由于此圖片的樣式已改，所以不發(fā)生變化
})
})
})
</script>
</head>
<body>
<table>
<tr><td><img alt="" id="img1" src="images/1.jpg" class="imgclass" /></td><td><img alt="" id="img2" src="images/2.jpg" class="imgclass" /></td></tr>
<tr><td><img alt="" id="img3" src="images/3.jpg" class="imgclass" /></td><td><img alt="" id="img4" src="images/4.jpg" class="imgclass" /></td></tr>
<tr><td></td><td>
<input id="Button1" type="button" value="點我啊" /></td></tr>
<tr><td></td><td> <input id="Button2" type="button" value="改變控件樣式" /></td></tr>
</table>
</body>
</html>
您可能感興趣的文章:
- jquery實現(xiàn)點擊向下展開菜單項(伸縮導(dǎo)航)效果
- jQuery實現(xiàn)的動態(tài)伸縮導(dǎo)航菜單實例
- JQuery伸縮導(dǎo)航練習(xí)示例
- jquery入門—編寫一個導(dǎo)航條(可伸縮)
- jquery實現(xiàn)可點擊伸縮與展開的菜單效果代碼
- jquery實現(xiàn)選中單選按鈕下拉伸縮效果
- jQuery實現(xiàn)首頁頂部可伸縮廣告特效代碼
- jQuery照片伸縮效果不影響其他元素的布局
- jQuery使用一個按鈕控制圖片的伸縮實現(xiàn)思路
- JQuery 圖片的展開和伸縮實例講解
- jquery實現(xiàn)頂部向右伸縮的導(dǎo)航區(qū)域代碼
相關(guān)文章
children()是jQuery中的內(nèi)置方法,用于查找與所選元素相關(guān)的所有子元素,?jQuery中的children()方法向下遍歷到所選元素的單個級別并返回所有元素,我們還可以在children()的參數(shù)中添加過濾器、使用children()來定位特定的子元素以及使用each()方法來迭代子元素等2023-11-11
jquery實現(xiàn)類似EasyUI的頁面布局可改變左右的寬度
這篇文章主要介紹了通過jquery實現(xiàn)類似EasyUI的頁面布局可改變左右的寬度,需要的朋友可以參考下2014-07-07
jQuery簡介_動力節(jié)點Java學(xué)院整理
目前jQuery有1.x和2.x兩個主要版本，區(qū)別在于2.x移除了對古老的IE 6、7、8的支持，因此2.x的代碼更精簡。選擇哪個版本主要取決于你是否想支持IE 6~8，下文給大分享jquery 簡介的相關(guān)知識，感興趣的朋友一起看看吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了jquery自定義右鍵菜單、全選、不連續(xù)選擇的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了jquery交替變換顏色的三種方法，有需要的朋友可以參考一下2013-11-11
jquery.messager.js插件導(dǎo)致頁面抖動的解決方法
這盤文章介紹了jquery.messager.js插件導(dǎo)致頁面抖動的解決方法，有需要的朋友可以參考一下2013-07-07
ajax頁面無刷新 IE下遭遇Ajax緩存導(dǎo)致數(shù)據(jù)不更新的問題
在做ajax頁面無刷新添加的時候，IE下遭遇Ajax緩存，因為剛開始并不知道IE有這個壞毛病，折騰好久，終于解決問題,曬出來和大家分享，希望可以幫助你們2012-12-12
這篇文章主要介紹了jquery中checkbox使用方法簡單實例演示，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了jQuery中append()方法用法,以實例形式較為詳細(xì)的分析了append()方法的功能、定義與使用技巧,并對比分析了與text()方法的區(qū)別,需要的朋友可以參考下2014-12-12
ASP.NET jQuery 實例5 (顯示CheckBoxList成員選中的內(nèi)容)
這章我們主要看下如何通過jQuery來獲取CheckBoxList成員內(nèi)容2012-01-01