【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);

【js编程艺术】小制作五的更多相关文章

【js 编程艺术】小制作一
最近在看js编程艺术,照葫芦画瓢,做了一个小网页.作为一枚前端渣渣,遇到了好多坑,在这里就不提了. 首先是html代码 /*gallery.html*/<!DOCTYPE html> &l ...
【js编程艺术】小制作六
1.html /* movie.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
【js 编程艺术】小制作四
1. html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
【js 编程艺术】小制作三
1.html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
【js 编程艺术】小制作二
首先是一个html文档 /* explanation.html */<!DOCTYPE html> <html> <head> <meta charset=& ...
【js编程艺术】之有用的函数
学习js的过程中有几个有用的函数. //添加事件函数 function addLoadEvent(func) { var oldonload = window.onload; if(typeof wi ...
JS 编程艺术
JS艺术片段剪贴 getFullDate: function (date) { //返回 YYYY年MM月DD日 var year = month = day = ' '; if (isNaN(dat ...
Google V8编程详解（五）JS调用C++
http://blog.csdn.net/feiyinzilgd/article/details/8453230 最近由于忙着解决个人单身的问题,时隔这么久才更新第五章. 上一章主要讲了Google ...
JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

随机推荐

CodeForces 605A Sorting Railway Cars
求一下最长数字连续上升的子序列长度,n-长度就是答案 O(n)可以出解,dp[i]=dp[i-1]+1,然后找到dp数组最大的值. #include<cstdio> #include< ...
BNU 51002 BQG's Complexity Analysis
模拟 #include<cstdio> #include<cstring> #include<cmath> #include<vector> #incl ...
Varnish Cache
1 Varnish简介 Varnish是高性能且开源的反向代理服务器和HTTP加速器(cache server).其开发者Poul-Henning Kamp是FreeBSD核心的开发人员之一.Varn ...
方法的标签_With携带
方法中参数的标签: 标签的由来:1.标签也是方法名的一部分:2.为了提高程序的阅读性:OC方法允许我们给每个参数添加一个标签来说明当前参数的含义: 标签的作用:标签是为了标识变量的,因此标签名和变量名 ...
php中var_dump() 打印出一个对象的时候，信息怎么看？
php 的一个依赖注入容器, 说白了,就是用php 的反射类,来在运行的时候动态的分析类具有的函数,以及动态分析函数的参数, 从而实例化类,并执行类的方法. 另外,php 中的 typehint 还是 ...
Unity中的CG编写Shader系列(Blend)
1.不透明度当我们要将两个半透的纹理贴图到一个材质球上的时候就遇到混合的问题,由于前面的知识我们已经知道了片段着色器以及后面的环节的主要工作是输出颜色与深度到帧缓存中,所以两个纹理在每个像素上的颜色 ...
Objective-c学习笔记3
objective-c代码块多并发 1.代码块对象是对C语言中函数的扩展,除了函数中的代码,代码块还包含有变量绑定,代码块有时也被称为闭包 2.代码块包含两种绑定类型,自动绑定使用的是栈空间,托管绑定 ...
CodeForces 652C Foe Pairs
只要计算每个位置最多能到哪个位置,累加即可,DP从后往前预处理一下每个位置到达的最远位置. 有坑点:输入的时候如果同一个点出发的,需要保存最小值. #include<cstdio> #in ...
Android 5.0之前屏幕截图的方法
截图的几种方法 Android获取屏幕截图主要有以下三种方法 1.通过view.getDrawingCache()获取指定View的绘制缓存来实现截屏. 这种方式Android 5.0之前也可以,且不 ...
Android实时监听网络状态
Android实时监听网络状态(1) 其实手机在网络方面的的监听也比较重要,有时候我们必须实时监控这个程序的实时网络状态,android在网络断开与连接的时候都会发出广播,我们通过接收系统的广播就 ...

【js编程艺术】小制作五

【js编程艺术】小制作五的更多相关文章

随机推荐

热门专题