登陆页面html5代码qq,HTML5QQ登录的一篇代码分享

5268f80b9b1e01f982625ef6fac83ca1.png

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/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失败');

}

});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/556316.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

unity 多台 显示器 控制_飞利浦292E2E评测丨宽屏显示器中的多面手

■本文来自中关村在线屏幕比例21:9或32:9的显示器&#xff0c;因为横向屏幕很长&#xff0c;所以被人形象的称为带鱼屏。相较于16:9的显示器&#xff0c;屏幕拥有更多显示面积&#xff0c;我们能获得更多信息&#xff0c;大大提升办公效率。同时带鱼屏打游戏和看电影时也能获得…

Idea 创建简单的SpringBoot 父子项目

背景 使用Idea 创建一个模块化的SpringBoot项目&#xff0c;但是发现Idea 创建父子项目的方式较Eclipse 较为不同&#xff0c;且Idea 创建的过程较Eclipse创建父子项目的过程复杂。 Eclipse 创建SpringBoot父子项目传送门 网上虽然有Idea创建SpringBoot父子项目&#xff0c;但…

微服务架构与SpringCloud

微服务架构简述 通常而言&#xff0c;微服务架构是一种架构模式或者说是一种架构风格&#xff0c;它提倡将单一应用程序划分成一组小的服务&#xff0c;每个服务运行在其独立的自己的进程中&#xff0c;服务之间互相协调、互相配合为用户提供最终价值。服务之间采用轻量级的通…

REST和RPC是什么东东?两者有什么区别

1 REST与RPC概念 什么是REST REST是一种架构风格&#xff0c;指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。REST规范把所有内容都视为资源&#xff0c;网络上一切皆资源。 REST并没有创造新的技术&#xff0c;组件或服务&#xff0c…

简述计算机进行远程桌面管理操作过程,服务器应用之“远程桌面连接”(操作篇)...

在上篇《服务器应用之“远程桌面连接”(部署篇) 》《服务器应用之“远程桌面连接”(建立篇) 》&#xff0c;我们介绍了远程桌面的部署和建立方法。在远程桌面连接成功后就可以进行一些远程桌面连接可以进行的计算机管理了。具体可以进行的远程桌面连接操作如下&#xff1a;1. 使…

未为dll加载任何符号_专家发现aspersky 和Trend Micro安全性解决方案中的DLL劫持问题...

SafeBreach的研究人员发现了Kaspersky安全连接、Trend Micro最大安全性和Autodesk桌面应用程序中的几个DLL劫持漏洞&#xff0c;黑客可以利用这些漏洞进行DLL预加载、代码执行和权限升级。第一个问题在卡巴斯基安全连接(KSDE) VPN客户端&#xff0c;跟踪为CVE-2019-15689&#…

什么是Eureka? 单机版Eureka如何使用?

Eureka 是什么&#xff1f; Eureka 是Spring Cloud的服务治理组件&#xff0c;有三个核心角色&#xff1a; 服务注册中心、服务提供者、服务消费者。Eureka 主管服务注册中心。 是Netflix的一个子模块&#xff0c;也是核心模块之一。Eureka是一个基于REST的服务&#xff0c;用…

ntko跨浏览器插件_继泄露版后,微软全新 Chrome 内核 Edge 浏览器你都测试过了吗?...

尽管微软的 Office 和 Windows 10 势头不错&#xff0c;但像 WP 手机、XBox 等方面似乎并未获得预期的成功。而先前为了替代老旧的 IE 浏览器&#xff0c;微软倾力开发的 Edge 也未见起色。不过微软也一直在努力变得更加开放&#xff0c;比如发布 VS for Mac、Office for Mac、…

如何将单机版的Eureka服务改为集群版Eureka服务

Eureka 集群原理 基本原理 上图是来自eureka的官方架构图&#xff0c;这是基于集群配置的eureka&#xff1b; 处于不同节点的eureka通过Replicate进行数据同步Application Service为服务提供者Application Client为服务消费者Make Remote Call完成一次服务调用 服务启动后向…

台式计算机读不到u盘怎么回事,电脑读不出u盘怎么办

把U盘插入电脑USB接口中&#xff0c;却发现找不到U盘图标&#xff0c;甚至连安装U盘驱动的提示也没有&#xff0c;那么电脑读不出u盘怎么办呢?天学习啦小编就和大家说说电脑读不出u盘的解决方法。电脑读不出u盘解决方法1、首先应该排除是否是由于电脑系统问题&#xff0c;具体…

Eureka 与Zookeeper 的区别,Eureka相较于Zookeeper好在哪?

传统的ACID A&#xff08;Atomicity&#xff09; 原子性C&#xff08;Consistency&#xff09; 一致性I &#xff08;Isolation&#xff09;独立性D&#xff08;Durability&#xff09;持久性 关系型数据库&#xff08;MySQL&#xff0c;Oracle&#xff0c;SqlServer&#xf…

如何将Springboot项目成功部署到linux服务器上?

springboot的jar包方式 idea默认就是jar打包方式所以直接使用maven工具按照步骤点击就可以直接打包ps:打包前你的数据库相关的连接信息要记得修改&#xff0c;不能再用本地的了 第二步&#xff1a;Maven clean &#xff1a;清除编译后的目录&#xff0c;默认是target目录 [IN…

2018年3月计算机二级考试题,2018年3月计算机二级考试Access综合试题十

2018年3月计算机等级考试即将开始&#xff0c;小编在这里为考生们整理了2018年3月计算机二级考试Access综合试题&#xff0c;希望能帮到大家&#xff0c;想了解更多资讯&#xff0c;请关注出国留学网的及时更新哦。2018年3月计算机二级考试Access综合试题十(1)要将“选课成绩”…

sqldataadapter.fill 索引超出了数组界限_小学生学习C++||第十五节 数组

存储数据的方式第一种&#xff0c;变量&#xff1a;存放1个学生的数学成绩可以定义1个变量存放&#xff0c;那么如果想要存放100个学生的数学成绩应该如何存储呢&#xff1f;第二种&#xff0c;数组&#xff1a;引入数组概念&#xff1a;可以用来表达类型相同的元素的集合&…

数据字典在sga的哪一个组件中缓存_【赵强老师】Oracle数据库的内存结构

首先&#xff0c;我们通过一张图片来了解一下Oracle数据库的内存结构&#xff0c;如下&#xff1a;每个数据库实例有两个关联的内存结构—系统全局区(SGA),程序全局区(PGA)。系统全局(SGA)&#xff1a;一组共享的内存结构(称为SGA 组件)&#xff0c;其中包含一个OracleDB 实例的…

计算机黑屏策略,小黑w7系统诊断策略服务已被禁用的还原教程

小黑w7家庭版开机速度快&#xff0c;是入门级小黑w7系统。据调查不少用户在使用中都碰到了诊断策略服务已被禁用的问题。面对小黑w7系统诊断策略服务已被禁用这样的小问题&#xff0c;我们该如何解决呢&#xff1f;不经常使用电脑的朋友对于小黑w7系统诊断策略服务已被禁用的问…

overline css,CSS text-decoration-line 属性

定义和用法text-decoration-line 属性规定文本修饰要使用的线条类型。注意&#xff1a;您也可以使用 text-decoration 属性设置 text-decoration-line。text-decoration 属性是 text-decoration-line、text-decoration-style 和 text-decoration-color 属性的速记属性。注意&am…

npoi word在试图打开文件时遇到错误_【技巧】word在试图打开文件时遇到错误

问题使用Word的时候遇到了一个问题&#xff0c;如下图所示解决方案情况一&#xff1a;修改文件后缀导致打开错误如果源文件不是“.doc”或者“.docx”格式结尾&#xff0c;通过修改文件后缀的方式修改为“.doc”或者“.docx”格式。在打开文件的时候出现上述警告时&#xff0c;…

空间服务器有问题是系统问题吗,服务器空间租用两个主要问题要留意

只要是建设网站&#xff0c;那么服务器空间租用都是不能缺少的。而且这样的一种租赁模式都是长期的&#xff0c;所以我们需要考虑到租用的整体性价比&#xff0c;这样后续的应用才能有所保障。而且我们只要是建设了网站&#xff0c;服务器和空间一般都是不会更换掉的&#xff0…

面试让HR都能听懂的MySQL锁机制,欢声笑语中搞懂MySQL锁

腾讯云数据库负责人林晓斌说过&#xff1a;“我们面试MySQL同事时只考察两点&#xff0c;索引和锁”。言简意赅&#xff0c;MySQL锁的重要性不言而喻。 本文通过同事“侨总”的一场面试&#xff0c;带你通俗易懂的掌握MySQL各种锁机制&#xff0c;希望可以帮到你&#xff01;近…