HTML5QQ登录cav demo

最新推荐文章于 2024-04-20 11:08:24 发布
最新推荐文章于 2024-04-20 11:08:24 发布
阅读量827 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/fengyongxian/p/7017592.html
版权

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>html5背景</title>
   
    <style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="container" style="width:100%;height:700px;">
    <div id="anitOut"></div>
</div>


<script type="text/javascript">
$(function () {
    if (!window.ActiveXObject && !!document.createElement("canvas").getContext) {
        $.getScript("http://im-img.qq.com/pcqq/js/200/cav.js?_=1428576021379",
                function () {
                    var t = {
                        width: 1.5,
                        height: 1.5,
                        depth: 10,
                        segments: 12,
                        slices: 6,
                        xRange: 0.8,
                        yRange: 0.1,
                        zRange: 1,
                        ambient: "#525252",
                        diffuse: "#FFFFFF",
                        speed: 0.0002
                    };
                    var G = {
                        count: 2,
                        xyScalar: 1,
                        zOffset: 100,
                        ambient: "#002c4a",
                        diffuse: "#005584",
                        speed: 0.001,
                        gravity: 1200,
                        dampening: 0.95,
                        minLimit: 10,
                        maxLimit: null,
                        minDistance: 20,
                        maxDistance: 400,
                        autopilot: false,
                        draw: false,
                        bounds: CAV.Vector3.create(),
                        step: CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1))
                    };
                    var m = "canvas";
                    var E = "svg";
                    var x = {
                        renderer: m
                    };
                    var i, n = Date.now();
                    var L = CAV.Vector3.create();
                    var k = CAV.Vector3.create();
                    var z = document.getElementById("container");
                    var w = document.getElementById("anitOut");
                    var D, I, h, q, y;
                    var g;
                    var r;

                    function C() {
                        F();
                        p();
                        s();
                        B();
                        v();
                        K(z.offsetWidth, z.offsetHeight);
                        o()
                    }

                    function F() {
                        g = new CAV.CanvasRenderer();
                        H(x.renderer)
                    }

                    function H(N) {
                        if (D) {
                            w.removeChild(D.element)
                        }
                        switch (N) {
                            case m:
                                D = g;
                                break
                        }
                        D.setSize(z.offsetWidth, z.offsetHeight);
                        w.appendChild(D.element)
                    }

                    function p() {
                        I = new CAV.Scene()
                    }

                    function s() {
                        I.remove(h);
                        D.clear();
                        q = new CAV.Plane(t.width * D.width, t.height * D.height, t.segments, t.slices);
                        y = new CAV.Material(t.ambient, t.diffuse);
                        h = new CAV.Mesh(q, y);
                        I.add(h);
                        var N, O;
                        for (N = q.vertices.length - 1; N >= 0; N--) {
                            O = q.vertices[N];
                            O.anchor = CAV.Vector3.clone(O.position);
                            O.step = CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1));
                            O.time = Math.randomInRange(0, Math.PIM2)
                        }
                    }

                    function B() {
                        var O, N;
                        for (O = I.lights.length - 1; O >= 0; O--) {
                            N = I.lights[O];
                            I.remove(N)
                        }
                        D.clear();
                        for (O = 0; O < G.count; O++) {
                            N = new CAV.Light(G.ambient, G.diffuse);
                            N.ambientHex = N.ambient.format();
                            N.diffuseHex = N.diffuse.format();
                            I.add(N);
                            N.mass = Math.randomInRange(0.5, 1);
                            N.velocity = CAV.Vector3.create();
                            N.acceleration = CAV.Vector3.create();
                            N.force = CAV.Vector3.create()
                        }
                    }

                    function K(O, N) {
                        D.setSize(O, N);
                        CAV.Vector3.set(L, D.halfWidth, D.halfHeight);
                        s()
                    }

                    function o() {
                        i = Date.now() - n;
                        u();
                        M();
                        requestAnimationFrame(o)
                    }

                    function u() {
                        var Q, P, O, R, T, V, U, S = t.depth / 2;
                        CAV.Vector3.copy(G.bounds, L);
                        CAV.Vector3.multiplyScalar(G.bounds, G.xyScalar);
                        CAV.Vector3.setZ(k, G.zOffset);
                        for (R = I.lights.length - 1; R >= 0; R--) {
                            T = I.lights[R];
                            CAV.Vector3.setZ(T.position, G.zOffset);
                            var N = Math.clamp(CAV.Vector3.distanceSquared(T.position, k), G.minDistance, G.maxDistance);
                            var W = G.gravity * T.mass / N;
                            CAV.Vector3.subtractVectors(T.force, k, T.position);
                            CAV.Vector3.normalise(T.force);
                            CAV.Vector3.multiplyScalar(T.force, W);
                            CAV.Vector3.set(T.acceleration);
                            CAV.Vector3.add(T.acceleration, T.force);
                            CAV.Vector3.add(T.velocity, T.acceleration);
                            CAV.Vector3.multiplyScalar(T.velocity, G.dampening);
                            CAV.Vector3.limit(T.velocity, G.minLimit, G.maxLimit);
                            CAV.Vector3.add(T.position, T.velocity)
                        }
                        for (V = q.vertices.length - 1; V >= 0; V--) {
                            U = q.vertices[V];
                            Q = Math.sin(U.time + U.step[0] * i * t.speed);
                            P = Math.cos(U.time + U.step[1] * i * t.speed);
                            O = Math.sin(U.time + U.step[2] * i * t.speed);
                            CAV.Vector3.set(U.position, t.xRange * q.segmentWidth * Q, t.yRange * q.sliceHeight * P, t.zRange * S * O - S);
                            CAV.Vector3.add(U.position, U.anchor)
                        }
                        q.dirty = true
                    }

                    function M() {
                        D.render(I)
                    }

                    function J(O) {
                        var Q, N, S = O;
                        var P = function (T) {
                            for (Q = 0, l = I.lights.length; Q < l; Q++) {
                                N = I.lights[Q];
                                N.ambient.set(T);
                                N.ambientHex = N.ambient.format()
                            }
                        };
                        var R = function (T) {
                            for (Q = 0, l = I.lights.length; Q < l; Q++) {
                                N = I.lights[Q];
                                N.diffuse.set(T);
                                N.diffuseHex = N.diffuse.format()
                            }
                        };
                        return {
                            set: function () {
                                P(S[0]);
                                R(S[1])
                            }
                        }
                    }

                    function v() {
                        window.addEventListener("resize", j)
                    }

                    function A(N) {
                        CAV.Vector3.set(k, N.x, D.height - N.y);
                        CAV.Vector3.subtract(k, L)
                    }

                    function j(N) {
                        K(z.offsetWidth, z.offsetHeight);
                        M()
                    }

                    C();
                })
    } else {
        alert('调用cav.js失败');
    }
});
</script>
</body>
</html>

转载于:https://www.cnblogs.com/fengyongxian/p/7017592.html

weixin_30877181
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html动态背景分享,酷炫一款动态背景（HTML +js canvas）
weixin_30131977的博客
06-09 6512
一款酷炫的前端动态页面废话不多说 ，分享一款酷炫的页面动态背景 效果见下图。查看demo背景图效果：实例效果点击效果：背景css*{margin: 0;padding: 0;}#canvas{position: fixed;background: #ccc;overflow: auto;z-index: -1;}背景html背景jswindow.requestAnimationFrame = ...
html动态背景gif图片,gif动态背景
weixin_32869687的博客
06-04 4344
网上很多更换照片背景颜色的实用教程，大多都是静态图片的PS更换方法。也有不少人咨询如何给GIF动态图片更换背景颜色同时仍有动画效果的。更换GIF图背景相比更换静态图背景的要麻烦些，要一帧帧的来修改。这里小编整理出一个还算简易的解决方案，希望能帮到有需要的朋友。先预览一下效果吧：原图(GIF动画)更换背景后的gif图片1更换背景后的gif图片2如果原图背景比较复杂，最常用的方法是PS用钢笔工具抠出每...
html5散花动态背景
11-14
html5的非常漂亮的满屏樱花飘落的动态背景，可做网站首页
php网站分享qq代码下载,HTML5QQ登录的一篇代码分享
weixin_30983965的博客
03-16 569
html5背景*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}$(function () {if (!window.ActiveXObject && !!document.createElement("canvas").getContext) {$.getScript("http://im-img.qq.com/...
有趣的HTML实例（八） 一个很有趣的动态背景（css+js）
好好读书
02-12 3972
有趣的HTML实例（八） 一个很有趣的动态背景（css+js） 一款简单的 HTML+CSS+JS 一个很有趣的动态背景（css+js）实例 1、HTML 2、CSS 3、JS 4、舒适的画面感 5、人潮汹涌
HTML5QQ登陆动画
11-12
在QQ登录动画中，HTML5可能用于构建登录表单的基本结构。 2. **Canvas**：HTML5的Canvas元素是一个可编程的图形区域，通过JavaScript可以绘制动态或静态图像。在QQ登录动画中，Canvas可能是用来绘制登录按钮、背景...
Cav.rar_cav_其他
09-23
标题中的"Cav.rar_cav_其他"可能是指一个与MATLAB相关的压缩文件，名字为"Cav.rar"，可能包含了特定的代码或者程序，用于处理"其他"类别的问题。描述中提到，这个压缩包是“学习matlab的很好程序资料”，意味着它...
html5使用canvas实现弹幕功能示例
09-27
HTML5的Canvas元素是一个强大的图形绘制工具，允许开发者在网页上动态绘制2D图形。在这个例子中，我们利用Canvas来实现弹幕功能，这在弹幕视频网站中非常常见，用户可以在观看视频的同时发送文字消息，这些消息就像...
高超声速飞行器CAV公开数据
11-14
美国高超声速飞行器CAV-h和CAV-L公开的总体和气动数据，可用于飞行动力学仿真、制导、控制等学科的同学使用。
cav.github.io
03-06
cav.github.io
奇幻动态特效背景html+css+js.zip
04-26
奇幻动态特效背景
HTML5登录模板(炫酷动态星空背景)
11-23
HTML5登录模板(炫酷动态星空背景) ，给人以耳目一新的感觉，代码注释详细，分享给喜欢的朋友
网页动态背景代码（4种）
05-09
包含4个网页动态背景特效，canvas特效，svg特效，需要的可以下载使用或者学习
动态壁纸代码
09-22
可能动态壁纸的效果没那么美观，但应该是个学习动态壁纸的好例子。
HTML实现动态的美丽背景，含导航栏，简洁美观大气代码，全免费
chenzhi0122的博客
06-15 1429
【代码】HTML实现动态的美丽背景，含导航栏，简洁美观大气代码，全免费。
html漂亮的动态背景切换
梦溪笔谈的博客
01-07 3242
html好看的动态背景切换
用html写一个有趣的动态背景
最新发布
liulang68的博客
04-20 590
【代码】用html写一个有趣的动态背景。
Canvas实现HTML动态粒子效果背景
拾不到一片光的博客
03-25 9912
    之前参考诸多博客，发现许多博主自定义的博客主页都会有很多动态的小粒子在页面漂浮，鼠标经过还会有响应事件，在这里，将代码记录一下。    首先，在html页面要先定义一个canvas元素：&lt;canvas id="cas"&gt;&lt;/canvas&gt;    然后，对应的js文件        var canvas = document.getElementById("cas")...
HTML实现一个动态散花背景
weixin_45932157的博客
02-19 3331
<script src="js/index.js"></script>
eeprom cav25128如何进行读写，给我个demo
06-07
EEPROM是一种非易失性存储器，可以在断电后保留数据。Cav25128是一种I2C接口的EEPROM，可以通过I2C总线进行读写。下面是一个简单的示例程序，演示如何使用Arduino控制器来读写Cav25128 EEPROM。 首先，需要连接EEPROM和Arduino控制器。将EEPROM的SDA和SCL引脚连接到Arduino的SDA和SCL引脚。然后，将EEPROM的VCC引脚连接到Arduino的5V引脚，将EEPROM的GND引脚连接到Arduino的GND引脚。 接下来，可以使用Wire库来控制I2C总线。下面是一个示例程序，演示如何读取EEPROM中的数据： ``` #include <Wire.h> const int eepromAddr = 0x50; // EEPROM的I2C地址 void setup() { Wire.begin(); // 初始化I2C总线 Serial.begin(9600); // 初始化串口 } void loop() { byte data[4]; Wire.beginTransmission(eepromAddr); // 开始I2C通信 Wire.write(0x00); // 发送EEPROM地址 Wire.endTransmission(false); // 结束I2C通信（但不释放总线） Wire.requestFrom(eepromAddr, 4); // 请求4个字节的数据 int i = 0; while (Wire.available()) { data[i++] = Wire.read(); // 读取数据到数组中 } Serial.print("Data: "); Serial.println((int)data[0]); // 打印数据到串口 delay(1000); // 延时1秒 } ``` 这个程序将从EEPROM的地址0x00处读取4个字节的数据，并将其打印到串口。可以通过修改地址和请求的字节数来读取EEPROM中的其他数据。 下面是一个示例程序，演示如何向EEPROM中写入数据： ``` #include <Wire.h> const int eepromAddr = 0x50; // EEPROM的I2C地址 void setup() { Wire.begin(); // 初始化I2C总线 Serial.begin(9600); // 初始化串口 } void loop() { byte data = 0xAA; Wire.beginTransmission(eepromAddr); // 开始I2C通信 Wire.write(0x00); // 发送EEPROM地址 Wire.write(data); // 发送要写入的数据 Wire.endTransmission(); // 结束I2C通信 Serial.println("Data written."); // 打印消息到串口 delay(1000); // 延时1秒 } ``` 这个程序将0xAA写入EEPROM的地址0x00处。可以通过修改地址和要写入的数据来写入EEPROM中的其他数据。 注意，这只是一个简单的示例程序，实际应用可能需要更复杂的代码来处理错误和其他情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值