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

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

HTML

html结构非常简单：

Loading...

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

}