Team:UCLA/Aal/javascripttemplate

From 2014.igem.org

(Difference between revisions)
 
(54 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 13: Line 98:
   });
   });
});
});
-
$(document).scroll(function cycleImages() {
+
jQuery(document).ready(function($){
-
    var images = $('.banner_area img'),
+
      $('.spiderbutton').click(function(){
-
        now = images.filter(':visible'),
+
         $("html, body").animate({ scrollTop: 0 }, 500);
-
         next = now.next().length ? now.next() : images.first(),
+
$('.spiderbutton').animate({ top: '-=90%'}, 800, function(){$('.spiderbutton').animate({ top: '+=90%'}, 3000)});
-
        speed = 1000;
+
$('.spiderline').animate({ top: '-=90%'}, 800, function(){$('.spiderline').animate({ top: '+=90%'}, 3000)});
-
 
+
-
    now.fadeOut(speed);
+
-
    next.fadeIn(speed);
+
-
}
+
-
$(function () {
+
-
    setInterval(cycleImages, 1400);
+
-
}));
+
-
$(function(){
+
-
+
-
    $('.banner_area img').on('click', scrollToTop);
+
});
});
-
 
-
function scrollToTop() {
 
-
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
 
-
    element = $('body');
 
-
    offset = element.offset();
 
-
    offsetTop = offset.top;
 
-
    $('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
 
-
};
 
-
(function( $ ){
 
-
$.fn.rotator = function(delay, time, child){
 
-
//set curImage val
 
-
var currImg = 0;
 
-
var currIt = true;
 
-
//set array of images
 
-
var ss = $(this).children(child);
 
-
var ssize = ss.size();
 
-
var startTime = new Date().getTime();
 
-
var interval = setInterval(function() {
 
-
if(currIt){
 
-
$(ss[currImg]).css('opacity','1');
 
-
currIt = !currIt;
 
-
}else if (!currIt){
 
-
                $(ss[currImg]).css('opacity','0');
 
-
$(ss[currImg+1]).css('opacity','1');
 
-
currIt = !currIt;
 
-
currImg++;
 
-
}
 
-
//reset
 
-
if(currImg >= ssize){
 
-
currImg = 0;
 
-
$(ss[currImg]).css('opacity','1');
 
-
}
 
-
if(new Date().getTime() - startTime > time){
 
-
clearInterval(interval);
 
-
return;
 
-
}
 
-
}, delay);
 
-
return this;
 
-
};
 
-
})(jQuery);
 
-
$(document).scroll(function() {
 
-
$("#slides").rotator(10, 100, 'img');
 
});
});
</script>
</script>
</html>
</html>

Latest revision as of 23:36, 8 September 2014

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