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

PetitQ 图片/图形 2018-11-14 1.41K 0 0

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

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; i<mooz.nbi; i++)="" {="" o[i].n="" +="(ym-ny)/8000;" n="O[i].N%nbI;" ti="Math.pow(mult,N);" with(o[i].o.style){="" left="Math.round((W-(ti*rwh))/(W+ti)*(W*.5))+"px";" top="Math.round((H-ti)/(H+ti)*(H*.5))+"px";" zindex="Math.round(10000-ti*.1);" width="Math.round(ti*rwh)+"px";" height="Math.round(ti)+"px";" }="" settimeout("mooz.mainloop();",="" 16);="" },="" oigres:function(){="" with(this){="" w="parseInt(document.getElementById("screen").style.width);" h="parseInt(document.getElementById("screen").style.height);" imgsrc="document.getElementById("images").getElementsByTagName("img");" rwh="imgsrc[0].width/imgsrc[0].height;" for(var="" i="0;i<nbI;i++)" o[i]="new" xoom(i);="" mainloop();="" document.onmousemove="function(e){" if(window.event)="" e="window.event;" ym="(e.y" ||="" e.clienty);="" if(ym="" 2="">ny)ny=ym/2;