jQuery圖片的展開和收縮實現(xiàn)代碼
更新時間：2013年04月16日 14:42:13 作者：
圖片的展開和收縮使用jquery實現(xiàn)不可思議吧，感興趣的朋友可以參考下哈，希望對你學習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">
$(document).ready(function () {
$('#Button1').click(function () {
$('#img1').show(5000);
});
$('#Button2').click(function () {
$('#img1').hide(5000);
})
$('#Button3').click(function () {
$('#img1').fadeIn(2000);
})
$('#Button4').click(function () {
$('#img1').fadeOut(1000);
})
})
</script>
</head>
<body>
<img id="img1" src="images/1.jpg" />
<input id="Button1" type="button" value="展開圖片" />
<input id="Button2" type="button" value="收縮圖片" />
<input id="Button3" type="button" value="圖片" />
<input id="Button4" type="button" value="圖片1" />
</body>
</html>
相關文章
jquery實現(xiàn)文字單行橫移或翻轉(zhuǎn)（上下、左右跳轉(zhuǎn)）
本文詳細介紹了jquery實現(xiàn)單行橫移或翻轉(zhuǎn)（上下、左右跳轉(zhuǎn)）的方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
jQuery ui插件的使用方法代碼實例，需要的朋友可以參考一下2013-05-05
jQuery實現(xiàn)批量判斷表單中文本框非空的方法(2種方法)
這篇文章主要介紹了jQuery實現(xiàn)批量判斷表單中文本框非空的方法,實例分析了2種實現(xiàn)判定非空的技巧,涉及jQuery頁面元素遍歷的相關技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jquery選擇器排除某個DOM元素的方法,也就是在選中的一些元素中,過濾一些不需要的,使用jquery not選擇器實現(xiàn),需要的朋友可以參考下2014-04-04
基于jQuery的AJAX和JSON實現(xiàn)純html數(shù)據(jù)模板
jQuery內(nèi)置的AJAX功能，直接訪問后臺獲得JSON格式的數(shù)據(jù)，從而實現(xiàn)純html數(shù)據(jù)模板，下面主要給大家介紹實現(xiàn)代碼，感興趣的朋友一起看下吧2016-08-08
在平時的項目中，我們經(jīng)常需要一些特效鏈接，如果使效果進一步加強，我們可以使點擊錨點鏈接平滑滾動到錨點，下面就來給大家講解下如何使用jQuery來實現(xiàn)。2015-05-05
下面小編就為大家?guī)硪黄猨query使用on綁定a標簽無效 只能用live解決。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
老規(guī)矩，先上html和css,還是用官方的，只是去掉了些東西2012-07-07
下面小編就為大家?guī)硪黄啿サ暮唵螌崿F(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了jquery中為什么能用$操作，jquery直接用$來獲取dom節(jié)點的方式也非常便捷方便，那么他是怎么實現(xiàn)的呢？,需要的朋友可以參考下2019-06-06