【js編程藝術】小製作五_ZenDei技術網路在線

【js編程藝術】小製作五

-Advertisement-

1.html 2.css 3.js ...

1.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Web Design</title>
    <link rel="stylesheet" type="text/css" href="styles/list.css">
</head>
<body>
    <h1>Web Design</h1>
    <p>These are the things you should know</p>
    <ol id="linklist">
        <li>
            <a href="images/shuangyu.jpg">shuangyu</a>
        </li>
        <li>
            <a href="images/baiyang.jpg">baiyang</a>
        </li>
        <li>
            <a href="images/jinniu.jpg">jinniu</a>
        </li>
        <li>
            <a href="images/shuangzi.jpg">shuangzi</a>
        </li>
    </ol>
    <script type="text/javascript" src="scripts/prepareSlideshow.js"></script>
</body>
</html>

2.css

#slideshow{
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
}
#preview{
    position: absolute;
}

3.js

function addLoadEvent(func) {
    var oldonload = window.onload;
    if(typeof window.onload != "function"){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

function insertAfter(newElement, targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}


function moveElement(elementID, final_x, final_y, interval){
    if(!document.getElementById) return false;
    if(!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);

    if(elem.movement){
        clearTimeout(elem.movement);
    }
    if(!elem.style.left){
        elem.style.left = "0px";
    }
    if(!elem.style.top){
        elem.style.top = "0px";
    }

    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    var dist = 0;

    if(xpos == final_x && ypos == final_y){
        return true;
    }
    if(xpos < final_x){
        dist = Math.ceil((final_x - xpos) / 10);
        xpos = xpos + dist;
    }
    if(xpos > final_x){
        dist = Math.ceil((xpos - final_x) / 10);
        xpos = xpos - dist;
    }
    if(ypos < final_y){
        dist = Math.ceil((final_y - xpos) / 10);
        ypos = ypos + dist;
    }
    if(ypos > final_y){
        dist = Math.ceil((xpos - final_y) / 10);
        ypos = ypos - dist;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('"+elementID+"', "+final_x+", "+final_y+", "+interval+")";
    elem.movement = setTimeout(repeat, interval);
}

function prepareSlideshow(){
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;

    if(!document.getElementById("linklist")) return false;

    var slideshow = document.createElement("div");
    slideshow.setAttribute("id", "slideshow");
    var preview = document.createElement("img");
    preview.setAttribute("src", "images/shuangbaijinshuangzi.gif");
    preview.setAttribute("alt", "buliding blocks of web design");
    preview.setAttribute("id", "preview");
    slideshow.appendChild(preview);
    var list = document.getElementById("linklist");
    insertAfter(slideshow, list);
    var links = list.getElementsByTagName("a");
    
    links[0].onmouseover = function(){
        moveElement("preview", 0, 0, 10);
    }

    links[1].onmouseover = function(){
        moveElement("preview", -100, 0, 10);
    }

    links[2].onmouseover = function() {
        moveElement("preview", -200, 0, 10)
    }

    links[3].onmouseover = function() {
        moveElement("preview", -300, 0, 10)
    }
}

addLoadEvent(prepareSlideshow);

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

[nodejs,mongodb,angularjs2]我的便利貼-web應用練習

1.目的：學習nodejs連接使用mongodb,用angularjs2展示數據 2.使用技術：資料庫: mongodb 後端數據獲取: nodejs 前端數據展示: angularjs2 ...
GIt的基本操作

基本操作安裝與配置 init add與commit git add 快照的內容寫入緩存區 git commit 將緩存區內容添加到倉庫中。 clone vim 狀態的意思是，這個文件在我們將它添加到緩存之後又有改動 status diff 尚未緩存的改動：git diff 查看已緩存的改動： gi ...
js實現360度圖片旋轉

▓▓▓▓▓▓ 大致介紹這次是一個簡單的效果，就是思路的問題效果： ▓▓▓▓▓▓ 思路旋轉的效果就是根據滑鼠的的移動距離來顯示不同的圖片，形成視覺差，仿佛就是在正真的旋轉由於效果是根據滑鼠的移動距離來操作的，即移動的像素值。如果按照預設的情況，移動滑鼠的時候圖片就旋轉的太快了，所以我們要給滑鼠 ...
select下拉框插件jquery.editable-select

項目中有個需求，下拉框既可以下拉選擇，也可以手動填寫 html代碼 js代碼獲取值用了這個插件以後，這塊是一個input,type="text" 參數 filter 選擇option以後，是否過濾預設 true effects 點擊的時候，下拉框的過渡效果有default，slide，fad ...
CSS常用屬性

CSS常用屬性 ☛關於CSS屬性個人建議查看手冊更加詳細方便，我這裡就幾種常用屬性進行分類並簡單取幾個常用屬性值，僅供跟我一樣剛學習前端的人作為入門而用。 1.字體樣式字體的縮寫,寫法是font:font-style|| font-variant ||font-weight||font-size| ...
CSS的優先順序和繼承問題

CSS的優先順序和繼承問題 ★CSS的衝突,即優先順序 CSS本身的設置可以同時應用多個樣式在同一個元素，此時樣式之間可能出現衝突而達不到用戶所想要的效果。 ★解決CSS衝突的優先順序規則： ● CSS層疊樣式表引入方法的優先順序：內聯式>內嵌式>鏈接式>導入式 ● 在多個外部樣式中，後出現的樣式的優先順序高 ...
CSS選擇符

CSS選擇符【通配選擇符】 *星號選擇器將匹配頁面里的每一個元素，但我建議你永遠不要再生產代碼中使用它。它給瀏覽器帶來大量不必要的負擔。 *{ margin:0; padding:0; } 【標簽選擇符】（也叫類型選擇符）：也就是把html標簽名作為選擇符 demo: ul {} 【id選擇符】： ...
HTML5行業現狀與未來 - 2016年終大盤點

HTML5（WEB前端），在2012年及以前，一直處於一種萌芽期的狀態當中，直至2013年才進入行業的成長期。HTML5（WEB前端）在2013和2014年，隨著行業的推動慢慢的增長，直至2015年迎來了行業的大爆發，HTML5迅速被推上舞臺，這個詞語也成了不少人閑談中的常見辭彙。 2016年，泡... ...