纯js随鼠标位置变化移动速度图片放大缩小展示特效

这是一款使用纯js制作的炫酷随鼠标位置变化移动速度图片放大缩小展示特效。整个js代码短小精悍，100多行代码即完成了令人惊叹的效果。

HTML

html结构非常简单：

<div style="position:absolute;left:50%;top:50%">
    <div style="position:absolute;width:720px;height:560px;left:-360px;top:-280px;background:#fff"></div>
    <div style="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font-size:0.9em">Loading...</div>
    <div id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden"></div>
</div>
<div id="images" style="visibility:hidden">
    <img title="infinite" src="images/1.jpg">
    <img title="yellow" src="images/2.jpg">
    <img title="earth" src="images/3.jpg">
    <img title="dream" src="images/4.jpg">
    <img title="flowers" src="images/5.jpg">
</div>
                

CSS

css代码如下，只是简单的定位一些元素和给出宽度和高度：

html {overflow: hidden;}
body {
    background-image:-webkit-radial-gradient(circle at top right,#5596BC,#75BEC7);
    background-image:-moz-radial-gradient(circle at top right,#5596BC,#75BEC7);
    background-image:-o-radial-gradient(circle at top right,#5596BC,#75BEC7);
    background-image:-ms-radial-gradient(circle at top right,#5596BC,#75BEC7);
    background-image:radial-gradient(circle at top right,#5596BC,#75BEC7);
    width: 100%;
    height: 100%;
    cursor: crosshair;
}
.spanSlide {
    position: absolute;
    background: #000;
    font-size: 1px;
    overflow: hidden;
}
.imgSlide {
    position: absolute;
    left: 5%;
    top: 5%;
    width: 90%;
    height: 90%;
    overflow: hidden;
}
.txtSlide {
    position: absolute;
    top: 5%;
    left: 50px;
    width:100%;
    color:#FFF;
    font-family: arial, helvetica, verdana, sans-serif;
    font-weight: bold;
    font-size:96px;
    letter-spacing:12px;
    filter: alpha(opacity=70);
    -moz-opacity:0.7;
    opacity:0.7;
}
                

JAVASCRIPT

所有的js代码仅仅是下面的73行代码：

var ym=0;
var ny=0;
createElement = function(container, type, param){
    o=document.createElement(type);
    for(var i in param)o[i]=param[i];
    container.appendChild(o);
    return o;
}
mooz = {
    O:[],
    /////////
    mult:6,
    nbI:5,
    /////////
    rwh:0,
    imgsrc:0,
    W:0,
    H:0,
    Xoom:function(N){
        this.o = createElement(document.getElementById("screen"), "span", {
            'className':'spanSlide'
        });
        img = createElement(this.o, "img", {
            'className':"imgSlide",
            'src':mooz.imgsrc[N%mooz.imgsrc.length].src
        });
        spa = createElement(this.o, "span", {
            'className':"imgSlide"
        });
        txt = createElement(spa, "span", {
            'className':"txtSlide",
            'innerHTML':mooz.imgsrc[N%mooz.imgsrc.length].title
        });
        this.N = 10000+N;
    },
    mainloop:function(){
        with(this){
            for(i=0; iny)ny=ym/2;
}
window.onload = function(){
    ym = ny+50;
    mooz.oigres();
}