猿站网:分享两种wordpress网站下雪效果

辨认出平常没事儿去转转自己的网志却是挺有斩获的,那时教给了三种wordpress中文网站下雨的效用,就兴高采烈的他们采用了两个,吗写的极好,虽然我的主轴色调其原因,效用中止了,有讨厌的能他们试著呵呵,当然的蔬果。看标识符以后,先撷取呵呵即刻自动更新的方式:很单纯,在webkit应用程序(比如说Google)挪动F12,接着在console里头黏贴呵呵JS标识符(不含其间的script条码),接着quarterfinal继续执行方可看见效用了。

一、下雨特效标识符①

type="text/javascript">(function($){$.fn.snow=function(options){var$flake=$(
).css({position:absolute,z-index:9999,top:-50px}).html(),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:1000,flakeColor:"#AFDAEF"/* 此处能定义雪花色调,若要白色能改为#FFFFFF */},options=$.extend({},defaults,options);varinterval=setInterval(function(){varstartPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-200,endPositionLeft=startPositionLeft-500+Math.random()*500,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo(body).css({left:startPositionLeft,opacity:startOpacity,font-size:sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,linear,function(){$(this).remove()});},options.newOn);};})(jQuery);$(function(){$.fn.snow({minSize:5,/* 定义雪花最小尺寸 */maxSize:50,/* 定义雪花最大尺寸 */newOn:300/* 定义密集程度,数字越小越密集 */});});

二、下雨特效标识符②

type="text/javascript">/* 控制下雨 */functionsnowFall(snow){/* 可配置属性 */snow=snow||{};this.maxFlake=snow.maxFlake||200;/* 最多片数 */this.flakeSize=snow.flakeSize||10;/* 雪花形状 */this.fallSpeed=snow.fallSpeed||1;/* 坠落速度 */}/* 兼容写法 */requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(callback){setTimeout(callback,1000/60);};cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.msCancelAnimationFrame||window.oCancelAnimationFrame;/* 开始下雨 */snowFall.prototype.start=function(){/* 创建画布 */snowCanvas.apply(this);/* 创建雪花形状 */createFlakes.apply(this);/* 画雪 */drawSnow.apply(this)}/* 创建画布 */functionsnowCanvas(){/* 添加Dom结点 */varsnowcanvas=document.createElement("canvas");snowcanvas.id="snowfall";snowcanvas.width=window.innerWidth;snowcanvas.height=document.body.clientHeight;snowcanvas.setAttribute("style","position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");document.getElementsByTagName("body")[0].appendChild(snowcanvas);this.canvas=snowcanvas;this.ctx=snowcanvas.getContext("2d");/* 窗口大小改变的处理 */window.onresize=function(){snowcanvas.width=window.innerWidth;/* snowcanvas.height = window.innerHeight */}}/* 雪运动对象 */functionflakeMove(canvasWidth,canvasHeight,flakeSize,fallSpeed){this.x=Math.floor(Math.random()*canvasWidth);/* x坐标 */this.y=Math.floor(Math.random()*canvasHeight);/* y坐标 */this.size=Math.random()*flakeSize+2;/* 形状 */this.maxSize=flakeSize;/* 最大形状 */this.speed=Math.random()*1+fallSpeed;/* 坠落速度 */this.fallSpeed=fallSpeed;/* 坠落速度 */this.velY=this.speed;/* Y方向速度 */this.velX=0;/* X方向速度 */this.stepSize=Math.random()/30;/* 步长 */this.step=0/* 步数 */}flakeMove.prototype.update=function(){varx=this.x,y=this.y;/* 左右摆动(余弦) */this.velX*=0.98;if(this.velY<=this.speed){this.velY=this.speed}this.velX+=Math.cos(this.step+=.05)*this.stepSize;this.y+=this.velY;this.x+=this.velX;/* 飞出边界的处理 */if(this.x>=canvas.width||this.x<=0||this.y>=canvas.height||this.y<=0){this.reset(canvas.width,canvas.height)}};/* 飞出边界-放置最顶端继续坠落 */flakeMove.prototype.reset=function(width,height){this.x=Math.floor(Math.random()*width);this.y=0;this.size=Math.random()*this.maxSize+2;this.speed=Math.random()*1+this.fallSpeed;this.velY=this.speed;this.velX=0;};// 渲染雪花-随机形状(此处可修改雪花色调!!!)flakeMove.prototype.render=function(ctx){varsnowFlake=ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.size);snowFlake.addColorStop(0,"rgba(255, 255, 255, 0.9)");/* 此处是雪花色调,默认是白色 */snowFlake.addColorStop(.5,"rgba(255, 255, 255, 0.5)");/* 若要改为其他色调,请自行查 */snowFlake.addColorStop(1,"rgba(255, 255, 255, 0)");/* 找16进制的RGB 色调标识符。 */ctx.save();ctx.fillStyle=snowFlake;ctx.beginPath();ctx.arc(this.x,this.y,this.size,0,Math.PI*2);ctx.fill();ctx.restore();};/* 创建雪花-定义形状 */functioncreateFlakes(){varmaxFlake=this.maxFlake,flakes=this.flakes=[],canvas=this.canvas;for(vari=0;i<maxFlake;i++){flakes.push(newflakeMove(canvas.width,canvas.height,this.flakeSize,this.fallSpeed))}}/* 画雪 */functiondrawSnow(){varmaxFlake=this.maxFlake,flakes=this.flakes;ctx=this.ctx,canvas=this.canvas,that=this;/* 清空雪花 */ctx.clearRect(0,0,canvas.width,canvas.height);for(vare=0;e<maxFlake;e++){flakes[e].update();flakes[e].render(ctx);}/*  一帧一帧的画 */this.loop=requestAnimationFrame(function(){drawSnow.apply(that);});}/* 调用及控制方式 */varsnow=newsnowFall({maxFlake:60});snow.start();

采用方式:

方式①、复制其中一种JS标识符,黏贴到中文网站条码以后方可;

方式②、去掉标识符其间的type="text/javascript"src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js">

原文来源:幻杀网志 »撷取三种圣诞节雪花特效JS标识符(中文网站下雨效用)

建站知识

猿站网:JS返回上一个页面

2022-5-24 20:44:25

建站知识

猿站网:为wordpress增加复制内容出现弹框功能

2022-5-25 18:24:47

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索