这是一款使用纯 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; iny)ny=ym/2;
- }
- window.onload = function(){
- ym = ny+50;
- mooz.oigres();
- }
来源: http://www.htmleaf.com/jQuery/Image-Effects/20141204671.html