<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
});
範例網址
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
全部的始碼：
<!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>這是一個jQuery Animate效果 </title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<style type="text/css">
#abgneBlock {
width: 520px;
height: 273px;
overflow: hidden;
}
#abgneBlock ul.list {
padding: 0;
margin: 0;
list-style: none;
/*position: absolute;
top:422px;
float:left;*/
}
#abgneBlock ul.list li {
float: left;
display:inline;
padding:5px 5px 5px 5px ;
width:120px;
height:81px;
}
</style>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function(){
$li = jQuery("#abgneBlock ul.list li");
$li.each(function(i){
jQuery(this).fadeTo(500+(3000*(Math.random() )), 0.5).hover(function(){
jQuery(this).fadeTo('slow', 1);
return false;
},function(){
jQuery(this).fadeTo('slow', 0.5);
return false;
});
}).find("a").lightBox({fixedNavigation:true});;
});
</script>
</head><body style="padding-left:50px">
<div id="abgneBlock">
<ul class="list">
<li><a href="1.jpg"><img src="1_s.jpg" border="0" /></a></li>
<li><a href="2.jpg"><img src="2_s.jpg" border="0" /></a></li>
<li><a href="3.jpg"><img src="3_s.jpg" border="0" /></a></li>
<li><a href="4.jpg"><img src="4_s.jpg" border="0" /></a></li>
<li><a href="5.jpg"><img src="5_s.jpg" border="0" /></a></li>
<li><a href="6.jpg"><img src="6_s.jpg" border="0" /></a></li>
<li><a href="7.jpg"><img src="7_s.jpg" border="0" /></a></li>
<li><a href="8.jpg"><img src="8_s.jpg" border="0" /></a></li>
<li><a href="9.jpg"><img src="9_s.jpg" border="0" /></a></li>
<li><a href="10.jpg"><img src="10_s.jpg" border="0" /></a></li>
<li><a href="11.jpg"><img src="11_s.jpg" border="0" /></a></li>
<li><a href="12.jpg"><img src="12_s.jpg" border="0" /></a></li>
</ul>
</div>
</body>
</html>
