`
zhangzcz1999
  • 浏览: 147593 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

牛叉JS代码

J#HTMLGo 
阅读更多
相同图片 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Wanna tell her - interactive DHTML </title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #fff;
width: 100%;
height: 100%;
}
#screen {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
background: #fff;
}
#screen img {
position: absolute;
cursor: pointer;
width: 0px;
height: 0px;
-ms-interpolation-mode:nearest-neighbor;
}
#bankImages {
visibility: hidden;
}
#FPS {
position: absolute;
right: 5px;
bottom: 5px;
font-size: 10px;
color: #666;
font-family: verdana;
}

</style>

<script type="text/javascript">
/* ==== Easing function ==== */
var Library = {};
Library.ease = function () {
this.target = 0;
this.position = 0;
this.move = function (target, speed) {
this.position += (target - this.position) * speed;
}
}

var tv = {
/* ==== variables ==== */
O : [],
fps : 0,
screen : {},
angle : {
x : new Library.ease(),
y : new Library.ease()
},
camera : {
x    : new Library.ease(),
y    : new Library.ease()
},
create3DHTML : function (i, x, y, z, sw, sh) {
/* ==== create HTML image element ==== */
var o = document.createElement('img');
o.src = i.src;
tv.screen.obj.appendChild(o);
/* ==== 3D coordinates ==== */
o.point3D = {
x  : x,
y  : y,
z  : new Library.ease(),
sw : sw,
sh : sh,
w  : i.width,
h  : i.height
};
o.point3D.z.target = z;
/* ==== push object ==== */
o.point2D = {};
tv.O.push(o);

/* ==== on mouse over event ==== */
o.onmouseover = function () {
if (this != tv.o) {
this.point3D.z.target = tv.mouseZ;
tv.camera.x.target = this.point3D.x;
tv.camera.y.target = this.point3D.y;
if (tv.o) tv.o.point3D.z.target = 0;
tv.o = this;
}
return false;
}

/* ==== on mousedown event ==== */
o.onmousedown = function () {
if (this == tv.o) {
if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0;
else {
tv.o = false;
this.onmouseover();
}
}
}

/* ==== main 3D function ==== */
o.animate = function () {
/* ==== 3D coordinates ==== */
var x = this.point3D.x - tv.camera.x.position;
var y = this.point3D.y - tv.camera.y.position;
this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08);
/* ==== rotations ==== */
var xy = tv.angle.cx * y  - tv.angle.sx * this.point3D.z.position;
var xz = tv.angle.sx * y  + tv.angle.cx * this.point3D.z.position;
var yz = tv.angle.cy * xz - tv.angle.sy * x;
var yx = tv.angle.sy * xz + tv.angle.cy * x;
/* ==== 2D transform ==== */
var scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
x = yx * scale;
y = xy * scale;
var w = Math.round(Math.max(0, this.point3D.w * scale * this.point3D.sw));
var h = Math.round(Math.max(0, this.point3D.h * scale * this.point3D.sh));
/* ==== HTML rendering ==== */
var o    = this.style;
o.left  = Math.round(x + tv.screen.w - w * .5) + 'px';
o.top    = Math.round(y + tv.screen.h - h * .5) + 'px';
o.width  = w + 'px';
o.height = h + 'px';
o.zIndex = 10000 + Math.round(scale * 1000);
}
},

/* ==== init script ==== */
init : function (structure, FL, mouseZ, rx, ry) {
this.screen.obj = document.getElementById('screen');
this.screen.obj.onselectstart = function () { return false; }
this.screen.obj.ondrag        = function () { return false; }
this.mouseZ = mouseZ;
this.camera.focalLength = FL;
this.angle.rx = rx;
this.angle.ry = ry;
/* ==== create objects ==== */
var i = 0, o;
while( o = structure[i++] )
this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh);
/* ==== start script ==== */
this.resize();
mouse.y = this.screen.y + this.screen.h;
mouse.x = this.screen.x + this.screen.w;
/* ==== loop ==== */
setInterval(tv.run, 16);
setInterval(tv.dFPS, 1000);
},

/* ==== resize window ==== */
resize : function () {
var o = tv.screen.obj;
if (o) {
tv.screen.w = o.offsetWidth / 2;
tv.screen.h = o.offsetHeight / 2;
for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent) {
tv.screen.x += o.offsetLeft;
tv.screen.y += o.offsetTop;
}
}
},

/* ==== main loop ==== */
run : function () {
tv.fps++;
/* ==== motion ease ==== */
tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * tv.angle.rx, .1);
tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * tv.angle.ry, .1);
tv.camera.x.move(tv.camera.x.target, .025);
tv.camera.y.move(tv.camera.y.target, .025);
/* ==== angles sin and cos ==== */
tv.angle.cx = Math.cos(tv.angle.x.position);
tv.angle.sx = Math.sin(tv.angle.x.position);
tv.angle.cy = Math.cos(tv.angle.y.position);
tv.angle.sy = Math.sin(tv.angle.y.position);
/* ==== loop through images ==== */
var i = 0, o;
while( o = tv.O[i++] ) o.animate();
},

/* ==== trace frames per seconds ==== */
dFPS : function () {
document.getElementById('FPS').innerHTML = tv.fps + ' FPS';
tv.fps = 0;
}
}

/* ==== global mouse position ==== */
var mouse = {
x : 0,
y : 0
}
document.onmousemove = function(e) {
if (window.event) e = window.event;
mouse.x = e.clientX;
mouse.y = e.clientY;
return false;
}

/* ==== starting script ==== */
onload = function() {
onresize = tv.resize;
/* ==== build grid ==== */
var img = document.getElementById('bankImages').getElementsByTagName('img');
var structure = [];
for (var i = -300; i <= 300; i += 120)
for (var j = -300; j <= 300; j += 120)
structure.push({ img:img[0], x:i, y:j, z:0, sw:.5, sh:.5 });
/* ==== let's go ==== */
tv.init(structure, 350, -200, .005, .0025);
}

</script>
</head>

<body>

<div id="screen"> </div>

<div id="bankImages">
<img alt="" src="http://avatar.profile.csdn.net/D/0/9/2_cicadu.jpg">
</div>
<div id="FPS"> </div>

</body>
</html>

不同图片 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
        <title>Wanna tell her - interactive DHTML </title> 
        <meta http-equiv="imagetoolbar" content="no"> 
        <style type="text/css"> 
            html { 
                overflow: hidden; 
            } 
            body { 
                position: absolute; 
                margin: 0px; 
                padding: 0px; 
                background: #fff; 
                width: 100%; 
                height: 100%; 
            } 
            #screen { 
                position: absolute; 
                left: 10%; 
                top: 10%; 
                width: 80%; 
                height: 80%; 
                background: #fff; 
            } 
            #screen img { 
                position: absolute; 
                cursor: pointer; 
                width: 0px; 
                height: 0px; 
                -ms-interpolation-mode:nearest-neighbor; 
            } 
            #bankImages { 
                visibility: hidden; 
            } 
            #FPS { 
                position: absolute; 
                right: 5px; 
                bottom: 5px; 
                font-size: 10px; 
                color: #666; 
                font-family: verdana; 
            } 
        </style> 
    
        <script type="text/javascript"> 
            /* ==== Easing function ==== */ 
            var Library = {}; 
            Library.ease = function () { 
                this.target = 0; 
                this.position = 0; 
                this.move = function (target, speed) { 
                    this.position += (target - this.position) * speed; 
                } 
            } 
            
            var tv = { 
                /* ==== variables ==== */ 
                O : [], 
                fps : 0, 
                screen : {}, 
                angle : { 
                    x : new Library.ease(), 
                    y : new Library.ease() 
                }, 
                camera : { 
                    x    : new Library.ease(), 
                    y    : new Library.ease() 
                }, 
                create3DHTML : function (i, x, y, z, sw, sh) { 
                    /* ==== create HTML image element ==== */ 
                    var o = document.createElement('img'); 
                    o.src = i.src; 
                    tv.screen.obj.appendChild(o); 
                    /* ==== 3D coordinates ==== */ 
                    o.point3D = { 
                        x  : x, 
                        y  : y, 
                        z  : new Library.ease(), 
                        sw : sw, 
                        sh : sh, 
                        w  : i.width, 
                        h  : i.height 
                    }; 
                    o.point3D.z.target = z; 
                    /* ==== push object ==== */ 
                    o.point2D = {}; 
                    tv.O.push(o); 
            
                    /* ==== on mouse over event ==== */ 
                    o.onmouseover = function () { 
                        if (this != tv.o) { 
                            this.point3D.z.target = tv.mouseZ; 
                            tv.camera.x.target = this.point3D.x; 
                            tv.camera.y.target = this.point3D.y; 
                            if (tv.o) tv.o.point3D.z.target = 0; 
                            tv.o = this; 
                        } 
                        return true; 
                    } 
            
                    /* ==== on mousedown event ==== */ 
                    o.onmousedown = function () { 
                        if (this == tv.o) { 
                            if (this.point3D.z.target == tv.mouseZ) 
                                this.point3D.z.target = 0; 
                            else { 
                                tv.o = false; 
                                this.onmouseover(); 
                            } 
                        } 
                    } 
            
                    /* ==== main 3D function ==== */ 
                    o.animate = function () { 
                        /* ==== 3D coordinates ==== */ 
                        var x = this.point3D.x - tv.camera.x.position; 
                        var y = this.point3D.y - tv.camera.y.position; 
                        this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08); 
                        /* ==== rotations ==== */ 
                        var xy = tv.angle.cx * y  - tv.angle.sx * this.point3D.z.position; 
                        var xz = tv.angle.sx * y  + tv.angle.cx * this.point3D.z.position; 
                        var yz = tv.angle.cy * xz - tv.angle.sy * x; 
                        var yx = tv.angle.sy * xz + tv.angle.cy * x; 
                        /* ==== 2D transform ==== */ 
                        var scale = tv.camera.focalLength / (tv.camera.focalLength + yz); 
                        x = yx * scale; 
                        y = xy * scale; 
                        var w = Math.round(Math.max(0, this.point3D.w * scale * this.point3D.sw)); 
                        var h = Math.round(Math.max(0, this.point3D.h * scale * this.point3D.sh)); 
                        /* ==== HTML rendering ==== */ 
                        var o    = this.style; 
                        o.left  = Math.round(x + tv.screen.w - w * .5) + 'px'; 
                        o.top    = Math.round(y + tv.screen.h - h * .5) + 'px'; 
                        o.width  = w + 'px'; 
                        o.height = h + 'px'; 
                        o.zIndex = 10000 + Math.round(scale * 1000); 
                    } 
                }, 
            
                /* ==== init script ==== */ 
                init : function (structure, FL, mouseZ, rx, ry) { 
                    this.screen.obj = document.getElementById('screen'); 
                    this.screen.obj.onselectstart = function () { return false; } 
                    this.screen.obj.ondrag        = function () { return false; } 
                    this.mouseZ = mouseZ; 
                    this.camera.focalLength = FL; 
                    this.angle.rx = rx; 
                    this.angle.ry = ry; 
                    /* ==== create objects ==== */ 
                    var i = 0, o; 
                    while( o = structure[i++] ) 
                    this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh); 
                    /* ==== start script ==== */ 
                    this.resize(); 
                    mouse.y = this.screen.y + this.screen.h; 
                    mouse.x = this.screen.x + this.screen.w; 
                    /* ==== loop ==== */ 
                    setInterval(tv.run, 16); 
                    setInterval(tv.dFPS, 1000); 
                }, 
                
                /* ==== resize window ==== */ 
                resize : function () { 
                    var o = tv.screen.obj; 
                    if (o) { 
                        tv.screen.w = o.offsetWidth / 2; 
                        tv.screen.h = o.offsetHeight / 2; 
                        for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent) { 
                            tv.screen.x += o.offsetLeft; 
                            tv.screen.y += o.offsetTop; 
                        } 
                    } 
                }, 
                
                /* ==== main loop ==== */ 
                run : function () { 
                    tv.fps++; 
                    /* ==== motion ease ==== */ 
                    tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * tv.angle.rx, .1); 
                    tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * tv.angle.ry, .1); 
                    tv.camera.x.move(tv.camera.x.target, .025); 
                    tv.camera.y.move(tv.camera.y.target, .025); 
                    /* ==== angles sin and cos ==== */ 
                    tv.angle.cx = Math.cos(tv.angle.x.position); 
                    tv.angle.sx = Math.sin(tv.angle.x.position); 
                    tv.angle.cy = Math.cos(tv.angle.y.position); 
                    tv.angle.sy = Math.sin(tv.angle.y.position); 
                    /* ==== loop through images ==== */ 
                    var i = 0, o; 
                    while( o = tv.O[i++] ) o.animate(); 
                }, 
                
                /* ==== trace frames per seconds ==== */ 
                dFPS : function () { 
                    document.getElementById('FPS').innerHTML = tv.fps + ' FPS'; 
                    tv.fps = 0; 
                } 
            } 
            
            /* ==== global mouse position ==== */ 
            var mouse = { 
                x : 0, 
                y : 0 
            } 
            document.onmousemove = function(e) { 
                if (window.event) e = window.event; 
                mouse.x = e.clientX; 
                mouse.y = e.clientY; 
                return false; 
            } 
            
            /* ==== starting script ==== */ 
            onload = function() { 
                onresize = tv.resize; 
                /* ==== build grid ==== */ 
                var img = document.getElementById('bankImages').getElementsByTagName('img'); 
                var structure = []; 
                var off=0;
                for (var i = -150; i <= 150; i += 101) 
                for (var j = -150; j <= 150; j += 101) {
                    structure.push({ img:img[off], x:i, y:j, z:0, sw:.5, sh:.5 }); 
                    off++;
                }
                /* ==== let's go ==== */ 
                tv.init(structure, 350, -200, .005, .0025); 
            } 
        
        </script> 
    </head> 

    <body> 
        <div id="screen"> </div> 
        
        <div id="bankImages"> 
            <img alt="" src="http://www.zz208.com/datas/pic2/i/1%20(4)/1%20(1)/ka1_001.jpg"> 
            <img alt="" src="http://www.zz208.com/datas/pic2/i/1%20(4)/1%20(1)/ka1_002.jpg"> 
            <img alt="" src="http://www.zz208.com/datas/pic2/i/1%20(4)/1%20(1)/ka1_003.jpg"> 
            <img alt="" src="http://www.zz208.com/datas/pic2/i/1%20(4)/1%20(1)/ka1_004.jpg"> 
            <img alt="" src="http://www.zz208.com/datas/pic2/i/1%20(4)/1%20(1)/ka1_005.jpg"> 
            <img alt="" src="http://www.zz208.com/datas/pic2/i/1%20(4)/1%20(1)/ka1_006.jpg"> 
            <img alt="" src="http://www.zz208.com/datas/pic2/i/1%20(4)/1%20(1)/ka1_007.jpg"> 
            <img alt="" src="http://www.zz208.com/datas/pic2/i/1%20(4)/1%20(1)/ka1_008.jpg"> 
            <img alt="" src="http://www.zz208.com/datas/pic2/i/1%20(4)/1%20(1)/ka1_009.jpg"> 
        </div> 
        
        <div id="FPS"></div> 
    
    </body> 
</html>
分享到：
| eclipse启动参数(eclipse.ini)说明
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    牛叉广告管理优化大师（NiuXams） V1.10 正式版.zip

    【牛叉软件 1.10 更新信息】 广告代码管理 ·系统化管理网站上的固定、漂浮、弹窗等各种类广告代码。存储为js文件，一次创建入库，全站引用。 广告位管理 ·系统化管理网站上的广告位js文件。化繁为简，便捷管理...

    牛叉广告管理优化大师(NiuXams) v2.12.rar

    牛叉广告管理优化大师【程序主要特点】 1. 可系统化管理网站内所有广告资源。 2. 可智能投放广告，最大化变现网站流量。 3. 前台广告投放采用纯js文件，网站最小负载，即使php或mysql崩溃也不影响广告投放。赞！ ...

    牛叉内容管理系统(NiuXcms) v1.07.rar

    牛叉内容管理系统【程序特点】 1. 专为搜索引擎优化设计！ 2. 专为网站广告收益优化设计！内含牛叉广告管理优化大师(NiuXams)插件模块。 3. 全部直接生成真静态文件，同时满足搜索引擎优化、网站最小负载。即使...

    基于PHP的牛叉广告管理优化大师NiuXams(php+mysql)源码.zip

    【描述】中的"牛叉广告管理优化大师NiuXams"表明这是一个专门针对广告管理和优化的工具。在互联网行业中，广告管理是关键的一环，涉及到广告投放、跟踪、分析和优化等多个方面。NiuXams可能是为了解决这些问题而设计...

    牛叉广告管理优化大师(NiuXams) v2.12

    牛叉广告管理优化大师【程序主要特点】 1. 可系统化管理网站内所有广告资源。 2. 可智能投放广告，最大化变现网站流量。 3. 前台广告投放采用纯js文件，网站最小负载，即使php或mysql崩溃也不影响广告投放。赞！ ...

    jquery IE浏览器版本过低提示.rar

    4. **Modernizr**：这是一个强大的JavaScript库，可以检测浏览器的特性，帮助你决定何时使用替代的代码路径。 5. **优雅降级与渐进增强**：设计网页时，应考虑在没有JavaScript或使用旧版浏览器的情况下的用户体验...

    flash反编译工具Imperator

    其中，“Imperator”是一款备受推崇的工具，因其强大的功能和高效的性能，被誉为“非常牛叉”的Flash反编译利器。 Imperator的主要功能在于将已经编译好的SWF（ShockWave Flash）文件还原成源代码，包括...

    ixedit-JQuery效果生成器

    IxEdit是一个傻瓜式的JavaScript开发工具（其实就是JavaScript代码库）。无需掌握什么JavaScript基础，你就利用IxEdit方便的制作出一些常用的很牛叉的页面动态、交互效果。 此版本不需要google gears支持。 支持...

    nodejs-sdk：用于Node.js的Qiniu资源（云）存储SDK

    秦牛Cloud SDK for Node.js下载从npm安装这是我们建议的方式$ npm install qiniu从release版本下载下载地址： : 这里可以下载到旧版本的SDK，发布版本有版本号，有 ，使用规格比较稳定。从git库下载您可以直接用git ...

    jQuery中图片展示插件highslide.js的简单dom

    那么这么牛叉的插件我们该如何用哪，下面我就跟大家讲解一下。 一、引入 首先我们运用绝对路径引入，这一般都是在实际项目中引用的方法，我们下载时候会有个文件包，里面包含样式文件和脚本文件。 　 　 用的时候只...

    lab-es6-promises

    在public/javascripts/addFood.js文件中，有一个addFood(step, id, callback)函数模仿了JavaScript的异步特性。 您不应在此文件中进行任何更改。 在public/javascripts/script.js文件中，我们为您提供了一

    javascript-carnival-2

    欢迎来到JavaScript狂欢节... 编写使它们膨胀的代码！ 狂欢节经典影片《 Whack a Mole》在您自己的Web浏览器中立即栩栩如生。 所有的痣都去了哪里？ 一个扮靓游戏，让您的小丑看起来很漂亮！ 反馈！ 完成这些练习

    javascript-carnival

    欢迎来到JavaScript狂欢节！... 编写使它们膨胀的代码！ 狂欢节经典影片《 Whack a Mole》在您自己的网络浏览器中栩栩如生。 所有的痣都去了哪里？ 一个扮靓游戏，让您的小丑看起来很漂亮！回馈！ 完成这些练习（或尽可

    很好的jsp帮助文档包含多多滴...

    这个“超牛叉的帮助”压缩包显然提供了一套全面的学习资源，涵盖了Web开发的关键方面。无论是初学者还是经验丰富的开发者，都能从中受益，通过实例学习和理解这些技术，提升自己的Web开发能力。这些文档对于实际项目...

    typescript-handbook.pdf

    总的来说，《TypeScript Handbook》全面覆盖了从基础到高级的TypeScript概念和技术，帮助开发者更好地理解和使用这个强大的静态类型系统，从而编写出更安全、更易于维护的JavaScript代码。随着JavaScript应用程序...

    DONET的JQuery.Datatables集成插件(Mvc.JQuery.Datatables)

    【描述】：“使用JQuery.Datatables再也不用烦恼了，非常方便的集成插件，还是老外牛叉啊！” JQuery.Datatables是一款功能强大的JavaScript库，它可以将HTML表格转化为功能丰富的数据网格，提供排序、搜索、分页等...

    node-buffalo:[非活动项目] Buffalo是Node.js的轻量级BSON库

    使用后果自负您可以克隆源代码并使用npm link安装，也可以使用npm install buffalo从npm安装最新发布的版本。运行测试使用npm test 。原料药布法罗公开了两种方法： exports.parse = function(buffer) { ... }...

    comment-block:用于代码注释的 Atom.io 包

    评论块这是一个 Atom 包，用于帮助程序员注释他们的代码。 有很多类似的包。 我只是为了做而做。安装打开原子包管理器 &gt; 安装包评论区安装重启（ctrl+alt+r）用法无论您选择一行还是多行，您只需要一个快捷键：Ctrl ...

    code_genius

    Code Genius使用户可以发布和查看代码段，并提供示例代码的注释。 使用的著名技术 ReactRedux Sequelize 入门 要启动并运行本地副本，请遵循以下简单步骤。 先决条件 这是一个如何列出使用该软件所需的内容以及...

    jsp+Servlet网上选课系统

    7. **前端技术**：虽然主要讨论的是后端的JSP和Servlet，但一个完整的选课系统也需要良好的前端支持，如HTML、CSS和JavaScript，用于构建用户界面和提供交互效果。 在实际开发过程中，开发者还需要考虑安全性、性能...

Magicbox
Global site tag (gtag.js) - Google Analytics