chino&cocoa

插件作者在更新中已解决触摸操作失效的问题

圣诞节要来辣!情侣们的节日,单身狗的末日 过节了雪花当然必不可少,我也应景的给blog加上了雪花特效,效果你们已经看到了,但网上的方法存在移动设备触摸操作失效的问题,但最终还是被我粗暴的解决了,现在把简单的教程发出来。
为了方便,我使用了@Min’s提供的插件,跟我一样是typecho的可以到这里下载,其他博客程序的请参考最下方的方法手动配置

插件版安装方法:

首先安装插件,先不要忙着启用,编辑此插件的Plugin.php,搜索以下代码并删除

document.addEventListener("touchstart",onDocumentTouchStart,false);document.addEventListener("touchmove",onDocumentTouchMove,false);

以上两句是添加关于触摸移动的事件句柄,在触摸和移动时调用指定的函数

还有以下两个对应函数

function onDocumentTouchStart(event){if(event.touches.length==1){event.preventDefault();mouseX=event.touches[0].pageX-windowHalfX;mouseY=event.touches[0].pageY-windowHalfY}}function onDocumentTouchMove(event){if(event.touches.length==1){event.preventDefault();mouseX=event.touches[0].pageX-windowHalfX;mouseY=event.touches[0].pageY-windowHalfY}}

删除后,保存并启用插件,应该就能看到雪花纷飞的效果了,实测Chrome43.0.2357.132,win10,i54590K cpu占用率10%-30%左右,相对于上次用的那个90%已经算是很不错了。

手动安装方法:

  1. 首先下载snow.zip

解压至任意目录都行,编辑主题的footer.php,在body之间引入three.js,并初始化:

<script type="text/javascript">
function randomRange(t, i) {
    return Math.random() * (i - t) + t
}
Particle3D = function(t) {
    THREE.Particle.call(this, t),
    this.velocity = new THREE.Vector3(0, -2, 0),
    this.velocity.rotateX(randomRange( - 45, 45)),
    this.velocity.rotateY(randomRange(0, 360)),
    this.gravity = new THREE.Vector3(0, 0, 0),
    this.drag = 1
},
Particle3D.prototype = new THREE.Particle,
Particle3D.prototype.constructor = Particle3D,
Particle3D.prototype.updatePhysics = function() {
    this.velocity.multiplyScalar(this.drag),
    this.velocity.addSelf(this.gravity),
    this.position.addSelf(this.velocity)
};
var TO_RADIANS = Math.PI / 180;
THREE.Vector3.prototype.rotateY = function(t) {
    cosRY = Math.cos(t * TO_RADIANS),
    sinRY = Math.sin(t * TO_RADIANS);
    var i = this.z,
    o = this.x;
    this.x = o * cosRY + i * sinRY,
    this.z = o * -sinRY + i * cosRY
},
THREE.Vector3.prototype.rotateX = function(t) {
    cosRY = Math.cos(t * TO_RADIANS),
    sinRY = Math.sin(t * TO_RADIANS);
    var i = this.z,
    o = this.y;
    this.y = o * cosRY + i * sinRY,
    this.z = o * -sinRY + i * cosRY
},
THREE.Vector3.prototype.rotateZ = function(t) {
    cosRY = Math.cos(t * TO_RADIANS),
    sinRY = Math.sin(t * TO_RADIANS);
    var i = this.x,
    o = this.y;
    this.y = o * cosRY + i * sinRY,
    this.x = o * -sinRY + i * cosRY
};
$(function() {
    var container = document.querySelector(".snow-container");
    if (/MSIE 6|MSIE 7|MSIE 8/.test(navigator.userAgent)) {
        return
    } else {
        if (/MSIE 9|MSIE 10/.test(navigator.userAgent)) {
            $(container).css("height", $(window).height())
        }
    }
    var containerWidth = $(container).width();
    var containerHeight = $(container).height();
    var particle;
    var camera;
    var scene;
    var renderer;
    var mouseX = 0;
    var mouseY = 0;
    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;
    var particles = [];
    var particleImage = new Image();
    particleImage.src = "https://imjad.cn/usr/themes/dobyi/images/snow.png";  //这里改为你自己的snow.png图片位置
var snowNum=500;
function init(){
  camera=new THREE.PerspectiveCamera(75,containerWidth/containerHeight,1,10000);
  camera.position.z=1000;
  scene=new THREE.Scene();
  scene.add(camera);
  renderer=new THREE.CanvasRenderer();
  renderer.setSize(containerWidth,containerHeight);
  var material=new THREE.ParticleBasicMaterial({map:new THREE.Texture(particleImage)});
  for(var i=0;i<snowNum;i++){
    particle=new Particle3D(material);
    particle.position.x=Math.random()*2000-1000;
    particle.position.y=Math.random()*2000-1000;
    particle.position.z=Math.random()*2000-1000;
    particle.scale.x=particle.scale.y=1;
    scene.add(particle);
    particles.push(particle);
  }
  container.appendChild(renderer.domElement);
  document.addEventListener("mousemove",onDocumentMouseMove,false);
  setInterval(loop,1000/40);
}
function onDocumentMouseMove(event){
  mouseX=event.clientX-windowHalfX;
  mouseY=event.clientY-windowHalfY;
}
function loop(){
  for(var i=0;i<particles.length;i++){
    var particle=particles[i];particle.updatePhysics();
    with(particle.position){
      if(y<-1000){y+=2000}
      if(x>1000){x-=2000}
      else{
        if(x<-1000){x+=2000}
      }
      if(z>1000){z-=2000}
      else{if(z<-1000){
      z+=2000;
    }
  }
}}
camera.position.x+=(
  mouseX-camera.position.x)*0.005;
  camera.position.y+=(-mouseY-camera.position.y)*0.005;
  camera.lookAt(scene.position);
  renderer.render(scene,camera)
}
init()
});  
</script>
  1. 在body中加入一个div
<div class="snow-container"></div>
  1. 添加css样式

编辑主题的style.css文件,添加如下代码:

.snow-container{
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  pointer-events: none; 
  z-index: 100001;
}  

保存,即可看到效果。

雪花特效来源于jQuery之家
插件来源于@Min’s