Tasarımlarımız düzenlenmiştir.
Sitemizde Paylaştığımız Kodlar Tekrar Düzeltilerek Yayınlanacaktır..

Eğlence Günlüğüm


Önizlemeyi Görmek İçin Resme Tıklayınız!

<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com */

    Focus Slide
    version 1.0
    last revision: 12.17.2004

    Should you improve upon or
    modify this code, please let me know
    so that I can update the version hosted
    at slayeroffice.



var d=document;        // shortcut reference to the document object
var activeLI = 0;        // the currently "active" list element - value represents its index in the liObj array
var zInterval = null;    // interval variable

var SLIDE_STEP = 8;    // how many pixels to move the sliding div at a time
var SLIDER_WIDTH = 74;    // the width of the sliding div. used to calculate
                        // its left based on the width and left of the active LI element

function init() {
    // bail out if this is an older browser or Opera which gets the offsets wrong
    // the opera issue is fixable by subtracting the container UL's width from the
  // offsetLefts...but I don't care enough to do it
    // this does NOT break opera, it just wont get the sliding thing

    if(!document.getElementById || window.opera)return;

    // create references to the LI's
    mObj = d.getElementById("mContainer");
    liObj = mObj.getElementsByTagName("li");

    // set up the mouse over events
    for(i=0;i<liObj.length;i++) {
        liObj[i].xid = i;
        liObj[i].onmouseover = function() { initSlide(this.xid); }

    // create the slider object
    slideObj = mObj.appendChild(d.createElement("div"));
    slideObj.id = "slider";

    // position the slider over the first LI
    x = liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3)-5;
    y = liObj[activeLI].offsetTop-3;
    slideObj.style.top = y + "px";
    slideObj.style.left = x + "px";

function initSlide(objIndex) {
    // return if the user is mousing over the currently active LI
    if(objIndex == activeLI)return;
    // clear the interval so we can start it over in a few lines to avoid doubling up on intervals

    // set the active list item to the object index argument
    activeLI = objIndex;
    // figure out the destination for the sliding div element
    destinationX = Math.floor(liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3))-5;
    // start the interval
    intervalMethod = function() { doSlide(destinationX); }
    zInterval = setInterval(intervalMethod,10);

function doSlide(dX) {
    // get the current left of the sliding div
    x = slideObj.offsetLeft;
    if(x+SLIDE_STEP<dX) {
        // div is less than its destination, move it to the right
        slideObj.style.left = x + "px";
    } else if (x-SLIDE_STEP>dX) {
        // div is more than its destination, move to the left
        slideObj.style.left = x + "px";
    } else  {
        // div is within the boundaries of its destination. put it where its supposed to be
        // and clear the interval
        slideObj.style.left = dX + "px";
        zInterval = null;

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {

addLoadEvent(function() {
</script>      <style type="text/css">
#mContainer {
    margin:0 auto;
    border-top:1px solid #638DA1;
    border-bottom:1px solid #638DA1;
    padding:5px 0 0 0;

#mContainer li {
    margin:0 10px 0 12px;
    font:0.8em arial,verdana;

#mContainer li a {

#slider {
    background-color:    #98B4C1;
    border:1px solid #78919B;
</style>         <!-- this list is the actionable markup -->
<ul id="mContainer">
    <li><a title="Item One" href="#">Item One</a></li>
    <li><a title="Item Two" href="#">Item Two</a></li>
    <li><a title="Item Three" href="#">Item Three</a></li>
    <li><a title="Item Four" href="#">Item Four</a></li>
    <li><a title="Item Five" href="#">Item Five</a></li>
İstatistik: eglence

Copyright © 2009 -2011 Design by Endless94/EğlenceGünlüğüm.Tr.Gg | Tasarımın çalınması halinde gerekli işlemler yapılacaktır! by Endless94/EğlenceGünlüğüm
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=