基于Jquery的淡入淡出的特效基礎(chǔ)練習(xí)
更新時(shí)間：2010年12月13日 17:06:12 作者：
基于Jquery的淡入淡出的特效基礎(chǔ)練習(xí)實(shí)現(xiàn)代碼，學(xué)習(xí)jquery的朋友可以參考下。
今天練習(xí)了個(gè)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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<script type='text/javascript' src='jquery-1.2.6.min.js'></script>
<style type="text/css">
#gallery1 {width:100%; overflow:hidden;}
#gallery1 a {position:relative; float:left; margin:5px;}
#gallery1 a span { display:none; background-image:url(zoom.png); background-repeat:no-repeat; width:48px; height:48px; position:absolute; left:15px; top:15px;}
#gallery1 img { border: solid 1px #999; padding:5px;}
#gallery1 a:hover span { display:block;}
#gallery2 {width:100%; overflow:hidden;}
#gallery2 a {position:relative; float:left; margin:5px;}
#gallery2 a span { display:none; background-image:url(zoom.png); background-repeat:no-repeat; width:48px; height:48px; position:absolute; left:15px; top:15px;}
#gallery2 img { border: solid 1px #999; padding:5px;}
</style>
<script>
$(document).ready(function(){
$("#gallery2 a").append("<span></span>");
$("#gallery2 a").hover(function(){
$(this).children("span").fadeIn(600);
},function(){
$(this).children("span").fadeOut(200);
});
});
</script>
</head>
<body>
<div id="gallery1">
<h2>CSS solution</h2>
<a href="1.jpg">
<span></span>
<img src="1.jpg" alt="" />
</a>
<a href="2.jpg">
<span></span>
<img src="2.jpg" alt="" />
</a>
</div>
<div id="gallery2">
<h2>jQuery solution</h2>
<a href="1.jpg">
<img src="1.jpg" alt="" />
</a>
<a href="2.jpg">
<img src="2.jpg" alt="" />
</a>
</div>
</body>
</html>
用到的圖片：
一個(gè)淡入淡出小例子：
<body>
<form action="" method="post" id ="myform">
<button value="Click Me">Click Me</button>
<p style="background:red;" >context<br>context<br>context<br>context</p>
</form>
</body>
</html>
Jquery代碼
$(document).ready(
function() {
/*淡入淡出*/
$("button").toggle(
function (){
$("p").fadeOut("fast",function(){
}
)
},
function (){
$("p").fadeIn("fast",function(){
}
)
}
);
});
演示代碼 http://demo.jb51.net/js/zoom_icon%20to_images/index.htm
復(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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<script type='text/javascript' src='jquery-1.2.6.min.js'></script>
<style type="text/css">
#gallery1 {width:100%; overflow:hidden;}
#gallery1 a {position:relative; float:left; margin:5px;}
#gallery1 a span { display:none; background-image:url(zoom.png); background-repeat:no-repeat; width:48px; height:48px; position:absolute; left:15px; top:15px;}
#gallery1 img { border: solid 1px #999; padding:5px;}
#gallery1 a:hover span { display:block;}
#gallery2 {width:100%; overflow:hidden;}
#gallery2 a {position:relative; float:left; margin:5px;}
#gallery2 a span { display:none; background-image:url(zoom.png); background-repeat:no-repeat; width:48px; height:48px; position:absolute; left:15px; top:15px;}
#gallery2 img { border: solid 1px #999; padding:5px;}
</style>
<script>
$(document).ready(function(){
$("#gallery2 a").append("<span></span>");
$("#gallery2 a").hover(function(){
$(this).children("span").fadeIn(600);
},function(){
$(this).children("span").fadeOut(200);
});
});
</script>
</head>
<body>
<div id="gallery1">
<h2>CSS solution</h2>
<a href="1.jpg">
<span></span>
<img src="1.jpg" alt="" />
</a>
<a href="2.jpg">
<span></span>
<img src="2.jpg" alt="" />
</a>
</div>
<div id="gallery2">
<h2>jQuery solution</h2>
<a href="1.jpg">
<img src="1.jpg" alt="" />
</a>
<a href="2.jpg">
<img src="2.jpg" alt="" />
</a>
</div>
</body>
</html>
用到的圖片：
一個(gè)淡入淡出小例子：
復(fù)制代碼 代碼如下:
<body>
<form action="" method="post" id ="myform">
<button value="Click Me">Click Me</button>
<p style="background:red;" >context<br>context<br>context<br>context</p>
</form>
</body>
</html>
Jquery代碼
復(fù)制代碼 代碼如下:
$(document).ready(
function() {
/*淡入淡出*/
$("button").toggle(
function (){
$("p").fadeOut("fast",function(){
}
)
},
function (){
$("p").fadeIn("fast",function(){
}
)
}
);
});
演示代碼 http://demo.jb51.net/js/zoom_icon%20to_images/index.htm
您可能感興趣的文章:
- 原生js和jquery實(shí)現(xiàn)圖片輪播淡入淡出效果
- jQuery實(shí)現(xiàn)的淡入淡出與滑入滑出效果示例
- jquery 淡入淡出效果的簡(jiǎn)單實(shí)現(xiàn)
- jquery實(shí)現(xiàn)通用版鼠標(biāo)經(jīng)過(guò)淡入淡出效果
- jQuery 淡入淡出、展開收縮菜單實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)的文字淡入淡出效果
- 基于jQuery實(shí)現(xiàn)淡入淡出效果輪播圖
- jQuery實(shí)現(xiàn)新聞播報(bào)滾動(dòng)及淡入淡出效果示例
- jQuery淡入淡出元素讓其效果更為生動(dòng)
- jQuery實(shí)現(xiàn)淡入淡出效果
相關(guān)文章
jQuery中創(chuàng)建實(shí)例與原型繼承揭秘
在普通情況下我們要用原生類、或者自定義類創(chuàng)建實(shí)例要用new運(yùn)算符，使構(gòu)造函數(shù)創(chuàng)建一個(gè)實(shí)例，并且實(shí)例繼承構(gòu)造器prototype上的所有公有方法2011-12-12
jquery通過(guò)a標(biāo)簽刪除table中的一行的代碼
刪除table中的一行的方法有很多，在本文為大家介紹下jquery是如何做到的，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以參考下2013-12-12
jBox 2.3基于jquery的最新多功能對(duì)話框插件 常見使用問(wèn)題解答
jBox 是一款基于 jQuery 的多功能對(duì)話框插件，能夠?qū)崿F(xiàn)網(wǎng)站的整體風(fēng)格效果，給用戶一個(gè)新的視覺(jué)享受。2011-11-11
seektanjQuery是最近比較火的一個(gè)JavaScript庫(kù)，從del.icio.us/上相關(guān)的收藏可見一斑。2010-03-03
元素選擇是一切操作的前提，jQuery中$()函數(shù)最強(qiáng)大最常用的功能之一就是使用選擇器選擇DOM元素。這里就匯總一些十分常用的jQuery選擇器。2017-02-02
jQuery實(shí)現(xiàn)B2B網(wǎng)站后臺(tái)管理系統(tǒng)側(cè)導(dǎo)航
這篇文章主要介紹了jQuery實(shí)現(xiàn)B2B網(wǎng)站后臺(tái)管理系統(tǒng)側(cè)導(dǎo)航，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
JQuery Dialog(JS 模態(tài)窗口,可拖拽的DIV)
JQuery Dialog(JS模態(tài)窗口,可拖拽的DIV) 效果實(shí)現(xiàn)代碼2010-02-02
jQery使網(wǎng)頁(yè)在顯示器上居中顯示適用于任何分辨率
這篇文章主要介紹了jQery使網(wǎng)頁(yè)在任何分辨率的顯示器上居中顯示的方法,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)影院選座訂座效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
基于jQuery實(shí)現(xiàn)左右div自適應(yīng)高度完全相同的代碼
最近做前端設(shè)計(jì)時(shí)需要使左右兩個(gè)DIV高度自適應(yīng)。這其中的jquery代碼中的獲得高度用的clientHeight，介紹一下幾種不同的獲得方式以及他們的差別2012-08-08