wangdaping
/
wp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
							<!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-->
<style>
.boxgrid{ 
	width: 200px; 
	height: 122px; 
	margin:10px; 
	float:left; 
	background:#161613; 
	border: solid 2px #8399AF; 
	overflow: hidden; 
	position: relative; 
}
</style>
<script>
function initComplete(){
	//初始时无标题
	$('.boxgrid.captionfull').each(function(){
		$(".cover", this).css({
			top:"160px"
		})
	})
	$('.boxgrid.captionfull').hover(function(){
		$(".cover", this).stop().animate({top:'60px'},{queue:false,duration:160});
	}, function() {
		$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
	});
	
	//初始时有标题
	$('.boxgrid.caption').each(function(){
		$(".cover", this).css({
			top:"95px"
		})
	})
	$('.boxgrid.caption').hover(function(){
		$(".cover", this).stop().animate({top:'60px'},{queue:false,duration:160});
	}, function() {
		$(".cover", this).stop().animate({top:'95px'},{queue:false,duration:160});
	});
	
	//图片向右移动
	$('.boxgrid.slideright').hover(function(){
		$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
	}, function() {
		$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
	});
	
	//图片斜向下移动
	$('.boxgrid.thecombo').hover(function(){
		$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
	}, function() {
		$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
	});
	
	//图片向上移动
	$('.boxgrid.slidedown').hover(function(){
		$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
	}, function() {
		$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
	});
}
</script>
</head>
<body>
	 <div class="box1" panelWidth="800">
      <fieldset>
      	<legend>鼠标移入出现信息</legend>
<div class="boxgrid captionfull">
	<img src="../../libs/images/demo/demo1.jpg"/>
	<div class="cover boxcaption">
		<div class="boxgrid_title">图片标题</div>
		<div class="boxgrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
	</div>		
</div>
<div class="boxgrid captionfull">
	<img src="../../libs/images/demo/demo1.jpg"/>
	<div class="cover boxcaption">
		<div class="boxgrid_title">图片标题</div>
		<div class="boxgrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
	</div>		
</div>
<div class="boxgrid captionfull">
	<img src="../../libs/images/demo/demo1.jpg"/>
	<div class="cover boxcaption">
		<div class="boxgrid_title">图片标题</div>
		<div class="boxgrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
	</div>		
</div>
<div class="clear"></div>
      </fieldset>
       <div class="height_15"></div>
       
      
      <fieldset>
       	<legend>初始时有标题</legend>
<div class="boxgrid caption">
	<img src="../../libs/images/demo/demo1.jpg"/>
	<div class="cover boxcaption">
		<div class="boxgrid_title">图片标题</div>
		<div class="boxgrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
	</div>		
</div>
<div class="boxgrid caption">
	<img src="../../libs/images/demo/demo1.jpg"/>
	<div class="cover boxcaption">
		<div class="boxgrid_title">图片标题</div>
		<div class="boxgrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
	</div>		
</div>
<div class="boxgrid caption">
	<img src="../../libs/images/demo/demo1.jpg"/>
	<div class="cover boxcaption">
		<div class="boxgrid_title">图片标题</div>
		<div class="boxgrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
	</div>		
</div>
<div class="clear"></div>
      </fieldset>
       <div class="height_15"></div>
       
      
      <fieldset>
       	<legend>图片向右移动</legend>
<div class="boxgrid slideright">
	<img class="cover" src="../../libs/images/demo/demo1.jpg"/>
	<div class="boxgrid_title">图片标题</div>
	<div class="boxgrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
</div>
<div class="boxgrid slideright">
	<img class="cover" src="../../libs/images/demo/demo1.jpg"/>
	<div class="boxgrid_title">图片标题</div>
	<div class="boxgrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
</div>
<div class="boxgrid slideright">
	<img class="cover" src="../../libs/images/demo/demo1.jpg"/>
	<div class="boxgrid_title">图片标题</div>
	<div class="boxgrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
</div>
<div class="clear"></div>
      </fieldset>
       <div class="height_15"></div>
       
      
      <fieldset>
       	<legend>图片斜向下移动</legend>
<div class="boxgrid thecombo">
	<img class="cover" src="../../libs/images/demo/demo1.jpg"/>
	<div class="boxgrid_title">图片标题</div>
	<div class="boxgrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
</div>
<div class="boxgrid thecombo">
	<img class="cover" src="../../libs/images/demo/demo1.jpg"/>
	<div class="boxgrid_title">图片标题</div>
	<div class="boxgrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
</div>
<div class="boxgrid thecombo">
	<img class="cover" src="../../libs/images/demo/demo1.jpg"/>
	<div class="boxgrid_title">图片标题</div>
	<div class="boxgrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
</div>
<div class="clear"></div>
      </fieldset>
       <div class="height_15"></div>
       
      
      <fieldset>
       	<legend>图片向上移动</legend>
<div class="boxgrid slidedown">
	<img class="cover" src="../../libs/images/demo/demo1.jpg"/>
	<div class="boxgrid_title">图片标题</div>
	<div class="boxgrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
</div>
<div class="boxgrid slidedown">
	<img class="cover" src="../../libs/images/demo/demo1.jpg"/>
	<div class="boxgrid_title">图片标题</div>
	<div class="boxgrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
</div>
<div class="boxgrid slidedown">
	<img class="cover" src="../../libs/images/demo/demo1.jpg"/>
	<div class="boxgrid_title">图片标题</div>
	<div class="boxgrid_con">这里是图片文字说明部分<br />这里是图片文字说明部分</div>
</div>
<div class="clear"></div>
      </fieldset>
       <div class="height_15"></div>
       
       
     </div>
</body>
</html>