基于Jquery的淡入淡出的特效基礎(chǔ)練習
更新時間:2010年12月13日 17:06:12 作者:
基于Jquery的淡入淡出的特效基礎(chǔ)練習實現(xiàn)代碼,學習jquery的朋友可以參考下。
今天練習了個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>無標題文檔</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>
用到的圖片:


一個淡入淡出小例子:
<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
復制代碼 代碼如下:
<!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>無標題文檔</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>
用到的圖片:



一個淡入淡出小例子:
復制代碼 代碼如下:
<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
相關(guān)文章
jBox 2.3基于jquery的最新多功能對話框插件 常見使用問題解答
jBox 是一款基于 jQuery 的多功能對話框插件,能夠?qū)崿F(xiàn)網(wǎng)站的整體風格效果,給用戶一個新的視覺享受。2011-11-11jQuery實現(xiàn)B2B網(wǎng)站后臺管理系統(tǒng)側(cè)導航
這篇文章主要介紹了jQuery實現(xiàn)B2B網(wǎng)站后臺管理系統(tǒng)側(cè)導航,文中示例代碼非常詳細,幫助大家更好的理解和學習,感興趣的朋友可以了解下2020-07-07JQuery Dialog(JS 模態(tài)窗口,可拖拽的DIV)
JQuery Dialog(JS模態(tài)窗口,可拖拽的DIV) 效果實現(xiàn)代碼2010-02-02jQery使網(wǎng)頁在顯示器上居中顯示適用于任何分辨率
這篇文章主要介紹了jQery使網(wǎng)頁在任何分辨率的顯示器上居中顯示的方法,需要的朋友可以參考下2014-06-06基于jQuery實現(xiàn)左右div自適應(yīng)高度完全相同的代碼
最近做前端設(shè)計時需要使左右兩個DIV高度自適應(yīng)。這其中的jquery代碼中的獲得高度用的clientHeight,介紹一下幾種不同的獲得方式以及他們的差別2012-08-08