PerfectEquation
/
GZ


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
							<!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>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--动画方式入场效果start-->
<script type="text/javascript" src="../../libs/js/pic/jomino.js"></script>
<!--动画方式入场效果end-->

<!--图片渐显start-->
<script type="text/javascript" src="../../libs/js/pic/imgFade.js"></script>
<!--图片渐显end-->
<script>
function initComplete(){
	//动画入场
	$("#list-2 .picItem2").jomino();
	
	//标题特效
	$('.framegrid.nocaption').each(function(){
		$(".framegrid_cover", this).css({
			top:"128px",
			height:"0px"
		})
		$(".framegrid_title", this).hide()
		$(".framegrid_con", this).hide()
	})
	$('.framegrid.nocaption').hover(function(){
		$(".framegrid_cover", this).stop().animate({top:'68px',height:'60px'},{queue:false,duration:160});
		$(".framegrid_title", this).show()
		$(".framegrid_con", this).show()
	}, function() {
		$(".framegrid_cover", this).stop().animate({top:'125px',height:'0px'},{queue:false,duration:160});
		$(".framegrid_title", this).hide()
		$(".framegrid_con", this).hide()
	});
	
	//详情模式列表
	$(".picItem").hover(function(){
		$(this).addClass("picItemOver")
	},function(){
		$(this).removeClass("picItemOver")
	});
	
	$(".imgFade").render();
}
</script>
</head>
<body>
<div class="box1" style="width: 800px;"><div class="box_topcenter"><div class="box_topleft"><div class="box_topright"></div></div></div><div class="box_middlecenter"><div class="box_middleleft"><div class="box_middleright"><div class="boxContent" style="overflow: visible;">
  <fieldset>
   <legend>1、边框效果</legend>
	<div class="picItem2"><img src="../../libs/images/demo/demo2.jpg"/></div>
	<div class="picItem2"><img src="../../libs/images/demo/demo3.jpg"/></div>
	<div class="picItem2"><img src="../../libs/images/demo/demo2.jpg"/></div>
	<div class="picItem2"><img src="../../libs/images/demo/demo3.jpg"/></div>
	<div class="picItem2"><img src="../../libs/images/demo/demo2.jpg"/></div>
	<div class="picItem2"><img src="../../libs/images/demo/demo3.jpg"/></div>
	<div class="clear"></div>
  </fieldset>
  <div class="height_15"></div>
 
 
 
 <fieldset>
   <legend>2、入场特效</legend>
    <div id="list-2">
    <div class="picItem2" style="display:none;"><img src="../../libs/images/demo/demo2.jpg"/></div>
	<div class="picItem2" style="display:none;"><img src="../../libs/images/demo/demo3.jpg"/></div>
	<div class="picItem2" style="display:none;"><img src="../../libs/images/demo/demo2.jpg"/></div>
	<div class="picItem2" style="display:none;"><img src="../../libs/images/demo/demo3.jpg"/></div>
	<div class="picItem2" style="display:none;"><img src="../../libs/images/demo/demo2.jpg"/></div>
	<div class="picItem2" style="display:none;"><img src="../../libs/images/demo/demo3.jpg"/></div>
	<div class="clear"></div>
	</div>
  </fieldset>
  <div class="height_15"></div>
 

  
  <fieldset>
   <legend>3、添加标题特效</legend>
    <div class="framegrid nocaption">
		<div class="picItem3"><img src="../../libs/images/demo/demo2.jpg"/></div>	
		<div class="framegrid_cover">
			<div class="framegrid_title">图片标题</div>
			<div class="framegrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
		</div>	
	</div>
	<div class="framegrid nocaption">
		<div class="picItem3"><img src="../../libs/images/demo/demo3.jpg"/></div>	
		<div class="framegrid_cover">
			<div class="framegrid_title">图片标题</div>
			<div class="framegrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
		</div>
	</div>
	<div class="framegrid nocaption">
		<div class="picItem3"><img src="../../libs/images/demo/demo2.jpg"/></div>	
		<div class="framegrid_cover">
			<div class="framegrid_title">图片标题</div>
			<div class="framegrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
		</div>	
	</div>
	<div class="clear"></div>
  </fieldset>
  <div class="height_15"></div>
  
   <fieldset>
  <legend>4、详情模式列表</legend>
   <div class="picItem">
		<div class="picItem_title">
			该项标题
		</div>
		<div class="details">
			<img src="../../libs/images/demo/demo2.jpg"/>
			<div class="picItem_con">该项详细说明<br />该项详细说明</div>
		</div>
	</div>
	
	<div class="picItem">
		<div class="picItem_title">
			该项标题
		</div>
		<div class="details">
			<img src="../../libs/images/demo/demo3.jpg"/>
			<div class="picItem_con">该项详细说明<br />该项详细说明</div>
		</div>
	</div>
	
	<div class="picItem">
		<div class="picItem_title">
			该项标题
		</div>
		<div class="details">
			<img src="../../libs/images/demo/demo2.jpg"/>
			<div class="picItem_con">该项详细说明<br />该项详细说明</div>
		</div>
	</div>
	
	<div class="picItem">
		<div class="picItem_title">
			该项标题
		</div>
		<div class="details">
			<img src="../../libs/images/demo/demo3.jpg"/>
			<div class="picItem_con">该项详细说明<br />该项详细说明</div>
		</div>
	</div>
	
	<div class="clear"></div>
  </fieldset>
  <div class="height_15"></div>
  
   <fieldset>
   <legend>5、渐显特效</legend>
   极速模式下渐显特效需要手动渲染。<br/>
	<div class="picItem2"><img src="../../libs/images/demo/demo2.jpg" class="imgFade"/></div>
	<div class="picItem2"><img src="../../libs/images/demo/demo3.jpg" class="imgFade"/></div>
	<div class="picItem2"><img src="../../libs/images/demo/demo2.jpg" class="imgFade"/></div>
	<div class="picItem2"><img src="../../libs/images/demo/demo3.jpg" class="imgFade"/></div>
	<div class="picItem2"><img src="../../libs/images/demo/demo2.jpg" class="imgFade"/></div>
	<div class="picItem2"><img src="../../libs/images/demo/demo3.jpg" class="imgFade"/></div>
	<div class="clear"></div>
  </fieldset>
  <div class="height_15"></div>
  
  
  
  
  
</div></div></div></div><div class="box_bottomcenter"><div class="box_bottomleft"><div class="box_bottomright"></div></div></div></div>
  
</body>
</html>