Team:UCLA/Aal/javascripttemplate

From 2014.igem.org

(Difference between revisions)
(Created page with "<html> <script type="text/javascript"> function show_sidebar() { document.getElementById('sidebar').style.visibility="visible"; } function hide_sidebar() { document.getElementBy...")
 
(141 intermediate revisions not shown)
Line 1: Line 1:
 +
{{:Team:UCLA/Aal/Csstemplate}}
<html>
<html>
-
<script type="text/javascript">
+
<script>
-
function show_sidebar()
+
//1. set ul width
-
{
+
//2. image when click prev/next button
-
document.getElementById('sidebar').style.visibility="visible";
+
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 hide_sidebar()
+
function animate(opts){
-
{
+
var start = new Date;
-
document.getElementById('sidebar').style.visibility="hidden";
+
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(){
 +
  $("#test2").mouseenter(function(){
 +
    $("#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

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