"
Team:UCLA/Aal/javascripttemplate
From 2014.igem.org
(Difference between revisions)
| (122 intermediate revisions not shown) | |||
| Line 2: | Line 2: | ||
<html> | <html> | ||
<script> | <script> | ||
| + | //1. set ul width | ||
| + | //2. image when click prev/next button | ||
| + | var ul; | ||
| + | var li_items; | ||
| + | var imageNumber; | ||
| + | var imageWidth; | ||
| + | var prev, next; | ||
| + | var currentPostion = 0; | ||
| + | var currentImage = 0; | ||
| + | |||
| + | |||
| + | function init(){ | ||
| + | ul = document.getElementById('image_slider'); | ||
| + | li_items = ul.children; | ||
| + | imageNumber = li_items.length; | ||
| + | imageWidth = li_items[0].children[0].clientWidth; | ||
| + | ul.style.width = parseInt(imageWidth * imageNumber) + 'px'; | ||
| + | prev = document.getElementById("prev"); | ||
| + | next = document.getElementById("next"); | ||
| + | //.onclike = slide(-1) will be fired when onload; | ||
| + | /* | ||
| + | prev.onclick = function(){slide(-1);}; | ||
| + | next.onclick = function(){slide(1);};*/ | ||
| + | prev.onclick = function(){ onClickPrev();}; | ||
| + | next.onclick = function(){ onClickNext();}; | ||
| + | } | ||
| + | |||
| + | function animate(opts){ | ||
| + | var start = new Date; | ||
| + | var id = setInterval(function(){ | ||
| + | var timePassed = new Date - start; | ||
| + | var progress = timePassed / opts.duration; | ||
| + | if (progress > 1){ | ||
| + | progress = 1; | ||
| + | } | ||
| + | var delta = opts.delta(progress); | ||
| + | opts.step(delta); | ||
| + | if (progress == 1){ | ||
| + | clearInterval(id); | ||
| + | opts.callback(); | ||
| + | } | ||
| + | }, opts.delay || 17); | ||
| + | //return id; | ||
| + | } | ||
| + | |||
| + | function slideTo(imageToGo){ | ||
| + | var direction; | ||
| + | var numOfImageToGo = Math.abs(imageToGo - currentImage); | ||
| + | // slide toward left | ||
| + | |||
| + | direction = currentImage > imageToGo ? 1 : -1; | ||
| + | currentPostion = -1 * currentImage * imageWidth; | ||
| + | var opts = { | ||
| + | duration:1000, | ||
| + | delta:function(p){return p;}, | ||
| + | step:function(delta){ | ||
| + | ul.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + 'px'; | ||
| + | }, | ||
| + | callback:function(){currentImage = imageToGo;} | ||
| + | }; | ||
| + | animate(opts); | ||
| + | } | ||
| + | |||
| + | function onClickPrev(){ | ||
| + | if (currentImage == 0){ | ||
| + | slideTo(imageNumber - 1); | ||
| + | } | ||
| + | else{ | ||
| + | slideTo(currentImage - 1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function onClickNext(){ | ||
| + | if (currentImage == imageNumber - 1){ | ||
| + | slideTo(0); | ||
| + | } | ||
| + | else{ | ||
| + | slideTo(currentImage + 1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | window.onload = init; | ||
| + | |||
| + | |||
| + | |||
$(document).ready(function(){ | $(document).ready(function(){ | ||
| - | $("test2").animate({ | + | $("#test2").mouseenter(function(){ |
| - | left:' | + | $("#test2").animate({ |
| - | + | left:'2px', | |
| - | + | }); | |
| - | + | }).mouseleave(function(){ | |
| + | $("#test2").animate({ | ||
| + | left:'-80px', | ||
}); | }); | ||
}); | }); | ||
| + | }); | ||
| + | jQuery(document).ready(function($){ | ||
| + | $('.spiderbutton').click(function(){ | ||
| + | $("html, body").animate({ scrollTop: 0 }, 500); | ||
| + | $('.spiderbutton').animate({ top: '-=90%'}, 800, function(){$('.spiderbutton').animate({ top: '+=90%'}, 3000)}); | ||
| + | $('.spiderline').animate({ top: '-=90%'}, 800, function(){$('.spiderline').animate({ top: '+=90%'}, 3000)}); | ||
| + | }); | ||
| + | }); | ||
</script> | </script> | ||
</html> | </html> | ||
Latest revision as of 23:36, 8 September 2014
