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

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

一、下雨特效标识符①

="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/* 定义密集程度,数字越小越密集 */});});

二、下雨特效标识符②

="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标识符,黏贴到中文网站条码以后方可;

方式②、去掉标识符其间的

Ps:若没效用,请确认网页是否已载入JQurey,如果没有请在下雨标识符以后引入JQ方可。

载入jquery

却是老样子,载入的百度提供的库

="text/javascript"src="http://libs.baidu.com/jquery/1.8.3/jquery.js">="text/javascript"src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js">

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

声明: 猿站网有关资源均来自网络搜集与网友提供,任何涉及商业盈利目的的均不得使用,否则产生的一切后果将由您自己承担! 本平台资源仅供个人学习交流、测试使用 所有内容请在下载后24小时内删除,制止非法恶意传播,不对任何下载或转载者造成的危害负任何法律责任!也请大家支持、购置正版! 。本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报,会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。本网站的资源部分来源于网络,如有侵权烦请发送邮件至:2697268773@qq.com进行处理。
建站知识

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

2022-5-24 20:44:25

建站知识

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

2022-5-25 18:24:47

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