Team:UCLA/Aal/javascripttemplate

From 2014.igem.org

(Difference between revisions)
 
(12 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").mouseenter(function(){
   $("#test2").mouseenter(function(){
Line 17: Line 102:
         $("html, body").animate({ scrollTop: 0 }, 500);
         $("html, body").animate({ scrollTop: 0 }, 500);
$('.spiderbutton').animate({ top: '-=90%'}, 800, function(){$('.spiderbutton').animate({ top: '+=90%'}, 3000)});
$('.spiderbutton').animate({ top: '-=90%'}, 800, function(){$('.spiderbutton').animate({ top: '+=90%'}, 3000)});
-
$('.spiderbutton').animate({ height: '-=90%'}, 800, function(){$('.spiderline').animate({ height: '+=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

Retrieved from "http://2014.igem.org/Team:UCLA/Aal/javascripttemplate"