新版qq canvas 动态背景

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=1024" />
 6     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9" />
 7     <title>PCQQ 官方网站</title>
 8     <meta itemprop="image" content="http://im-img.qq.com/pcqq/img/6_0/pcqq.png" />
 9     <link type="text/css" rel="stylesheet" href="http://im-img.qq.com/pcqq/css/210/pc_6_0.css" />
10
11
12 </head>
13 <body>
14
15     <div id="container" class="mpage">
16         <div id="anitOut" class="anitOut"></div>
17     </div>
18     <!--E index page-->
19
20     <script type="text/javascript" src="http://im-img.qq.com/pcqq/js/150/jquery.min.js"></script>
21     <script type="text/javascript">$(function(){$.fn.bannerShow=function(g){g=jQuery.extend({wraper:"fshow",autotime:6000,isAuto:true,ind:0,changeColor:null},g||{});return this.each(function(){var o;var n=0;var i=this;var j=$("#bnav"),k=$("li",j);var h=[["#002c4a","#005584"],["#35ac03","#3f4303"],["#ac0908","#cd5726"],["18bbff","#00486b"]];$(this).hover(function(){g.isAuto=false},function(){g.isAuto=true});m(0);k.each(function(p,q){$(q).mouseover(function(){n=p;k.removeClass().eq(n).addClass("current");m(n)})});o=setInterval(function(){if(!g.isAuto){return false}k.each(function(p,q){if($(q).hasClass("current")){n=p}m(n)});if(n==k.size()-1){n=0;m(n);k.removeClass().eq(n).addClass("current")}else{n+=1;m(n);k.removeClass().eq(n).addClass("current")}},g.autotime);function m(p){$(".banners",i).hide();$(".banners",i).eq(p).show();if(g.changeColor){g.changeColor(h[p]).set()}}})};if(!!document.createElement("canvas").getContext){$.getScript("http://im-img.qq.com/pcqq/js/200/cav.js",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();$("#fshow").bannerShow({changeColor:J})})}else{$("#fshow").bannerShow()}$("#copytime").html((new Date()).getFullYear());$("#ovpage").click(function(g){g.preventDefault();$("html, body").animate({scrollTop:$("#container").height()},1000)});var c=function(){};if(typeof(pgvMain)!="function"){var f="http://pingjs.qq.com/tcss.ping.js?v=1";$.getScript(f,function(){if(typeof(pgvMain)=="function"){pgvMain()}c=pgvSendClick;$(".forTcss").click(function(){var g=$(this).attr("name");var h=window.setTimeout(function(){c({hottag:g})},500)})})}window.online_resp=function(g){if(g&&g.c){$("#cur_online").text(g.c.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g,"$1,"));$("#max_online").text(g.h.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g,"$1,"))}};
22
23 });</script>
24 <!--[if lte IE 9]>
25     <script type="text/javascript" src="http://im-img.qq.com/home/js/20/css3-mediaqueries.js"></script>
26 <![endif]-->
27 </body>
28 </html>
时间: 2024-11-05 18:41:01

新版qq canvas 动态背景的相关文章

用Canvas为网页添加动态背景

最近刚刚接到为微信公众帐号"玩转三里屯"制作首页的任务.考虑到页面只在手机中浏览,而且手机对canvas的支持又非常好,所以打算使用canvas做点不一样的动画. 首先来看下效果图. 要实现这样的动画普通的CSS3是鞭长莫及了,只能使用Canvas.好在使用canvas也非常简单. Step1. 新建一个画布(<canvas>)元素,并放在在所有按钮和logo的下方以免遮挡前面的元素. <canvas id="canvas" style="

[Android]仿新版QQ的tab下面拖拽标记为已读的效果

以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4182929.html 可拖拽的红点,(仿新版QQ,tab下面拖拽标记为已读的效果),拖拽一定的距离可以消失回调.       GitHub:DraggableFlagView(https://github.com/wangjiegulu/DraggableFlagView) 实现原理: 当根据touch事件的移动,不断调用onDraw()方法进行刷新绘制. *

android 动态背景的实现以及SurfaceView中添加EditText控件

      首先还是一贯作风,我们先看案例: 静态图看不出来效果,如果用过此软件(扎客)的同学们都知道,她的背景会动.怎么样,是不是觉得很时尚,起码比静态的要好(个人观点).其实实现起来并 不复杂,这个如果让做游戏程序员做简直太小儿科了,这里我说明一点,其实我们做应用的也应该多少了解下游戏编程思维,起码对我们做应用有很好的帮助. 下面我简单介绍下实现方式. 实现原理:自定义一个SurfaceView控件.对之不停的onDraw,使得其背景动起来. 对于SurfaceView如果不了解的同学们麻烦

用duilib制作仿QQ2013动态背景登录器

转载请说明原出处,谢谢~~ 在上一篇博客里,我修复了CActiveXUI控件的bug,从而可以使用flash动画来制作程序的背景,这篇博客说明一下应该怎么使用CActiveXUI控件创建透明无窗体的背景. 去年的QQ2013的登陆界面就是动态界面,上篇博客我说道了,Duiengine已经有高人做好了仿QQ界面的代码,我这里只是把QQ2013的动态登陆界面制作出来.而QQ2014又换了全新的界面,不过熟悉UI制作的朋友知道,模仿 QQ2014的登陆界面比QQ2013的还要简单.可以看到QQ2013

Android:仿手机QQ好友动态的ListView

1.介绍: 本博客使用XListView模仿Android版QQ好友动态的ListView效果.效果截图例如以下: 效果图1 效果图2 这里面主要涉及的是ListView的布局问题,让我们看一下Item的布局文件吧. <?xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&

css3 动态背景

动态背景 利用多层背景的交替淡入淡出,实现一种背景在不停变换的效果,先看图. 效果图: DEMO地址 步骤 1.利用css的radial-gradient创建一个镜像渐变的背景.其中的80% 20%为渐变中心的x,y位置. 具体的radial-gradient用法可以参见这里 .dynbg__bg{ position: absolute; top: 0px; left: 0px; width:100%; height:100%; background:-moz-radial-gradient(8

新版QQ空间访客提取器

新版QQ空间访客提取器:采用QQ空间APP协议进行开发,目前可以提取任意目标空间的访客(需要空间可以进入的情况下),可以提取隐藏访客,可以提取认证空间访客,无需加好友即可提取他人空间访客,支持多目标监控他人空间的最新:访客号码,访客昵称,来访时间!支持昵称关键字过滤!小号支持二次免码登录!

基于CSS3动态背景登录框代码

基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效. 实现的代码. html代码: <div class="htmleaf-container"> <div class="wrapper"> <div class="container"> <h1>Welcome</h1> <form class="form"

为网页添加动态背景 (背景轮播)

为网页添加动态背景 (背景轮播) 设置网页背景 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全屏背景</title> <script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type