"
Team:USTC-Software/hp
From 2012.igem.org
(Difference between revisions)
(Created page with "{{Template:Team:USTC-Software/Header-c}} <html> <head> <style> a.hp_li{ text-decoration:none; color:#010101; text-shadow: 0 1px 0px #333333; } #gn-hp { border-top:1px...") |
|||
| (9 intermediate revisions not shown) | |||
| Line 2: | Line 2: | ||
<html> | <html> | ||
<head> | <head> | ||
| + | <script type="text/javascript" src="https://2012.igem.org/Team:USTC-Software/hp-slider.js?action=raw&ctype=text/javascript"></script> | ||
| + | |||
| + | |||
<style> | <style> | ||
| Line 44: | Line 47: | ||
width:580px; | width:580px; | ||
height:355px; | height:355px; | ||
| - | + | border:1px solid black; | |
| - | + | background:#333; | |
| - | + | box-shadow:-1px 0 10px #555,1px 0 10px #555,0 1px 10px #555,0 -1px 10px #555; | |
}/*-----the begin of wrape of video css---*/ | }/*-----the begin of wrape of video css---*/ | ||
| - | |||
</style> | </style> | ||
| + | |||
| + | |||
| + | <!---the begin of hp_slide css-----> | ||
| + | <style type="text/css"> | ||
| + | #hp_slide ul,#hp_slide li{ | ||
| + | margin:0; | ||
| + | padding:0; | ||
| + | } | ||
| + | |||
| + | #hp_slide ul { | ||
| + | list-style:none; | ||
| + | } | ||
| + | |||
| + | .wrapper{ | ||
| + | margin:40px auto; | ||
| + | position: relative; | ||
| + | width: 720px; | ||
| + | height: 365px; | ||
| + | } | ||
| + | |||
| + | .hp_slide{ | ||
| + | position: relative; | ||
| + | width: 100%; | ||
| + | height: 365px; | ||
| + | margin: 0 auto; | ||
| + | } | ||
| + | .hp_slide-loading{ | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | position: absolute; | ||
| + | top: 0px; | ||
| + | left: 0px; | ||
| + | z-index:222; | ||
| + | background:url('https://static.igem.org/mediawiki/igem.org/3/3b/Slider-loading.gif') no-repeat; | ||
| + | background-position:center; | ||
| + | background-color: rgba(0,0,0,0.5); | ||
| + | color: #777; | ||
| + | text-align: center; | ||
| + | font-size:16px; | ||
| + | line-height: 365px; | ||
| + | font-family: Georgia, "Times New Roman", Times, serif; | ||
| + | font-weight:bolder; | ||
| + | } | ||
| + | .hp_slide-large{ | ||
| + | height: 100%; | ||
| + | width: 100%; | ||
| + | position:relative; | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | .hp_slide-large li{ | ||
| + | position: absolute; | ||
| + | top: 0px; | ||
| + | left: 0px; | ||
| + | overflow: hidden; | ||
| + | height: 100%; | ||
| + | width: 100%; | ||
| + | } | ||
| + | .hp_slide-large li img{ | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
| + | .hp_slide-pins{ | ||
| + | height: 10px; | ||
| + | width:720px; | ||
| + | margin: 0 auto; | ||
| + | position: relative; | ||
| + | } | ||
| + | .hp_slide-pins li{ | ||
| + | position: relative; | ||
| + | float: left; | ||
| + | height: 100%; | ||
| + | } | ||
| + | .hp_slide-pins li.hp_slide-element{ | ||
| + | top: 0px; | ||
| + | left: 0px; | ||
| + | position: absolute; | ||
| + | height: 100%; | ||
| + | z-index: 10; | ||
| + | text-indent: -9000px; | ||
| + | background: #000; | ||
| + | background: rgba(0,255,0,0.8); | ||
| + | } | ||
| + | .hp_slide-pins li a{ | ||
| + | display: block; | ||
| + | text-indent: -9000px; | ||
| + | background: #666 ; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | cursor: pointer; | ||
| + | -webkit-box-shadow: | ||
| + | 0px 1px 1px 0px rgba(0,0,0,0.3), | ||
| + | 0px 1px 0px 1px rgba(255,255,255,0.5); | ||
| + | -moz-box-shadow: | ||
| + | 0px 1px 1px 0px rgba(0,0,0,0.3), | ||
| + | 0px 1px 0px 1px rgba(255,255,255,0.5); | ||
| + | box-shadow: | ||
| + | 0px 1px 1px 0px rgba(0,0,0,0.3), | ||
| + | 0px 1px 0px 1px rgba(255,255,255,0.5); | ||
| + | -webkit-transition: background 0.2s ease; | ||
| + | -moz-transition: background 0.2s ease; | ||
| + | -o-transition: background 0.2s ease; | ||
| + | -ms-transition: background 0.2s ease; | ||
| + | transition: background 0.2s ease; | ||
| + | } | ||
| + | .hp_slide-pins li a:hover{ | ||
| + | background-color: #222; | ||
| + | } | ||
| + | |||
| + | </style><!---the end of hp_slide css-----> | ||
| + | |||
| + | |||
| + | |||
| Line 59: | Line 173: | ||
<div id="page_wrapper"> | <div id="page_wrapper"> | ||
| - | + | ||
| - | + | ||
| + | <!---the begin of hp_slide div-----> | ||
| + | <div class="wrapper"> | ||
| + | <div id="hp_slide" class="hp_slide"> | ||
| + | <ul class="hp_slide-large"> | ||
| + | <li> | ||
| + | <img src="https://static.igem.org/mediawiki/2012/7/71/P020110714504890857164.jpg" alt="USTC-HP"/> | ||
| + | </li> | ||
| + | <li> | ||
| + | <img src="https://static.igem.org/mediawiki/2012/0/0d/W020110714513921540263.jpg" alt="USTC-HP" /> | ||
| + | </li> | ||
| + | <li> | ||
| + | <img src="https://static.igem.org/mediawiki/2012/7/71/P020110714504890857164.jpg" alt="USTC-HP" /> | ||
| + | </li> | ||
| + | <li> | ||
| + | <img src="https://static.igem.org/mediawiki/2012/0/0d/W020110714513921540263.jpg" alt="USTC-HP"/> | ||
| + | </li> | ||
| + | <li> | ||
| + | <img src="https://static.igem.org/mediawiki/2012/0/0d/W020110714513921540263.jpg" alt="USTC-HP"/> | ||
| + | </li> | ||
| + | <li> | ||
| + | <img src="https://static.igem.org/mediawiki/2012/7/71/P020110714504890857164.jpg" alt="USTC-HP"/> | ||
| + | </li> | ||
| + | <li> | ||
| + | <img src="https://static.igem.org/mediawiki/2012/8/8f/W020120412629917392487.jpg" alt="USTC-HP"/> | ||
| + | </li> | ||
| + | <li> | ||
| + | <img src="https://static.igem.org/mediawiki/2012/0/0d/W020110714513921540263.jpg" alt="USTC-HP"/> | ||
| + | </li> | ||
| + | </ul> | ||
| + | |||
| + | <ul class="hp_slide-pins"> | ||
| + | <li class="hp_slide-element"></li> | ||
| + | <li><a href="#"></a></li> | ||
| + | <li><a href="#"></a></li> | ||
| + | <li><a href="#"></a></li> | ||
| + | <li><a href="#">S</a></li> | ||
| + | <li><a href="#"></a></li> | ||
| + | <li><a href="#"></a></li> | ||
| + | <li><a href="#"></a></li> | ||
| + | <li><a href="#"></a></li> | ||
| + | </ul><!-- hp_slide-pins --> | ||
| + | |||
| + | </div><!-- hp_slide --> | ||
| + | </div><!---the end of hp_slide div-----> | ||
| + | |||
| + | |||
| + | |||
| + | |||
<!-----the begin of wrape of youtube div----> | <!-----the begin of wrape of youtube div----> | ||
<div id="wrap_of_video"> | <div id="wrap_of_video"> | ||
<object width="580" height="355"> | <object width="580" height="355"> | ||
| + | |||
| + | <param name="movie" value="http://player.youku.com/player.php/sid/XNDMwOTQxMjc2/v.swf"/> | ||
<param name="movie" value="http://www.youtube.com/watch?v=wJyUtbn0O5Y"/> | <param name="movie" value="http://www.youtube.com/watch?v=wJyUtbn0O5Y"/> | ||
<param name="wmode" value="transparent"/> | <param name="wmode" value="transparent"/> | ||
| + | |||
| + | <embed src="http://player.youku.com/player.php/sid/XNDMwOTQxMjc2/v.swf" application="" x-shockwave-flash"="" wmode="transparent" width="580" height="355"/> | ||
<embed src="http://www.youtube.com/v/wJyUtbn0O5Y" application="" x-shockwave-flash"="" wmode="transparent" width="580" height="355"/><embed x-shockwave-flash"/> | <embed src="http://www.youtube.com/v/wJyUtbn0O5Y" application="" x-shockwave-flash"="" wmode="transparent" width="580" height="355"/><embed x-shockwave-flash"/> | ||
| + | |||
</object> | </object> | ||
</div> <!-----the begin of wrape of youtube div----> | </div> <!-----the begin of wrape of youtube div----> | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
</div> <!---the end of wrap_page div--> | </div> <!---the end of wrap_page div--> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <!---the begin of hp_slide js----> | ||
| + | <script> | ||
| + | $(function(){ | ||
| + | var bt = $('#toolBackTo'); | ||
| + | var hl = $.browser.webkit ? $('body')[0] : $('html')[0]; | ||
| + | |||
| + | $(window).scroll( function() { | ||
| + | var st = hl.scrollTop; | ||
| + | show = (st>50); | ||
| + | if( show ){ | ||
| + | bt.show("slow"); | ||
| + | }else{ | ||
| + | bt.hide("slow"); | ||
| + | } | ||
| + | }); | ||
| + | }); | ||
| + | |||
| + | (function( window, $, undefined ) { | ||
| + | |||
| + | var $event = $.event, resizeTimeout; | ||
| + | |||
| + | $event.special.smartresize = { | ||
| + | setup: function() { | ||
| + | $(this).bind( "resize", $event.special.smartresize.handler ); | ||
| + | }, | ||
| + | teardown: function() { | ||
| + | $(this).unbind( "resize", $event.special.smartresize.handler ); | ||
| + | }, | ||
| + | handler: function( event, execAsap ) { | ||
| + | // Save the context | ||
| + | var context = this, | ||
| + | args = arguments; | ||
| + | |||
| + | // set correct event type | ||
| + | event.type = "smartresize"; | ||
| + | |||
| + | if ( resizeTimeout ) { clearTimeout( resizeTimeout ); } | ||
| + | resizeTimeout = setTimeout(function() { | ||
| + | jQuery.event.handle.apply( context, args ); | ||
| + | }, execAsap === "execAsap"? 0 : 100 ); | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | $.fn.smartresize = function( fn ) { | ||
| + | return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] ); | ||
| + | }; | ||
| + | |||
| + | $.Slideshow = function( options, element ) { | ||
| + | |||
| + | this.$el = $( element ); | ||
| + | |||
| + | |||
| + | this.$list = this.$el.find('ul.hp_slide-large') | ||
| + | this.$imgItems = this.$list.children('li'); | ||
| + | this.itemsCount = this.$imgItems.length | ||
| + | this.$images = this.$imgItems.find('img:first'); | ||
| + | this.$sliderthumbs = this.$el.find('ul.hp_slide-pins').hide(); | ||
| + | this.$sliderElems = this.$sliderthumbs.children('li'); | ||
| + | this.$sliderElem = this.$sliderthumbs.children('li.hp_slide-element'); | ||
| + | this.$thumbs = this.$sliderElems.not('.hp_slide-element'); | ||
| + | |||
| + | |||
| + | this._init( options ); | ||
| + | |||
| + | }; | ||
| + | |||
| + | $.Slideshow.defaults = { | ||
| + | |||
| + | animation : 'sides', // sides || center | ||
| + | autoplay : false, | ||
| + | // interval for the slideshow | ||
| + | slideshow_interval : 3000, | ||
| + | // speed for the sliding animation | ||
| + | speed : 800, | ||
| + | easing : '', | ||
| + | titlesFactor : 0.60, | ||
| + | // titles animation speed | ||
| + | titlespeed : 800, | ||
| + | // titles animation easing | ||
| + | titleeasing : '', | ||
| + | thumbMaxWidth : 120 | ||
| + | }; | ||
| + | |||
| + | $.Slideshow.prototype = { | ||
| + | _init : function( options ) { | ||
| + | |||
| + | this.options = $.extend( true, {}, $.Slideshow.defaults, options ); | ||
| + | |||
| + | this.$imgItems.css( 'opacity', 0 ); | ||
| + | this.$imgItems.find('div.ei-title > *').css( 'opacity', 0 ); | ||
| + | |||
| + | this.current = 0; | ||
| + | |||
| + | var _self = this; | ||
| + | |||
| + | this.$loading = $('<div class="hp_slide-loading">Loading</div>').prependTo( _self.$el ); | ||
| + | |||
| + | $.when( this._preloadImages() ).done( function() { | ||
| + | |||
| + | _self.$loading.hide(); | ||
| + | |||
| + | _self._setImagesSize(); | ||
| + | _self._initThumbs(); | ||
| + | |||
| + | _self.$imgItems.eq( _self.current ).css({ | ||
| + | 'opacity' : 1, | ||
| + | 'z-index' : 10 | ||
| + | }).show().find('div.ei-title > *').css( 'opacity', 1 ); | ||
| + | |||
| + | if( _self.options.autoplay ) { | ||
| + | |||
| + | _self._startSlideshow(); | ||
| + | |||
| + | } | ||
| + | |||
| + | _self._initEvents(); | ||
| + | |||
| + | }); | ||
| + | |||
| + | }, | ||
| + | _preloadImages : function() { | ||
| + | |||
| + | var _self = this, | ||
| + | loaded = 0; | ||
| + | |||
| + | return $.Deferred( | ||
| + | |||
| + | function(dfd) { | ||
| + | |||
| + | _self.$images.each( function( i ) { | ||
| + | |||
| + | $('<img/>').load( function() { | ||
| + | |||
| + | if( ++loaded === _self.itemsCount ) { | ||
| + | |||
| + | dfd.resolve(); | ||
| + | } | ||
| + | |||
| + | }).attr( 'src', $(this).attr('src') ); | ||
| + | |||
| + | }); | ||
| + | |||
| + | } | ||
| + | |||
| + | ).promise(); | ||
| + | |||
| + | }, | ||
| + | _setImagesSize : function() { | ||
| + | |||
| + | this.elWidth = this.$el.width(); | ||
| + | |||
| + | var _self = this; | ||
| + | |||
| + | this.$images.each( function( i ) { | ||
| + | |||
| + | var $img = $(this); | ||
| + | imgDim = _self._getImageDim( $img.attr('src') ); | ||
| + | |||
| + | $img.css({ | ||
| + | width : imgDim.width, | ||
| + | height : imgDim.height, | ||
| + | marginLeft : imgDim.left, | ||
| + | marginTop : imgDim.top | ||
| + | }); | ||
| + | }); | ||
| + | }, | ||
| + | _getImageDim : function( src ) { | ||
| + | |||
| + | var $img = new Image(); | ||
| + | |||
| + | $img.src = src; | ||
| + | |||
| + | var c_w = this.elWidth, | ||
| + | c_h = this.$el.height(), | ||
| + | r_w = c_h / c_w, | ||
| + | |||
| + | i_w = $img.width, | ||
| + | i_h = $img.height, | ||
| + | r_i = i_h / i_w, | ||
| + | new_w, new_h, new_left, new_top; | ||
| + | |||
| + | if( r_w > r_i ) { | ||
| + | |||
| + | new_h = c_h; | ||
| + | new_w = c_h / r_i; | ||
| + | |||
| + | } | ||
| + | else { | ||
| + | |||
| + | new_h = c_w * r_i; | ||
| + | new_w = c_w; | ||
| + | |||
| + | } | ||
| + | |||
| + | return { | ||
| + | width : new_w, | ||
| + | height : new_h, | ||
| + | left : ( c_w - new_w ) / 2, | ||
| + | top : ( c_h - new_h ) / 2 | ||
| + | }; | ||
| + | |||
| + | }, | ||
| + | _initThumbs : function() { | ||
| + | |||
| + | this.$sliderElems.css({ | ||
| + | 'max-width' : this.options.thumbMaxWidth + 'px', | ||
| + | 'width' : 100 / this.itemsCount + '%' | ||
| + | }); | ||
| + | |||
| + | this.$sliderthumbs.css( 'max-width', this.options.thumbMaxWidth * this.itemsCount + 'px' ).show(); | ||
| + | |||
| + | }, | ||
| + | _startSlideshow : function() { | ||
| + | |||
| + | var _self = this; | ||
| + | |||
| + | this.slideshow = setTimeout( function() { | ||
| + | |||
| + | var pos; | ||
| + | |||
| + | ( _self.current === _self.itemsCount - 1 ) ? pos = 0 : pos = _self.current + 1; | ||
| + | |||
| + | _self._slideTo( pos ); | ||
| + | |||
| + | if( _self.options.autoplay ) { | ||
| + | |||
| + | _self._startSlideshow(); | ||
| + | |||
| + | } | ||
| + | |||
| + | }, this.options.slideshow_interval); | ||
| + | |||
| + | }, | ||
| + | _slideTo : function( pos ) { | ||
| + | |||
| + | if( pos === this.current || this.isAnimating ) | ||
| + | return false; | ||
| + | |||
| + | this.isAnimating = true; | ||
| + | |||
| + | var $currentSlide = this.$imgItems.eq( this.current ), | ||
| + | $nextSlide = this.$imgItems.eq( pos ), | ||
| + | _self = this, | ||
| + | |||
| + | preCSS = {zIndex : 10}, | ||
| + | animCSS = {opacity : 1}; | ||
| + | |||
| + | if( this.options.animation === 'sides' ) { | ||
| + | |||
| + | preCSS.left = ( pos > this.current ) ? -1 * this.elWidth : this.elWidth; | ||
| + | animCSS.left = 0; | ||
| + | |||
| + | } | ||
| + | |||
| + | $.when( | ||
| + | |||
| + | $currentSlide.css( 'z-index' , 1 ).find('div.ei-title > *').stop().fadeOut( this.options.speed / 2, function() { | ||
| + | $(this).show().css( 'opacity', 0 ); | ||
| + | }), | ||
| + | |||
| + | $nextSlide.css( preCSS ).stop().animate( animCSS, this.options.speed, this.options.easing ), | ||
| + | |||
| + | this.$sliderElem.stop().animate({ | ||
| + | left : this.$thumbs.eq( pos ).position().left | ||
| + | }, this.options.speed ) | ||
| + | |||
| + | ).done( function() { | ||
| + | |||
| + | $currentSlide.css( 'opacity' , 0 ).find('div.ei-title > *').css( 'opacity', 0 ); | ||
| + | _self.current = pos; | ||
| + | _self.isAnimating = false; | ||
| + | |||
| + | }); | ||
| + | |||
| + | }, | ||
| + | _initEvents : function() { | ||
| + | |||
| + | var _self = this; | ||
| + | |||
| + | $(window).on( 'smartresize.eislideshow', function( event ) { | ||
| + | |||
| + | _self._setImagesSize(); | ||
| + | |||
| + | |||
| + | _self.$sliderElem.css( 'left', _self.$thumbs.eq( _self.current ).position().left ); | ||
| + | |||
| + | }); | ||
| + | this.$thumbs.on( 'click.eislideshow', function( event ) { | ||
| + | |||
| + | if( _self.options.autoplay ) { | ||
| + | |||
| + | clearTimeout( _self.slideshow ); | ||
| + | _self.options.autoplay = false; | ||
| + | |||
| + | } | ||
| + | |||
| + | var $thumb = $(this), | ||
| + | idx = $thumb.index() - 1; | ||
| + | |||
| + | _self._slideTo( idx ); | ||
| + | |||
| + | return false; | ||
| + | |||
| + | }); | ||
| + | |||
| + | } | ||
| + | }; | ||
| + | var logError = function( message ) { | ||
| + | |||
| + | if ( this.console ) { | ||
| + | console.error( message ); | ||
| + | } | ||
| + | }; | ||
| + | $.fn.eislideshow = function( options ) { | ||
| + | |||
| + | if ( typeof options === 'string' ) { | ||
| + | |||
| + | var args = Array.prototype.slice.call( arguments, 1 ); | ||
| + | |||
| + | this.each(function() { | ||
| + | |||
| + | var instance = $.data( this, 'eislideshow' ); | ||
| + | |||
| + | if ( !instance ) { | ||
| + | logError( "cannot call methods on eislideshow prior to initialization; " + | ||
| + | "attempted to call method '" + options + "'" ); | ||
| + | return; | ||
| + | } | ||
| + | |||
| + | if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { | ||
| + | logError( "no such method '" + options + "' for eislideshow instance" ); | ||
| + | return; | ||
| + | } | ||
| + | |||
| + | instance[ options ].apply( instance, args ); | ||
| + | |||
| + | }); | ||
| + | } | ||
| + | else { | ||
| + | |||
| + | this.each(function() { | ||
| + | |||
| + | var instance = $.data( this, 'eislideshow' ); | ||
| + | if ( !instance ) { | ||
| + | $.data( this, 'eislideshow', new $.Slideshow( options, this ) ); | ||
| + | } | ||
| + | |||
| + | }); | ||
| + | } | ||
| + | return this; | ||
| + | }; | ||
| + | |||
| + | })( window, jQuery ); | ||
| + | </script> | ||
| + | <script type="text/javascript"> | ||
| + | $(function() { | ||
| + | $('#hp_slide').eislideshow({ | ||
| + | animation : 'center', | ||
| + | autoplay : true, | ||
| + | slideshow_interval : 3000, | ||
| + | titlesFactor : 0 | ||
| + | }); | ||
| + | }); | ||
| + | </script><!---the end of hp_slide js----> | ||
| + | |||
| + | |||
| + | |||
| + | |||
</body> | </body> | ||
<html> | <html> | ||
Latest revision as of 09:07, 11 August 2012
TOP
