基于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 操作表格實(shí)現(xiàn)代碼(多種操作打包)
最近做東西需要對(duì)表格進(jìn)行操作，用到的動(dòng)作包括:添加一行數(shù)據(jù)、刪除一行數(shù)據(jù)、上下移動(dòng)數(shù)據(jù)，網(wǎng)上找了很多，但是不能完全滿足我的需求，自己琢磨了下，搞了個(gè)這個(gè)東東2011-03-03
jquery EasyUI的formatter格式化函數(shù)代碼
以下實(shí)例格式化數(shù)據(jù)表格中的一列。如果金額小于20時(shí)使用自定義的格式器將文本變成紅色。2011-01-01
jquery除了它自己非常出色的js功能之外還附帶有數(shù)不清的插件，可以完成各種美好的效果和功能。jquery.qrcode就是其中一個(gè)，用來(lái)在線生成二維碼2013-08-08
jquery ui bootstrap 實(shí)現(xiàn)自定義風(fēng)格
本文主要是給大家分享了jQuery UI bootstrap的自定義風(fēng)格，以及自定義的方法，非常的實(shí)用，有需要的小伙伴千萬(wàn)不要錯(cuò)過(guò)2014-11-11
推薦11款jQuery開發(fā)的復(fù)選框和單選框美化插件
web開發(fā)中所有的輸入控件中復(fù)選框和單選框的樣式是最難去設(shè)計(jì)的，因?yàn)椴煌臑g覽器及其操作系統(tǒng)對(duì)于樣式的渲染展現(xiàn)是不一樣的。2011-08-08
使用jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左右按鈕滑動(dòng)切換
在做web前端開發(fā)的時(shí)候經(jīng)常遇到圖片滑動(dòng)切換特效，接下來(lái)通過(guò)本文給大家分享使用jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左右按鈕滑動(dòng)切換特效，感興趣的朋友參考實(shí)現(xiàn)代碼2017-08-08
jquery簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)層的展開與收縮效果
這篇文章主要介紹了jquery簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)層的展開與收縮效果的方法,涉及jquery中toggle結(jié)合animate方法操作頁(yè)面元素屬性的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
大家都知道m(xù)ap()方法主要用來(lái)遍歷操作數(shù)組和對(duì)象，這篇文章將給大家詳細(xì)介紹關(guān)于jQuery遍歷map()方法的內(nèi)容，文章給出了詳細(xì)的示例代碼，對(duì)大家的理解和學(xué)習(xí)很有幫助，有需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
推薦6款基于jQuery實(shí)現(xiàn)圖片效果插件
這里給大家匯總了一下個(gè)人比較常用的基于jQuery實(shí)現(xiàn)的圖片特效的插件，個(gè)人感覺非常不錯(cuò)，這里分享給大家2014-12-12
使用jQuery的load方法設(shè)計(jì)動(dòng)態(tài)加載及解決被加載頁(yè)面js失效問(wèn)題
這篇文章主要介紹了使用jQuery的load方法設(shè)計(jì)動(dòng)態(tài)加載及解決被加載頁(yè)面js失效問(wèn)題,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03