Team:WHU-China/Humanpractice
From 2011.igem.org
(Difference between revisions)
Line 2: | Line 2: | ||
<head> | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
+ | /*image show*/ | ||
+ | #wowslider-container{ | ||
+ | width:500px; | ||
+ | height:410px; | ||
+ | position:relative; | ||
+ | margin:0 auto; | ||
+ | z-index:100; | ||
+ | background-image: url(./bg.png); | ||
+ | } | ||
+ | #wowslider-images{ | ||
+ | position: absolute; | ||
+ | left:5px; | ||
+ | top:5px; | ||
+ | width:490px; | ||
+ | height:400px; | ||
+ | } | ||
+ | #wowslider-images img{ | ||
+ | top:0; | ||
+ | left:0; | ||
+ | position:absolute; | ||
+ | visibility:hidden; | ||
+ | border:10px solid #fff; | ||
+ | /*-moz-box-shadow:1px 1px 10px #000; | ||
+ | -webkit-box-shadow:1px 1px 10px #000; | ||
+ | box-shadow:1px 1px 10px #000;*/ | ||
+ | } | ||
+ | |||
+ | /* Navigation arrows for preview mode */ | ||
+ | #wowslider-container a.ss_next, #wowslider-container a.ss_prev{ | ||
+ | outline:none; | ||
+ | position:absolute; | ||
+ | display:none; | ||
+ | top:50%; | ||
+ | width:56px; | ||
+ | height:56px; | ||
+ | margin:-28px 0 0 0; | ||
+ | z-index:200; | ||
+ | cursor:pointer; | ||
+ | opacity:0.6; | ||
+ | filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); | ||
+ | -moz-border-radius:10px; | ||
+ | -webkit-border-radius:10px; | ||
+ | border-radius:10px; | ||
+ | } | ||
+ | #wowslider-container a.ss_next{ | ||
+ | right:20px; | ||
+ | background:#000 url(./next_photo.png) no-repeat 50% 50%; | ||
+ | } | ||
+ | #wowslider-container a.ss_prev{ | ||
+ | left:20px; | ||
+ | background:#000 url(./prev_photo.png) no-repeat 50% 50%; | ||
+ | } | ||
+ | * html #wowslider-container a.ss_next,* html #wowslider-container a.ss_prev{display:block} | ||
+ | #wowslider-container:hover a.ss_next, #wowslider-container:hover a.ss_prev {display:block} | ||
+ | |||
+ | #wowslider-container a.ss_next:hover, #wowslider-container a.ss_prev:hover{ | ||
+ | opacity:0.8; | ||
+ | filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); | ||
+ | } | ||
+ | |||
+ | /* bullets */ | ||
+ | #wowslider-container .ss_bullets{ | ||
+ | position:absolute; | ||
+ | right:15px; | ||
+ | top:20px; | ||
+ | z-index:100; | ||
+ | } | ||
+ | #wowslider-container .ss_bullets a { | ||
+ | background:url("bullet.png") no-repeat scroll 0 0 transparent; | ||
+ | border:0 none; | ||
+ | display:block; | ||
+ | float:left; | ||
+ | cursor:pointer; | ||
+ | height:10px; | ||
+ | margin-right:4px; | ||
+ | text-indent:-9999px; | ||
+ | width:10px; | ||
+ | z-index:100; | ||
+ | outline:none; | ||
+ | } | ||
+ | #wowslider-container a.ss_selbull{ | ||
+ | background-position:100% 0; | ||
+ | } | ||
+ | |||
+ | #wowslider-container .ws-title{ | ||
+ | position:absolute; | ||
+ | display:block; | ||
+ | bottom: 20px; | ||
+ | left: 20px; | ||
+ | margin-right:25px; | ||
+ | padding:10px; | ||
+ | background-color:black; | ||
+ | color:white; | ||
+ | z-index: 50; | ||
+ | opacity:0.5; | ||
+ | filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); | ||
+ | -moz-border-radius:8px; | ||
+ | -webkit-border-radius:8px; | ||
+ | border-radius:8px; | ||
+ | font-family: Tahoma,Arial,Helvetica; | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | #wowslider-container .ws-title div{ | ||
+ | padding-top:5px; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | /*end*/ | ||
+ | |||
+ | |||
+ | |||
+ | |||
#humanpics | #humanpics | ||
{ | { | ||
Line 53: | Line 165: | ||
} | } | ||
</style> | </style> | ||
+ | |||
+ | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
+ | <meta name="keywords" content="WOW Slider, jQuery Slider Images, jQuery Slider Examples" /> | ||
+ | <meta name="description" content="WOWSlider created with WOW Slider, a free wizard program that helps you easily generate beautiful web slideshow" /> | ||
+ | <link rel="stylesheet" type="text/css" href="engine/style.css" media="screen" /> | ||
+ | |||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> | ||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> | <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> | ||
Line 69: | Line 187: | ||
</div> | </div> | ||
<div class="human" id="rotato"> | <div class="human" id="rotato"> | ||
+ | <div id="wowslider-container"> | ||
+ | <div id="wowslider-images"> | ||
+ | <a href="#"><img src="data/images/dsc_0006_调整大小.jpg" /></a> | ||
+ | <a href="#"><img src="data/images/dsc_0009_调整大小.jpg"/></a> | ||
+ | <a href="#"><img src="data/images/dsc_0013_调整大小.jpg" /></a> | ||
+ | <a href="#"><img src="data/images/dsc_0020_调整大小.jpg" /></a> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
</div> | </div> |
Revision as of 06:34, 26 September 2011