<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
/*************************************************************
* This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
* Feel free to distribute and modify code, but keep reference to its creator
*
* Anchor slider class provides scrolling and sliding effects
* when switching between anchor hash links.
* It can find target by id or name attributes and
* slide or scroll towards target.
*
* For more information, examples and online documentation visit:
* http://webcodingeasy.com/JS-classes/Sliding-effect-between-anchor-hash-link
**************************************************************/
-->
<html>
<head>
<style>
#top_left
{
width: 200px;
height: 200px;
background-color: yellow;
}
#top_center
{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
left: 1000px;
top: 0px;
}
#top_right
{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 2100px;
top: -200px;
}
.bottom_left
{
width: 200px;
height: 200px;
background-color: green;
margin-top: 850px;
}
#bottom_right
{
width: 200px;
height: 200px;
background-color: grey;
position: absolute;
top: 1900px;
left: 2100px;
}
#bottom_center
{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
top: 1900px;
left: 1000px;
}
#center_left
{
width: 200px;
height: 200px;
background-color: pink;
margin-top: 450px;
}
#center_right
{
width: 200px;
height: 200px;
background-color: blueviolet;
position: absolute;
top: 850px;
left: 2100px;
}
.center_center
{
width: 200px;
height: 200px;
background-color: aquamarine;
position: absolute;
top: 850px;
left: 1000px;
}
#control
{
position: fixed;
top:50%;
left: 50%;
}
#control td
{
background-color: yellow;
}
#debug
{
position: fixed;
top: 70%;
left: 45%;
z-index: 1110;
}
</style>
</head>
<body>
<div id='top_left'>Top Left</div>
<div id='top_center'>Top Center</div>
<div id='top_right'>Top Right</div>
<div id='center_left'>Center Left</div>
<div class='center_center'><a name='center_center'>Center Center</a></div>
<div id='center_right'>Center Right</div>
<div class='bottom_left'><a name='bottom_left'>Bottom Left</a></div>
<div id='bottom_center'>Bottom Center</div>
<div id='bottom_right'>Bottom Right</div>
<div id='control'>
<table border='0' cellspacing='10'>
<tr>
<td><a href='#top_left'>Top Left</a></td>
<td><a href='#top_center'>Top Center</a></td>
<td><a href='#top_right'>Top right</a></td>
</tr>
<tr>
<td><a href='#center_left'>Center Left</a></td>
<td><a href='#center_center'>Center Center</a></td>
<td><a href='#center_right'>Center right</a></td>
</tr>
<tr>
<td><a href='#bottom_left'>Bottom Left</a></td>
<td><a href='#bottom_center'>Bottom Center</a></td>
<td><a href='#bottom_right'>Bottom right</a></td>
</tr>
</table>
</div>
<script src="./anchor_slider.packed.js" type="text/javascript"></script>
<script>
var scroll = new anchor_slider();
</script>
</body>
</html>
|
Download
