莫让这世间的庸俗扰了清修,尽管三观已被腐蚀,但未来总是光明的。
2016/05/20/ - - 0 条评论 - 浏览量 : 562



//样式表

<style type="text/css">
.expo { width:100%; float:left; font-size:12px; font-family:microsoft yahei;}
.expo li{padding:5px; max-width:120px; max-height:120px; float:left; border:2px solid #fff; list-style:none; cursor:pointer}
.expo li:hover{ border:2px solid #68B4FF}
.expo li img{ float:left;}
.expo li span{ max-width:120px; float:left; line-height:18px; height:36px; overflow:hidden;}
.expo .outside_video{position:relative;width: 100%;height:560px;top: 0px;left: 0px;z-index: 900;background: rgba(0, 0, 0, 0.701961); display:none;}
.expo .video { position:absolute; left:100px;  margin:0 auto; margin-top:50px; z-index:999; width:500px; height:350px; background-color:#fff;}
.expo .video .top{ height:40px; width:100%;}
.expo .video .top .close{ height:40px; line-height:40px; width:80px; background-color:#efefef; cursor:pointer; text-align:center; float:right;}
.expo .video .top .title{ line-height:40px; font-family:microsoft yahei; overflow:hidden; height:40px; width:400px; text-align:center; float:left;}
ul{ margin-bottom:0 !important;}
</style>


//内容

<div class="expo">
<ul>
<li><img alt="1" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(1).jpg" width="120" /><span>J-Eye: Head Mounted Display Device</span></li>
<li><img alt="2" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(2).jpg" width="120" /><span> Omni-Directional Wheelchair for the Elderly</span></li>
<li><img alt="3" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(3).jpg" width="120" /><span>Chinese PQ Pattern Design for HP LaserJet</span></li>
<li><img alt="4" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(4).jpg" width="120" /><span>The ABET Evaluation to Joint Institute</span></li>
<li><img alt="5" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(5).jpg" width="120" /><span>Photoacoustic Ultrasound (PAUS) for Co-Registered Imaging of Bone Structure and Vasculature</span></li>
<li><img alt="6" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(6).jpg" width="120" /><span>Auto-pilot Control System for Small Unmanned Aerial Vehicle</span></li>
<li><img alt="7" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(7).jpg" width="120" /><span>Programmable Test Automation Solution for HP LaserJet (Phase II)</span></li>
<li><img alt="8" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(8).jpg" width="120" /><span>Gas Turbine Guide Vanes Angle Detection &#038; Control Method</span></li>
<li><img alt="9" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(9).jpg" width="120" /><span>Auto Tuner</span></li>
<li><img alt="10" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(10).jpg" width="120" /><span> Real-time carer for the olders</span></li>
<li><img alt="11" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(11).jpg" width="120" /><span> Auto Mosquito Net</span></li>
<li><img alt="12" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(12).jpg" width="120" /><span> Virtual Reality Bicycle Game</span></li>
<li><img alt="13" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(13).jpg" width="120" /><span>A Luggage-Assistant Handcart </span></li>
<li><img alt="14" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(14).jpg" width="120" /><span>Pre-Feasibility Analysis Software for 6FA CCHP</span></li>
<li><img alt="15" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(15).jpg" width="120" /><span> Magic Table</span></li>
<li><img alt="16" src="/wp-content/up/expo/2013_DExpo_Thumbnails/expoteam(16).jpg" width="120" /><span> Lubrication and Sealing System for High Speed TRB Pair on Gearbox</span></li>
</ul>
<div class="outside_video">
<div class="video">
<div class="top"><span class="title"></span><span class="close">Close</span></div>
<div class="content"></div>
</div>
</div>
</div>

//弹出式jquery代码

<script type="text/javascript">
$(function(){
	$(".close").click(function(){
		$('.outside_video').hide();
		})
	$(".expo li").click(function(){
		$(".outside_video").show();
		$(".title").html($(this).find("span").html());
		$(".content").html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="300"><param name="movie" value="/wp-content/up/expo/2013/Flvplayer.swf" /><param name="quality" value="high" /><param name="allowFullScreen" value="true" /><param name="FlashVars" value="vcastr_file='+$(this).find("img").attr("alt")+'.flv&#038;LogoText=UMJISJTU&#038;AutoStart=true" /><embed src="/wp-content/up/expo/2013/Flvplayer.swf" allowfullscreen="true" flashvars="vcastr_file='+$(this).find("img").attr("alt")+'.flv&#038;LogoText=UMJISJTU&#038;AutoStart=true" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="300"></embed></object>');
	});
});
</script>