HTML5 QQ登录背景动态图片
预览效果如图所示：
代码如下：
<!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>
HTML5 QQ登录背景动态图片的更多相关文章
- WPF简单模拟QQ登录背景动画
介绍 之所以说是简单模拟,是因为我不知道QQ登录背景动画是怎么实现的.这里是通过一些办法把它简化了,做成了类似的效果 效果图 大体思路 首先把背景看成是一个4行8列的点的阵距,X轴Y轴都是距离70.把 ...
- WPF简单模拟QQ登录背景动画（转）
介绍 之所以说是简单模拟,是因为我不知道QQ登录背景动画是怎么实现的.这里是通过一些办法把它简化了,做成了类似的效果 效果图 大体思路 首先把背景看成是一个4行8列的点的阵距,X轴Y轴都是距离70.把 ...
- swing实现QQ登录界面1.0（ 实现了同一张图片只加载一次）、（以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件）
swing实现QQ登录界面1.0( 实现了同一张图片只加载一次).(以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件) 代码思路分析: 1.(同一张图片仅仅需要加载一次就够了,下 ...
- 基于HTML5自定义文字背景生成QQ签名档
分享一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版一样覆盖在文字上.点击生成QQ签名档即可将文字背景融为一体生成另外一张图片 ...
- 基于html5页面滚动背景图片动画效果
基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="fullpage&q ...
- JavaSwing仿QQ登录界面，注释完善，适合新手学习
使用说明: 这是一个java做的仿制QQ登录界面,界面仅使用一个类, JDK版本为jdk-11 素材包的名字为:素材(下载)请在项目中新建一个名字为“素材”的文件夹. 素材: https://pan. ...
- html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计
序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度 ...
- 界面编程模仿篇(QQ登录界面逼真篇)
写了好多天的爬虫,偷空前前后后用了两天的时间(排除吃饭睡觉)写完了这个QQ登录界面,看起来还凑和着吧,如果是的大神的,莫见笑,纯属业余作品,废话先不多说,截图如下,其中第二幅图片中的红色方框部份有待完 ...
- 巧用HTML5给按钮背景设计不同的动画
如何巧用HTML5设计按钮背景不同动画特效,在该特效中,当鼠标滑过按钮时,使用CSS3 animation 来动画 background-size 和 background-posit ...
随机推荐
- 【枚举】Vijos P1496 火柴棒等式 （NOIP2008提高组第二题）
题目链接: https://vijos.org/p/1496 题目大意: 给你n(n<24)根火柴棍,你可以拼出多少个形如“A+B=C”的等式?("+"和"=&qu ...
- Nodejs in Visual Studio Code 12.构建单页应用Scrat实践
1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...
- 西安Uber优步司机奖励政策（1月11日~1月17日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 2nd day
<?php //求数组的平均值 $a3 = array( array(11,12, 13), array(21,22,23, 24, 25), array(31,32,33, 35), arra ...
- Python随机生成验证码的两种方法
Python随机生成验证码的方法有很多,今天给大家列举两种,大家也可以在这个基础上进行改造,设计出适合自己的验证码方法方法一:利用range Python随机生成验证码的方法有很多,今天给大家列举两种 ...
- 加载GIF动画方法 iOS
方法一 使用UIWebView _codeStr为gif网址 如果是本地的gif可以直接使用dataWithContentsOfFile方法 NSData *data = [NSData d ...
- crowd在更改IP后无法登录的问题
org.codehaus.xfire.fault.XFireFault: Client with address "192.168.1.222", and hostname &qu ...
- [HTML5] Emmet
For example we want to generate the code like this: <a href="#tab1">Tab 1</a>& ...
- vs2008试用期到期解决办法
vs2008试用期结束之后, 在“控制面板”中启动“添加删除程序”, 选中Vs2008,点击“更改.删除”, 在出现的维护模式对话框中, 选择下一步,输入下面的CD-Key ...
- gridview添加header
gridview是不能添加header的,这里的解决方法是将listview改造成gridview使用,功能很好用,唯一的缺点是列数不能自适应 示例代码下载地址http://pan.baidu.com ...