mirror of https://github.com/kubernetes/kops.git
129 lines
8.3 KiB
HTML
129 lines
8.3 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
<title>jQuery.ScrollTo</title>
|
|
<meta name="keywords" content="javascript, jquery, plugins, scroll, scrollTo, smooth, animation, to, effect, ariel, flesler, window, overflow, element, navigation, customizable" />
|
|
<meta name="description" content="Demo of jQuery.scrollTo. Lightweight, cross-browser and highly customizable animated scrolling with jQuery, made by Ariel Flesler." />
|
|
<meta name="robots" content="index,follow" />
|
|
<link type="text/css" rel="stylesheet" href="css/style.old.css" />
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
|
|
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
|
|
<script type="text/javascript">
|
|
jQuery(function( $ ){
|
|
//borrowed from jQuery easing plugin
|
|
//http://gsgd.co.uk/sandbox/jquery.easing.php
|
|
$.easing.elasout = function(x, t, b, c, d) {
|
|
var s=1.70158;var p=0;var a=c;
|
|
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
|
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
|
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
|
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
|
};
|
|
$('button').click(function(){//this is not the cleanest way to do this, I'm just keeping it short.
|
|
var index = parseInt( $(this).prev('input').val() ) || 0;
|
|
var $c = $(this).parent().next();
|
|
$c.stop().scrollTo('li:eq('+index+')', {duration:2500, easing:'elasout',axis:$c.attr('id')});
|
|
});
|
|
$('#btn_screen').click(function(){
|
|
$.scrollTo( $('#txt_screen').val(), {duration:2500} );
|
|
});
|
|
$('div.container a').click(function(){
|
|
var $c = $(this).parents('.container');
|
|
$c.stop().scrollTo( 0, {duration:2000,axis:$c.attr('id'), queue:true} );
|
|
return false;
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>jQuery.ScrollTo <strong>by Ariel Flesler</strong></h1>
|
|
<div id="links" class="part" style="width:135px">
|
|
<h3>Links</h3>
|
|
<ul>
|
|
<li><a target="_blank" href="http://plugins.jquery.com/project/ScrollTo">Project Page</a></li>
|
|
<li><a target="_blank" href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html">Main blog article</a></li>
|
|
<li><a target="_blank" href="http://flesler.blogspot.com/search/label/jQuery.ScrollTo">All articles</a></li>
|
|
<li><a target="_blank" href="http://flesler.webs.com/jQuery.LocalScroll/">LocalScroll Demo</a></li>
|
|
<li><a target="_blank" href="http://flesler.webs.com/jQuery.SerialScroll/">SerialScroll Demo</a></li>
|
|
<li><a target="_blank" href="./" rel="prev" rev="next">New Demo</a></li>
|
|
</ul>
|
|
</div>
|
|
<label for="txt_screen">Scroll the window to <input id="txt_screen" type="text" value=".pane:eq(1)" /><input id="btn_screen" type="button" value="Scroll" /></label><br /><br />
|
|
<label>Scroll to the #<input type="text" value="3" /> element inside this container<button>Scroll</button></label>
|
|
<div id="y" class="container">
|
|
<ul>
|
|
<li style="background-color:#9933CC;"><p>0</p><a href="#">back to top</a></li>
|
|
<li style="background-color:#FFCC99;"><p>1</p><a href="#">back to top</a></li>
|
|
<li style="background-color:#FF0000;"><p>2</p><a href="#">back to top</a></li>
|
|
<li style="background-color:#00FFCC;"><p>3</p><a href="#">back to top</a></li>
|
|
<li style="background-color:#663366;"><p>4</p><a href="#">back to top</a></li>
|
|
<li style="background-color:#CCCCFF;"><p>5</p><a href="#">back to top</a></li>
|
|
<li style="background-color:#FFFFCC;"><p>6</p><a href="#">back to top</a></li>
|
|
<li style="background-color:#00FF00;"><p>7</p><a href="#">back to top</a></li>
|
|
</ul>
|
|
</div>
|
|
<label>Scroll to the #<input type="text" value="3" /> element inside this container<button>Scroll</button></label>
|
|
<div id="x" class="container">
|
|
<ul style="width:4820px;">
|
|
<li style="background-color:#9933CC;"><p>0</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FFCC99;"><p>1</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FF0000;"><p>2</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#00FFCC;"><p>3</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#663366;"><p>4</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#CCCCFF;"><p>5</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FFFFCC;"><p>6</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#00FF00;"><p>7</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#9933CC;"><p>8</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FFCC99;"><p>9</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FF0000;"><p>10</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#00FFCC;"><p>11</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#663366;"><p>12</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#CCCCFF;"><p>13</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FFFFCC;"><p>14</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#00FF00;"><p>15</p><a href="#">back to start</a></li>
|
|
</ul>
|
|
</div>
|
|
<label>Scroll to the #<input type="text" value="16" /> element inside this container<button>Scroll</button></label>
|
|
<div id="xy" class="container">
|
|
<ul style="width:1500px;">
|
|
<li style="background-color:#9933CC;"><p>0</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FFCC99;"><p>1</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FF0000;"><p>2</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#00FFCC;"><p>3</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#663366;"><p>4</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#CCCCFF;"><p>5</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FFFFCC;"><p>6</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#00FF00;"><p>7</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#9933CC;"><p>8</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FFCC99;"><p>9</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FF0000;"><p>10</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#00FFCC;"><p>11</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#663366;"><p>12</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#CCCCFF;"><p>13</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FFFFCC;"><p>14</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#00FF00;"><p>15</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#9933CC;"><p>16</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FFCC99;"><p>17</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FF0000;"><p>18</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#00FFCC;"><p>19</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#663366;"><p>20</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#CCCCFF;"><p>21</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FFFFCC;"><p>22</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#00FF00;"><p>23</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#9933CC;"><p>24</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FFCC99;"><p>25</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#FF0000;"><p>26</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#00FFCC;"><p>27</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#663366;"><p>28</p><a href="#">back to start</a></li>
|
|
<li style="background-color:#CCCCFF;"><p>29</p><a href="#">back to start</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="pane" style="background-color:#000000;margin-top:40px;"></div>
|
|
<div class="pane" style="background-color:#333333;"></div>
|
|
<div class="pane" style="background-color:#666666;"></div>
|
|
<div class="pane" style="background-color:#999999;"></div>
|
|
<div class="pane" style="background-color:#CCCCCC;"></div>
|
|
</body>
|
|
</html>
|