评论 - lizhenqiu blog

#⁷⁰⁴

作者：广西南宁市

Canvas飞机树林上空飞行特效

<style>
* {
	margin: 0;
	padding: 0;
}

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}
</style>



<script src="https://out.img.pan.lizhenqiu.com/ae680261c17f84d0fdae004b6189a4d7"></script>

<div id="world"></div>

<script>
var Colors = {
	red:0xf25346,
	yellow:0xedeb27,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
	green:0x458248,
	purple:0x551A8B,
	lightgreen:0x629265,
};



var scene, camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderer, container;


function createScene() {
	// Get the width and height of the screen
	// and use them to setup the aspect ratio
	// of the camera and the size of the renderer.
	HEIGHT = window.innerHeight;
	WIDTH = window.innerWidth;

	// Create the scene.
	scene = new THREE.Scene();

	// Add FOV Fog effect to the scene. Same colour as the BG int he stylesheet.
	scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);

	// Create the camera
	aspectRatio = WIDTH / HEIGHT;
	fieldOfView = 60;
	nearPlane = 1;
	farPlane = 10000;
	camera = new THREE.PerspectiveCamera(
		fieldOfView,
		aspectRatio,
		nearPlane,
		farPlane
	);
	// Position the camera
	camera.position.x = 0;
	camera.position.y = 150;
	camera.position.z = 100;	

	// Create the renderer

	renderer = new THREE.WebGLRenderer ({
	// Alpha makes the background transparent, antialias is performant heavy
		alpha: true,
		antialias:true
	});

	//set the size of the renderer to fullscreen
	renderer.setSize (WIDTH, HEIGHT);
	//enable shadow rendering
	renderer.shadowMap.enabled = true;

	// Add the Renderer to the DOM, in the world div.
	container = document.getElementById('world');
	container.appendChild (renderer.domElement);

	//RESPONSIVE LISTENER
	window.addEventListener('resize', handleWindowResize, false);
}

//RESPONSIVE FUNCTION
function handleWindowResize() {
	HEIGHT = window.innerHeight;
	WIDTH = window.innerWidth;
	renderer.setSize(WIDTH, HEIGHT);
	camera.aspect = WIDTH / HEIGHT;
	camera.updateProjectionMatrix();
}


var hemispshereLight, shadowLight;

function createLights(){
	// Gradient coloured light - Sky, Ground, Intensity
	hemisphereLight = new THREE.HemisphereLight(0xaaaaaa,0x000000, .9)
	// Parallel rays
	shadowLight = new THREE.DirectionalLight(0xffffff, .9);



	shadowLight.position.set(0,350,350);
	shadowLight.castShadow = true;

	// define the visible area of the projected shadow
	shadowLight.shadow.camera.left = -650;
	shadowLight.shadow.camera.right = 650;
	shadowLight.shadow.camera.top = 650;
	shadowLight.shadow.camera.bottom = -650;
	shadowLight.shadow.camera.near = 1;
	shadowLight.shadow.camera.far = 1000;

	// Shadow map size
	shadowLight.shadow.mapSize.width = 2048;
	shadowLight.shadow.mapSize.height = 2048;

	// Add the lights to the scene
	scene.add(hemisphereLight);  

	scene.add(shadowLight);
}	


Land = function(){
	var geom = new THREE.CylinderGeometry(600,600,1700,40,10);
	//rotate on the x axis
	geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));
	//create a material
	var mat = new THREE.MeshPhongMaterial({
		color: Colors.lightgreen,
		shading:THREE.FlatShading,
	});

	//create a mesh of the object
	this.mesh = new THREE.Mesh(geom, mat);
	//receive shadows
	this.mesh.receiveShadow = true;
}

Orbit = function(){

	var geom =new THREE.Object3D();

	this.mesh = geom;
	//this.mesh.add(sun);
}

Sun = function(){

	this.mesh = new THREE.Object3D();

	var sunGeom = new THREE.SphereGeometry( 400, 20, 10 );
	var sunMat = new THREE.MeshPhongMaterial({
		color: Colors.yellow,
		shading:THREE.FlatShading,
	});
	var sun = new THREE.Mesh(sunGeom, sunMat);
	//sun.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));
	sun.castShadow = false;
	sun.receiveShadow = false;
	this.mesh.add(sun);
}

Cloud = function(){
	// Create an empty container for the cloud
	this.mesh = new THREE.Object3D();
	// Cube geometry and material
	var geom = new THREE.DodecahedronGeometry(20,0);
	var mat = new THREE.MeshPhongMaterial({
		color:Colors.white,  
	});

	var nBlocs = 3+Math.floor(Math.random()*3);

	for (var i=0; i<nBlocs; i++ ){
		//Clone mesh geometry
		var m = new THREE.Mesh(geom, mat);
			//Randomly position each cube
			m.position.x = i*15;
			m.position.y = Math.random()*10;
			m.position.z = Math.random()*10;
			m.rotation.z = Math.random()*Math.PI*2;
			m.rotation.y = Math.random()*Math.PI*2;

			//Randomly scale the cubes
			var s = .1 + Math.random()*.9;
			m.scale.set(s,s,s);
			this.mesh.add(m);
	}
}

Sky = function(){

	this.mesh = new THREE.Object3D();

	// Number of cloud groups
	this.nClouds = 25;

	// Space the consistenly
	var stepAngle = Math.PI*2 / this.nClouds;

	// Create the Clouds

	for(var i=0; i<this.nClouds; i++){
	
		var c = new Cloud();

		//set rotation and position using trigonometry
		var a = stepAngle*i;
		// this is the distance between the center of the axis and the cloud itself
		var h = 800 + Math.random()*200;
		c.mesh.position.y = Math.sin(a)*h;
		c.mesh.position.x = Math.cos(a)*h;		

		// rotate the cloud according to its position
		c.mesh.rotation.z = a + Math.PI/2;

		// random depth for the clouds on the z-axis
		c.mesh.position.z = -400-Math.random()*400;

		// random scale for each cloud
		var s = 1+Math.random()*2;
		c.mesh.scale.set(s,s,s);

		this.mesh.add(c.mesh);
	}
}

Tree = function () {

	this.mesh = new THREE.Object3D();

	var matTreeLeaves = new THREE.MeshPhongMaterial( { color:Colors.green, shading:THREE.FlatShading});

	var geonTreeBase = new THREE.BoxGeometry( 10,20,10 );
	var matTreeBase = new THREE.MeshBasicMaterial( { color:Colors.brown});
	var treeBase = new THREE.Mesh(geonTreeBase,matTreeBase);
	treeBase.castShadow = true;
	treeBase.receiveShadow = true;
	this.mesh.add(treeBase);

	var geomTreeLeaves1 = new THREE.CylinderGeometry(1, 12*3, 12*3, 4 );
	var treeLeaves1 = new THREE.Mesh(geomTreeLeaves1,matTreeLeaves);
	treeLeaves1.castShadow = true;
	treeLeaves1.receiveShadow = true;
	treeLeaves1.position.y = 20
	this.mesh.add(treeLeaves1);

	var geomTreeLeaves2 = new THREE.CylinderGeometry( 1, 9*3, 9*3, 4 );
	var treeLeaves2 = new THREE.Mesh(geomTreeLeaves2,matTreeLeaves);
	treeLeaves2.castShadow = true;
	treeLeaves2.position.y = 40;
	treeLeaves2.receiveShadow = true;
	this.mesh.add(treeLeaves2);

	var geomTreeLeaves3 = new THREE.CylinderGeometry( 1, 6*3, 6*3, 4);
	var treeLeaves3 = new THREE.Mesh(geomTreeLeaves3,matTreeLeaves);
	treeLeaves3.castShadow = true;
	treeLeaves3.position.y = 55;
	treeLeaves3.receiveShadow = true;
	this.mesh.add(treeLeaves3);

}

Flower = function () {

	this.mesh = new THREE.Object3D();

	var geomStem = new THREE.BoxGeometry( 5,50,5,1,1,1 );
	var matStem = new THREE.MeshPhongMaterial( { color:Colors.green, shading:THREE.FlatShading});
	var stem = new THREE.Mesh(geomStem,matStem);
	stem.castShadow = false;
	stem.receiveShadow = true;
	this.mesh.add(stem);


	var geomPetalCore = new THREE.BoxGeometry(10,10,10,1,1,1);
	var matPetalCore = new THREE.MeshPhongMaterial({color:Colors.yellow, shading:THREE.FlatShading});
	petalCore = new THREE.Mesh(geomPetalCore, matPetalCore);
	petalCore.castShadow = false;
	petalCore.receiveShadow = true;

	var petalColor = petalColors [Math.floor(Math.random()*3)];

	var geomPetal = new THREE.BoxGeometry( 15,20,5,1,1,1 );
	var matPetal = new THREE.MeshBasicMaterial( { color:petalColor});
	geomPetal.vertices[5].y-=4;
	geomPetal.vertices[4].y-=4;
	geomPetal.vertices[7].y+=4;
	geomPetal.vertices[6].y+=4;
	geomPetal.translate(12.5,0,3);

		var petals = [];
		for(var i=0; i<4; i++){	

			petals[i]=new THREE.Mesh(geomPetal,matPetal);
			petals[i].rotation.z = i*Math.PI/2;
			petals[i].castShadow = true;
			petals[i].receiveShadow = true;
		}

	petalCore.add(petals[0],petals[1],petals[2],petals[3]);
	petalCore.position.y = 25;
	petalCore.position.z = 3;
	this.mesh.add(petalCore);

}

var petalColors = [Colors.red, Colors.yellow, Colors.blue];



Forest = function(){

	this.mesh = new THREE.Object3D();

	// Number of Trees
	this.nTrees = 300;

	// Space the consistenly
	var stepAngle = Math.PI*2 / this.nTrees;

	// Create the Trees

	for(var i=0; i<this.nTrees; i++){
	
		var t = new Tree();

		//set rotation and position using trigonometry
		var a = stepAngle*i;
		// this is the distance between the center of the axis and the tree itself
		var h = 605;
		t.mesh.position.y = Math.sin(a)*h;
		t.mesh.position.x = Math.cos(a)*h;		

		// rotate the tree according to its position
		t.mesh.rotation.z = a + (Math.PI/2)*3;

		//Andreas Trigo funtime
		//t.mesh.rotation.z = Math.atan2(t.mesh.position.y, t.mesh.position.x)-Math.PI/2;

		// random depth for the tree on the z-axis
		t.mesh.position.z = 0-Math.random()*600;

		// random scale for each tree
		var s = .3+Math.random()*.75;
		t.mesh.scale.set(s,s,s);

		this.mesh.add(t.mesh);
	}

	// Number of Trees
	this.nFlowers = 350;

	var stepAngle = Math.PI*2 / this.nFlowers;


	for(var i=0; i<this.nFlowers; i++){	

		var f = new Flower();
		var a = stepAngle*i;

		var h = 605;
		f.mesh.position.y = Math.sin(a)*h;
		f.mesh.position.x = Math.cos(a)*h;		

		f.mesh.rotation.z = a + (Math.PI/2)*3;

		f.mesh.position.z = 0-Math.random()*600;

		var s = .1+Math.random()*.3;
		f.mesh.scale.set(s,s,s);

		this.mesh.add(f.mesh);
	}

}

var AirPlane = function() {
	
	this.mesh = new THREE.Object3D();

	// Create the cabin
	var geomCockpit = new THREE.BoxGeometry(80,50,50,1,1,1);
	var matCockpit = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});
	geomCockpit.vertices[4].y-=10;
	geomCockpit.vertices[4].z+=20;
	geomCockpit.vertices[5].y-=10;
	geomCockpit.vertices[5].z-=20;
	geomCockpit.vertices[6].y+=30;
	geomCockpit.vertices[6].z+=20;
	geomCockpit.vertices[7].y+=30;
	geomCockpit.vertices[7].z-=20;
	var cockpit = new THREE.Mesh(geomCockpit, matCockpit);
	cockpit.castShadow = true;
	cockpit.receiveShadow = true;
	this.mesh.add(cockpit);
	
	// Create the engine
	var geomEngine = new THREE.BoxGeometry(20,50,50,1,1,1);
	var matEngine = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
	var engine = new THREE.Mesh(geomEngine, matEngine);
	engine.position.x = 40;
	engine.castShadow = true;
	engine.receiveShadow = true;
	this.mesh.add(engine);
	
	// Create the tail
	var geomTailPlane = new THREE.BoxGeometry(15,20,5,1,1,1);
	var matTailPlane = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});
	var tailPlane = new THREE.Mesh(geomTailPlane, matTailPlane);
	tailPlane.position.set(-35,25,0);
	tailPlane.castShadow = true;
	tailPlane.receiveShadow = true;
	this.mesh.add(tailPlane);
	
	// Create the wing
	var geomSideWing = new THREE.BoxGeometry(40,4,150,1,1,1);
	var matSideWing = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});

	var sideWingTop = new THREE.Mesh(geomSideWing, matSideWing);
	var sideWingBottom = new THREE.Mesh(geomSideWing, matSideWing);
	sideWingTop.castShadow = true;
	sideWingTop.receiveShadow = true;
	sideWingBottom.castShadow = true;
	sideWingBottom.receiveShadow = true;

	sideWingTop.position.set(20,12,0);
	sideWingBottom.position.set(20,-3,0);
	this.mesh.add(sideWingTop);
	this.mesh.add(sideWingBottom);

	var geomWindshield = new THREE.BoxGeometry(3,15,20,1,1,1);
	var matWindshield = new THREE.MeshPhongMaterial({color:Colors.white,transparent:true, opacity:.3, shading:THREE.FlatShading});;
	var windshield = new THREE.Mesh(geomWindshield, matWindshield);
	windshield.position.set(5,27,0);

	windshield.castShadow = true;
	windshield.receiveShadow = true;

	this.mesh.add(windshield);

	var geomPropeller = new THREE.BoxGeometry(20,10,10,1,1,1);
	geomPropeller.vertices[4].y-=5;
	geomPropeller.vertices[4].z+=5;
	geomPropeller.vertices[5].y-=5;
	geomPropeller.vertices[5].z-=5;
	geomPropeller.vertices[6].y+=5;
	geomPropeller.vertices[6].z+=5;
	geomPropeller.vertices[7].y+=5;
	geomPropeller.vertices[7].z-=5;
	var matPropeller = new THREE.MeshPhongMaterial({color:Colors.brown, shading:THREE.FlatShading});
	this.propeller = new THREE.Mesh(geomPropeller, matPropeller);
	this.propeller.castShadow = true;
	this.propeller.receiveShadow = true;


	var geomBlade1 = new THREE.BoxGeometry(1,100,10,1,1,1);
	var geomBlade2 = new THREE.BoxGeometry(1,10,100,1,1,1);
	var matBlade = new THREE.MeshPhongMaterial({color:Colors.brownDark, shading:THREE.FlatShading});
	
	var blade1 = new THREE.Mesh(geomBlade1, matBlade);
	blade1.position.set(8,0,0);
	blade1.castShadow = true;
	blade1.receiveShadow = true;

	var blade2 = new THREE.Mesh(geomBlade2, matBlade);
	blade2.position.set(8,0,0);
	blade2.castShadow = true;
	blade2.receiveShadow = true;
	this.propeller.add(blade1, blade2);
	this.propeller.position.set(50,0,0);
	this.mesh.add(this.propeller);

	var wheelProtecGeom = new THREE.BoxGeometry(30,15,10,1,1,1);
	var wheelProtecMat = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
	var wheelProtecR = new THREE.Mesh(wheelProtecGeom,wheelProtecMat);
	wheelProtecR.position.set(25,-20,25);
	this.mesh.add(wheelProtecR);

	var wheelTireGeom = new THREE.BoxGeometry(24,24,4);
	var wheelTireMat = new THREE.MeshPhongMaterial({color:Colors.brownDark, shading:THREE.FlatShading});
	var wheelTireR = new THREE.Mesh(wheelTireGeom,wheelTireMat);
	wheelTireR.position.set(25,-28,25);

	var wheelAxisGeom = new THREE.BoxGeometry(10,10,6);
	var wheelAxisMat = new THREE.MeshPhongMaterial({color:Colors.brown, shading:THREE.FlatShading});
	var wheelAxis = new THREE.Mesh(wheelAxisGeom,wheelAxisMat);
	wheelTireR.add(wheelAxis);

	this.mesh.add(wheelTireR);

	var wheelProtecL = wheelProtecR.clone();
	wheelProtecL.position.z = -wheelProtecR.position.z ;
	this.mesh.add(wheelProtecL);

	var wheelTireL = wheelTireR.clone();
	wheelTireL.position.z = -wheelTireR.position.z;
	this.mesh.add(wheelTireL);

	var wheelTireB = wheelTireR.clone();
	wheelTireB.scale.set(.5,.5,.5);
	wheelTireB.position.set(-35,-5,0);
	this.mesh.add(wheelTireB);

	var suspensionGeom = new THREE.BoxGeometry(4,20,4);
	suspensionGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0,10,0))
	var suspensionMat = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});
	var suspension = new THREE.Mesh(suspensionGeom,suspensionMat);
	suspension.position.set(-35,-5,0);
	suspension.rotation.z = -.3;
	this.mesh.add(suspension);
};

var Fox = function() {
	
	this.mesh = new THREE.Object3D();
	
	var redFurMat = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});

	// Create the Body
	var geomBody = new THREE.BoxGeometry(100,50,50,1,1,1);
	var body = new THREE.Mesh(geomBody, redFurMat);
	body.castShadow = true;
	body.receiveShadow = true;
	this.mesh.add(body);
	
	// Create the Chest
	var geomChest = new THREE.BoxGeometry(50,60,70,1,1,1);
	var chest = new THREE.Mesh(geomChest, redFurMat);
	chest.position.x = 60;
	chest.castShadow = true;
	chest.receiveShadow = true;
	this.mesh.add(chest);

	// Create the Head
	var geomHead = new THREE.BoxGeometry(40,55,50,1,1,1);
	this.head = new THREE.Mesh(geomHead, redFurMat);
	this.head.position.set(80, 35, 0);
	this.head.castShadow = true;
	this.head.receiveShadow = true;

	// Create the Snout
	var geomSnout = new THREE.BoxGeometry(40,30,30,1,1,1);
	var snout = new THREE.Mesh(geomSnout, redFurMat);
	geomSnout.vertices[0].y-=5;
	geomSnout.vertices[0].z+=5;
	geomSnout.vertices[1].y-=5;
	geomSnout.vertices[1].z-=5;
	geomSnout.vertices[2].y+=5;
	geomSnout.vertices[2].z+=5;
	geomSnout.vertices[3].y+=5;
	geomSnout.vertices[3].z-=5;
	snout.castShadow = true;
	snout.receiveShadow = true;
	snout.position.set(30,0,0);
	this.head.add(snout);

	// Create the Nose
	var geomNose = new THREE.BoxGeometry(10,15,20,1,1,1);
	var matNose = new THREE.MeshPhongMaterial({color:Colors.brown, shading:THREE.FlatShading});
	var nose = new THREE.Mesh(geomNose, matNose);
	nose.position.set(55,0,0);
	this.head.add(nose);

	// Create the Ears
	var geomEar = new THREE.BoxGeometry(10,40,30,1,1,1);
	var earL = new THREE.Mesh(geomEar, redFurMat);
	earL.position.set(-10,40,-18);
	this.head.add(earL);
	earL.rotation.x=-Math.PI/10;
	geomEar.vertices[1].z+=5;
	geomEar.vertices[4].z+=5;
	geomEar.vertices[0].z-=5;
	geomEar.vertices[5].z-=5;

	// Create the Ear Tips
	var geomEarTipL = new THREE.BoxGeometry(10,10,20,1,1,1);
	var matEarTip = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
	var earTipL = new THREE.Mesh(geomEarTipL, matEarTip);
	earTipL.position.set(0,25,0);
	earL.add(earTipL);

	var earR = earL.clone();
	earR.position.z = -earL.position.z;
	earR.rotation.x = -	earL.rotation.x;
	this.head.add(earR);

	this.mesh.add(this.head);

	
	// Create the tail
	var geomTail = new THREE.BoxGeometry(80,40,40,2,1,1);
	geomTail.vertices[4].y-=10;
	geomTail.vertices[4].z+=10;
	geomTail.vertices[5].y-=10;
	geomTail.vertices[5].z-=10;
	geomTail.vertices[6].y+=10;
	geomTail.vertices[6].z+=10;
	geomTail.vertices[7].y+=10;
	geomTail.vertices[7].z-=10;
	this.tail = new THREE.Mesh(geomTail, redFurMat);
	this.tail.castShadow = true;
	this.tail.receiveShadow = true;

	// Create the tail Tip
	var geomTailTip = new THREE.BoxGeometry(20,40,40,1,1,1);
	var matTailTip = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
	var tailTip = new THREE.Mesh(geomTailTip, matTailTip);
	tailTip.position.set(80,0,0);
	tailTip.castShadow = true;
	tailTip.receiveShadow = true;
	this.tail.add(tailTip);
	this.tail.position.set(-40,10,0);
	geomTail.translate(40,0,0);
	geomTailTip.translate(10,0,0);
	this.tail.rotation.z = Math.PI/1.5;
	this.mesh.add(this.tail);


	// Create the Legs
	var geomLeg = new THREE.BoxGeometry(20,60,20,1,1,1);
	this.legFR = new THREE.Mesh(geomLeg, redFurMat);
	this.legFR.castShadow = true;
	this.legFR.receiveShadow = true;

	// Create the feet
	var geomFeet = new THREE.BoxGeometry(20,20,20,1,1,1);
	var matFeet = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
	var feet = new THREE.Mesh(geomFeet, matFeet);
	feet.position.set(0,0,0);
	feet.castShadow = true;
	feet.receiveShadow = true;
	this.legFR.add(feet);
	this.legFR.position.set(70,-12,25);
	geomLeg.translate(0,40,0);
	geomFeet.translate(0,80,0);
	this.legFR.rotation.z = 16;
	this.mesh.add(this.legFR);

	this.legFL = this.legFR.clone();
	this.legFL.position.z = -this.legFR.position.z;
	this.legFL.rotation.z = -this.legFR.rotation.z;
	this.mesh.add(this.legFL);

	this.legBR = this.legFR.clone();
	this.legBR.position.x = -(this.legFR.position.x)+50;
	this.legBR.rotation.z = -this.legFR.rotation.z;
	this.mesh.add(this.legBR);

	this.legBL = this.legFL.clone();
	this.legBL.position.x = -(this.legFL.position.x)+50;
	this.legBL.rotation.z = -this.legFL.rotation.z;
	this.mesh.add(this.legBL);

};


var sky;
var forest;
var land;
var orbit;
var airplane;
var sun;
var fox;

var mousePos={x:0, y:0};
var offSet = -600;


function createSky(){
  sky = new Sky();
  sky.mesh.position.y = offSet;
  scene.add(sky.mesh);
}

function createLand(){
  land = new Land();
  land.mesh.position.y = offSet;
  scene.add(land.mesh);
}

function createOrbit(){
  orbit = new Orbit();
  orbit.mesh.position.y = offSet;
  orbit.mesh.rotation.z = -Math.PI/6; 
  scene.add(orbit.mesh);
}

function createForest(){
  forest = new Forest();
  forest.mesh.position.y = offSet;
  scene.add(forest.mesh);
}

function createSun(){ 
	sun = new Sun();
	sun.mesh.scale.set(1,1,.3);
	sun.mesh.position.set(0,-30,-850);
	scene.add(sun.mesh);
}


function createPlane(){ 
	airplane = new AirPlane();
	airplane.mesh.scale.set(.35,.35,.35);
	airplane.mesh.position.set(-40,110,-250);
	// airplane.mesh.rotation.z = Math.PI/15;
	scene.add(airplane.mesh);
}

function createFox(){ 
	fox = new Fox();
	fox.mesh.scale.set(.35,.35,.35);
	fox.mesh.position.set(-40,110,-250);
	scene.add(fox.mesh);
}


function updatePlane() {

	var targetY = normalize(mousePos.y,-.75,.75, 50, 190);
	var targetX = normalize(mousePos.x,-.75,.75,-100, -20);
	
	// Move the plane at each frame by adding a fraction of the remaining distance
	airplane.mesh.position.y += (targetY-airplane.mesh.position.y)*0.1;

	airplane.mesh.position.x += (targetX-airplane.mesh.position.x)*0.1;

	// Rotate the plane proportionally to the remaining distance
	airplane.mesh.rotation.z = (targetY-airplane.mesh.position.y)*0.0128;
	airplane.mesh.rotation.x = (airplane.mesh.position.y-targetY)*0.0064;
	airplane.mesh.rotation.y = (airplane.mesh.position.x-targetX)*0.0064;

	airplane.propeller.rotation.x += 0.3;
}

function normalize(v,vmin,vmax,tmin, tmax){

	var nv = Math.max(Math.min(v,vmax), vmin);
	var dv = vmax-vmin;
	var pc = (nv-vmin)/dv;
	var dt = tmax-tmin;
	var tv = tmin + (pc*dt);
	return tv;

}


function loop(){
  land.mesh.rotation.z += .005;
  orbit.mesh.rotation.z += .001;
  sky.mesh.rotation.z += .003;
  forest.mesh.rotation.z += .005;
  updatePlane();

  renderer.render(scene, camera);
  requestAnimationFrame(loop);
}

function handleMouseMove (event) {
	var tx = -1 + (event.clientX / WIDTH)*2;
	var ty = 1 - (event.clientY / HEIGHT)*2;
	mousePos = {x:tx, y:ty};	
}


function init(event) {
	createScene();
	createLights();
	createPlane();
	createOrbit();
	createSun();
	createLand();
	createForest();
	createSky();
	//createFox();

	document.addEventListener('mousemove', handleMouseMove, false);

	loop();
}

window.addEventListener('load', init, false);
</script>

Run code

Cut to clipboard

文章：JS酷炫红色LED数字时钟发表时间：2017-12-27, 11:11:35

展开↯

#⁷⁰⁵

作者：广西南宁市

HTML5 SVG自行车行驶动画特效

<style>html {background-color: #78D89B;}
.container {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.st0{fill:#1E0F02;}
.st1{fill:none;}
.st2{fill:#23110D;}
.st3{fill:#FFFFFF;}
.st4{fill:#E14C00;}
.st5{fill:#807B7C;}
.st6{fill:#4D4A4A;}
.st7{fill:#6A1D02;}
.st8{fill:#6EC48C;}
.st9{fill:#64B380;}
.st10{fill:#807B7C;}
.st11{fill: none; stroke:none; stroke-miterlimit="10"}
.bg{fill:url(#pattern);}
</style>
<div class="container">
  <svg id="bike" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="750px"
  	height="500px" viewBox="0 0 750 500" style="enable-background:new 0 0 750 500;" xml:space="preserve">
<rect id="city" class="bg" width="750" height="500" x="0" y="0"/>
<g id="wheel">
	<path class="st0" id="anima_wheel_1" d="M234,222.25c-46.53,0-84.25,37.72-84.25,84.25s37.72,84.25,84.25,84.25s84.25-37.72,84.25-84.25
		S280.53,222.25,234,222.25z M263.192,323.776l-13.949-11.086l18.36-1.271l41.305,10.665c-1.185,5.727-3.025,11.211-5.413,16.392
		L263.192,323.776z M303.081,339.39c-1.837,3.852-3.998,7.518-6.428,10.982l-30.986-24.628L303.081,339.39z M272.533,372.577
		c-4.94,2.887-10.222,5.253-15.787,6.984l-16.052-39.808l-1.095-17.785l13.229,12.793L272.533,372.577z M255.102,336.96
		l28.607,27.663c-3.219,2.756-6.659,5.258-10.308,7.455L255.102,336.96z M255.779,379.836c-4.024,1.193-8.187,2.059-12.459,2.578
		l-2.432-39.506L255.779,379.836z M210.673,379.365c-5.549-1.775-10.821-4.167-15.739-7.094l18.832-38.545l12.485-12.714
		l-0.655,18.392L210.673,379.365z M225.484,342.562l-1.416,39.775c-4.266-0.553-8.425-1.443-12.441-2.669L225.484,342.562z
		 M194.072,371.758c-3.63-2.226-7.05-4.757-10.248-7.539l27.727-28.237L194.072,371.758z M164.253,337.917
		c-2.345-5.198-4.137-10.698-5.277-16.437l41.253-11.798l17.801,0.77l-14.105,11.82L164.253,337.917z M201.502,324.302
		L170.99,349.87c-2.402-3.482-4.518-7.173-6.325-11.041L201.502,324.302z M157.5,306.5c0-5.785,0.663-11.411,1.88-16.828
		l42.474,5.999l15.95,7.944l-17.694,5.061l-42.601-1.843C157.508,306.721,157.5,306.611,157.5,306.5z M310.5,306.5
		c0,0.318-0.02,0.63-0.024,0.947l-42.783,2.963l-17.252-4.454l16.255-8.629l42.063-7.056C309.889,295.503,310.5,300.929,310.5,306.5
		z M229.058,294.881l-2.494-1.561l-4.258-15.332l9.216,13.683l-0.379,2.541C230.423,294.379,229.724,294.597,229.058,294.881z
		 M227.993,295.394c-0.251,0.136-0.49,0.29-0.73,0.442l-0.302-1.089L227.993,295.394z M223.501,299.491l-0.713-0.864l1.223,0.173
		C223.836,299.026,223.66,299.253,223.501,299.491z M222.951,300.396c-0.351,0.634-0.641,1.304-0.88,1.998l-2.842,0.813
		l-14.243-7.094l16.334,2.307L222.951,300.396z M221.741,303.529c-0.067,0.278-0.125,0.558-0.173,0.843l-1.011-0.504
		L221.741,303.529z M221.43,305.421c-0.03,0.357-0.055,0.715-0.055,1.079c0,0.372,0.024,0.738,0.056,1.102l-2.265,1.898
		l-15.896-0.688l15.862-4.536L221.43,305.421z M221.59,308.773c0.052,0.284,0.117,0.563,0.188,0.84l-1.131-0.049L221.59,308.773z
		 M228.129,317.672l-0.786,0.801l0.044-1.234C227.63,317.39,227.874,317.538,228.129,317.672z M232.349,292.9l0.689,1.023
		c-0.289,0.022-0.573,0.056-0.856,0.097L232.349,292.9z M246.6,305.995l1.099,0.284l-1.092,0.579
		c0.003-0.12,0.018-0.238,0.018-0.359C246.625,306.33,246.606,306.164,246.6,305.995z M246.519,304.942
		c-0.091-0.735-0.236-1.452-0.448-2.142l1.814-2.318l15.694-2.633l-14.572,7.735L246.519,304.942z M245.671,301.69
		c-0.109-0.265-0.235-0.52-0.362-0.776l1.115-0.187L245.671,301.69z M242.703,297.369c-0.207-0.197-0.415-0.394-0.635-0.577
		l0.934-0.619L242.703,297.369z M241.221,296.152c-0.594-0.415-1.227-0.775-1.89-1.085l-0.512-2.914l8.545-13.424l-4.002,16.005
		L241.221,296.152z M238.236,294.619c-0.269-0.096-0.542-0.185-0.819-0.263l0.606-0.952L238.236,294.619z M238.374,318.331
		l0.069,1.129l-0.882-0.852C237.837,318.526,238.106,318.43,238.374,318.331z M245.722,311.17l0.881,0.7l-1.231,0.085
		C245.496,311.697,245.616,311.437,245.722,311.17z M246.078,310.174c0.21-0.69,0.355-1.406,0.445-2.139l2.61-1.386l15.407,3.978
		l-16.458,1.14L246.078,310.174z M269.488,295.844l35.176-18.673c1.616,3.888,2.907,7.942,3.868,12.123L269.488,295.844z
		 M266.372,296.367l-17.573,2.948l11.34-14.494l35.55-23.55c3.396,4.624,6.286,9.642,8.585,14.976L266.372,296.367z M247.337,299.56
		l-2.538,0.426c-0.377-0.624-0.804-1.214-1.28-1.761l0.717-2.869l13.267-8.788L247.337,299.56z M244.596,293.916l4.464-17.853
		l22.897-35.972c5.025,2.879,9.697,6.301,13.923,10.205l-26.428,33.779L244.596,293.916z M249.828,272.996l9.659-38.63
		c4.034,1.425,7.911,3.176,11.602,5.227L249.828,272.996z M248.131,275.662l-9.568,15.032l-3.183-18.125l6.288-42.186
		c5.845,0.582,11.488,1.839,16.87,3.661L248.131,275.662z M237.766,291.944l-1.377,2.164c-0.705-0.135-1.43-0.209-2.171-0.222
		l-1.651-2.451l2.346-15.738L237.766,291.944z M231.739,290.206l-10.28-15.263l-11.414-41.095
		c5.395-1.778,11.051-2.976,16.901-3.511l7.42,42.246L231.739,290.206z M219.692,272.319l-22.248-33.033
		c3.707-2.02,7.607-3.725,11.652-5.117L219.692,272.319z M220.538,275.365l4.768,17.169l-15.601-9.763l-27.141-32.898
		c4.256-3.868,8.961-7.248,14.01-10.086L220.538,275.365z M225.703,293.961l0.689,2.481c-0.58,0.439-1.12,0.925-1.615,1.456
		l-2.933-0.414l-10.127-12.275L225.703,293.961z M220.377,297.276l-18.221-2.573l-38.176-19.015
		c2.342-5.314,5.255-10.319,8.688-14.917l36.369,22.76L220.377,297.276z M199.024,294.261l-39.418-5.567
		c0.995-4.172,2.314-8.218,3.962-12.094L199.024,294.261z M197.069,309.545l-38.27,10.946c-0.761-4.114-1.192-8.341-1.266-12.657
		L197.069,309.545z M219.51,310.516l2.569,0.111c0.24,0.694,0.532,1.364,0.884,1.997l-1.295,2.65l-14.803,5.838L219.51,310.516z
		 M223.585,313.631c0.162,0.236,0.336,0.462,0.513,0.686l-1.05,0.414L223.585,313.631z M224.791,315.117
		c0.497,0.53,1.038,1.016,1.618,1.454l-0.105,2.958l-11.149,11.354l7.242-14.822L224.791,315.117z M227.289,319.955l1.791-1.824
		c0.666,0.282,1.365,0.498,2.084,0.663l1.105,2.741l-5.567,14.908L227.289,319.955z M232.326,319.001
		c0.283,0.038,0.57,0.064,0.859,0.082l-0.397,1.063L232.326,319.001z M234.241,319.113c0.742-0.014,1.468-0.088,2.173-0.224
		l2.12,2.05l0.978,15.883l-6.17-15.301L234.241,319.113z M239.508,320.49l-0.158-2.567c0.663-0.311,1.295-0.672,1.889-1.089
		l2.775,1.012l7.353,14.111L239.508,320.49z M242.175,316.111c0.218-0.185,0.43-0.377,0.635-0.577l0.52,0.998L242.175,316.111z
		 M243.534,314.76c0.475-0.548,0.9-1.138,1.276-1.763l2.954-0.205l12.457,9.901l-15.499-5.653L243.534,314.76z M270.756,311.2
		l39.695-2.749c-0.108,4.314-0.565,8.539-1.359,12.647L270.756,311.2z M295.094,260.464l-33.007,21.865l24.52-31.34
		C289.687,253.909,292.533,257.071,295.094,260.464z M240.667,230.307l-5.835,39.147l-6.883-39.194
		c1.999-0.157,4.012-0.26,6.051-0.26C236.248,230,238.468,230.117,240.667,230.307z M181.839,250.564l25.186,30.529l-33.738-21.114
		C175.875,256.607,178.736,253.459,181.839,250.564z M171.571,350.687l32.872-27.545l16.575-6.537l-8.078,16.535l-29.873,30.423
		C178.767,359.723,174.914,355.4,171.571,350.687z M225.064,382.463l1.526-42.862l6.234-16.692l6.883,17.068l2.62,42.564
		C239.59,382.837,236.815,383,234,383C230.975,383,227.997,382.805,225.064,382.463z M284.468,363.966l-30.827-29.81l-8.234-15.802
		l17.289,6.306l33.377,26.527C292.693,355.874,288.799,360.159,284.468,363.966z"/>
	<circle class="st1" cx="234" cy="306.649" r="84.25"/>
</g>
<g id="wheel_2">
	<path class="st0" id="anima_wheel_front" d="M517.471,222.963c-46.53,0-84.25,37.72-84.25,84.25s37.72,84.25,84.25,84.25s84.25-37.72,84.25-84.25
		S564.001,222.963,517.471,222.963z M546.665,324.49l-13.95-11.088l18.359-1.271l41.305,10.665
		c-1.185,5.727-3.026,11.212-5.413,16.392L546.665,324.49z M586.552,340.103c-1.837,3.852-3.998,7.518-6.428,10.981l-30.985-24.627
		L586.552,340.103z M556.004,373.29c-4.94,2.887-10.222,5.254-15.788,6.984l-16.052-39.808l-1.095-17.785l13.23,12.793
		L556.004,373.29z M538.573,337.673l28.607,27.663c-3.219,2.756-6.659,5.258-10.308,7.455L538.573,337.673z M539.249,380.549
		c-4.024,1.193-8.187,2.059-12.458,2.578l-2.432-39.505L539.249,380.549z M494.144,380.078c-5.549-1.775-10.821-4.167-15.738-7.094
		l18.833-38.546l12.483-12.713l-0.655,18.391L494.144,380.078z M508.954,343.278l-1.416,39.771
		c-4.265-0.553-8.424-1.443-12.439-2.669L508.954,343.278z M477.543,372.471c-3.63-2.226-7.05-4.757-10.248-7.539l27.727-28.238
		L477.543,372.471z M447.724,338.63c-2.345-5.198-4.137-10.698-5.277-16.437l41.253-11.798l17.801,0.77l-14.105,11.819
		L447.724,338.63z M484.974,325.014l-30.513,25.568c-2.402-3.482-4.518-7.174-6.325-11.041L484.974,325.014z M440.971,307.213
		c0-5.785,0.663-11.411,1.88-16.828l42.475,5.999l15.949,7.944l-17.693,5.06l-42.602-1.843
		C440.979,307.434,440.971,307.324,440.971,307.213z M593.971,307.213c0,0.318-0.02,0.63-0.024,0.947l-42.782,2.962l-17.253-4.455
		l16.254-8.628l42.063-7.056C593.36,296.216,593.971,301.642,593.971,307.213z M507.305,303.644
		c-0.258,0.736-0.443,1.505-0.537,2.303l-2.742-1.366L507.305,303.644z M502.7,303.92l-14.243-7.094l16.334,2.307l2.796,3.389
		L502.7,303.92z M506.534,306.948l-3.896,3.265l-15.897-0.688l15.86-4.536L506.534,306.948z M506.732,308.087
		c0.064,0.801,0.208,1.58,0.438,2.322l-3.051-0.132L506.732,308.087z M508.211,301.707l-1.952-2.367l3.378,0.477
		C509.095,300.392,508.618,301.025,508.211,301.707z M513.312,297.263c-0.733,0.307-1.421,0.698-2.061,1.151l-0.821-2.955
		L513.312,297.263z M510.033,294.031l-4.259-15.333l9.217,13.686l-0.648,4.345L510.033,294.031z M512.962,316.998l-2.149,2.188
		l0.121-3.412C511.56,316.253,512.238,316.664,512.962,316.998z M515.819,293.613l1.906,2.83c-0.085-0.002-0.169-0.013-0.254-0.013
		c-0.72,0-1.422,0.074-2.103,0.208L515.819,293.613z M522.084,297.478c-0.707-0.336-1.454-0.6-2.235-0.776l1.645-2.585
		L522.084,297.478z M522.289,292.868l8.544-13.424l-4.002,16.003l-3.664,2.427L522.289,292.868z M521.726,317.121l0.188,3.052
		l-2.449-2.368C520.252,317.657,521.009,317.429,521.726,317.121z M526.473,296.885l-0.827,3.308
		c-0.516-0.6-1.098-1.138-1.732-1.612L526.473,296.885z M528.204,306.226l2.965,0.766l-3.013,1.6
		c0.058-0.452,0.098-0.91,0.098-1.379C528.254,306.88,528.234,306.552,528.204,306.226z M528.223,305.199l3.133-4.004l15.693-2.633
		l-14.571,7.735L528.223,305.199z M527.798,304.12c-0.229-0.764-0.54-1.491-0.923-2.173l3.019-0.507L527.798,304.12z
		 M527.675,310.676l2.399,1.907l-3.404,0.236C527.079,312.148,527.419,311.432,527.675,310.676z M528.113,309.746l4.49-2.384
		l15.407,3.978l-16.457,1.14L528.113,309.746z M552.959,296.557l35.177-18.673c1.616,3.888,2.907,7.942,3.868,12.124
		L552.959,296.557z M549.842,297.08l-17.573,2.948l11.34-14.494l35.55-23.55c3.396,4.624,6.286,9.642,8.585,14.976L549.842,297.08z
		 M530.808,300.273l-4.333,0.727l1.233-4.933l13.266-8.788L530.808,300.273z M528.068,294.628l4.464-17.853l22.896-35.971
		c5.025,2.879,9.697,6.301,13.923,10.205l-26.428,33.779L528.068,294.628z M533.299,273.707l9.659-38.628
		c4.034,1.425,7.911,3.176,11.602,5.227L533.299,273.707z M531.601,276.376l-9.568,15.032l-3.184-18.127l6.287-42.185
		c5.845,0.582,11.488,1.839,16.871,3.661L531.601,276.376z M521.238,292.657l-2.359,3.707l-2.841-4.218l2.346-15.74L521.238,292.657
		z M515.211,290.918l-10.283-15.267l-11.413-41.09c5.395-1.778,11.051-2.976,16.902-3.511l7.419,42.245L515.211,290.918z
		 M503.163,273.03l-22.247-33.032c3.706-2.02,7.606-3.724,11.652-5.117L503.163,273.03z M504.009,276.078l4.768,17.168
		l-15.602-9.764l-27.14-32.898c4.256-3.868,8.961-7.247,14.01-10.086L504.009,276.078z M509.174,294.674l1.176,4.234l-5.035-0.711
		l-10.127-12.275L509.174,294.674z M503.848,297.99l-18.221-2.574l-38.176-19.015c2.342-5.314,5.255-10.319,8.688-14.917
		l36.369,22.76L503.848,297.99z M482.496,294.974l-39.419-5.568c0.995-4.172,2.314-8.218,3.962-12.094L482.496,294.974z
		 M480.54,310.258l-38.27,10.946c-0.761-4.114-1.192-8.341-1.266-12.657L480.54,310.258z M502.982,311.229l4.39,0.19l-2.232,4.568
		l-14.802,5.838L502.982,311.229z M508.011,312.389c0.381,0.695,0.843,1.337,1.362,1.929l-2.855,1.126L508.011,312.389z
		 M509.955,315.163l-0.181,5.082l-11.148,11.353l7.242-14.823L509.955,315.163z M510.76,320.667l3.079-3.136l1.901,4.714
		l-5.567,14.907L510.76,320.667z M514.984,317.696c0.755,0.179,1.539,0.282,2.346,0.293l-1.071,2.869L514.984,317.696z
		 M518.35,318.117l3.655,3.534l0.978,15.883l-6.17-15.301L518.35,318.117z M522.979,321.202l-0.27-4.385l4.777,1.742l7.353,14.112
		L522.979,321.202z M523.601,316.078c0.651-0.451,1.245-0.976,1.781-1.556l1.419,2.723L523.601,316.078z M526.163,313.856
		l5.072-0.351l12.457,9.901l-15.498-5.653L526.163,313.856z M554.227,311.913l39.694-2.749c-0.108,4.314-0.565,8.539-1.359,12.647
		L554.227,311.913z M578.565,261.177l-33.007,21.865l24.52-31.34C573.158,254.622,576.004,257.784,578.565,261.177z M524.138,231.02
		l-5.835,39.149l-6.884-39.196c1.999-0.157,4.013-0.26,6.052-0.26C519.719,230.713,521.939,230.83,524.138,231.02z M465.31,251.276
		l25.185,30.528l-33.737-21.113C459.346,257.32,462.207,254.171,465.31,251.276z M455.042,351.4l32.873-27.545l16.575-6.536
		l-8.079,16.536l-29.872,30.422C462.239,360.436,458.385,356.114,455.042,351.4z M508.535,383.176l1.526-42.862l6.234-16.693
		l6.883,17.069l2.62,42.564c-2.736,0.296-5.512,0.459-8.326,0.459C514.446,383.713,511.468,383.518,508.535,383.176z
		 M567.939,364.679l-30.826-29.809l-8.234-15.802l17.288,6.305l33.377,26.528C576.164,356.587,572.27,360.872,567.939,364.679z"/>
	<circle class="st1" cx="517.471" cy="307.166" r="84.25"/>
</g>
<g id="velik">
	<g id="rul">
		<g>
			<path class="st2" d="M405.833,142.563l0.468,3.846l0.574-0.221v-0.679c0-0.971,0.521-2.868,1.365-3.349l6.923-3.949
				c0.669-0.382,1.419-0.587,2.189-0.596c2.782-0.035,9.683,0.834,11.023,0.387c1.688-0.563,4.313-4,5.563-4.5
				c0.746-0.298,1.625-0.463,2.213-0.548c0.38-0.055,0.662-0.377,0.662-0.761v-1.22c0-0.451-0.385-0.806-0.834-0.766
				c-1.936,0.171-6.704,0.512-8.479-0.079c-1.266-0.422-1.78-1.595-1.987-2.541c-0.157-0.714-0.9-1.136-1.607-0.952l-7.236,1.879
				l0.44,1.951c0,0,1.953-0.765,2.828-0.003c0.875,0.762,1.813,1.729,0.75,3.229s-3.188,0.688-4.75,1.313s-9.125,5.479-9.771,5.938
				C405.657,141.299,405.833,142.563,405.833,142.563z"/>
		</g>
		<g>
			<path class="st3" d="M438.982,171.934l-9.929-23.101l1.648-0.857c0.008-0.004,1.387-0.74,4.102-2.766
			c4.438-3.312,5.013-8.982,3.613-13.133c-1.771-5.256-6.309-6.468-9.959-5.854c-3.603,0.608-12.615,2.94-12.706,2.964
			l-1.004-3.872c0.377-0.098,9.271-2.399,13.044-3.036c6.642-1.119,12.295,2.226,14.416,8.521
			c2.234,6.631,0.221,13.711-5.012,17.616c-1.278,0.954-2.295,1.651-3.048,2.141l8.51,19.799L438.982,171.934z"/>
		</g>
		<g>
			<path class="st2" d="M417.351,131.53l-1.968-8.732c-0.121-0.54-0.658-0.875-1.195-0.756c-0.539,0.122-0.877,0.657-0.756,1.195
				l0.011,0.048l-26.907,7.552l-0.041-0.201c-0.098-0.481-0.566-0.79-1.046-0.694c-0.481,0.097-0.792,0.566-0.694,1.047l1.215,6.007
				c0.085,0.421,0.455,0.712,0.869,0.712c0.059,0,0.117-0.006,0.177-0.018c0.481-0.097,0.792-0.566,0.694-1.047l-0.04-0.197
				l27.724-4.502l0.006,0.026c0.104,0.465,0.518,0.78,0.975,0.78c0.073,0,0.146-0.008,0.221-0.024
				C417.134,132.604,417.472,132.069,417.351,131.53z"/>
		</g>
	</g>
	<g id="krilya">
		<g>
			<path class="st4" d="M323.54,301.67l-6.21-0.44C314.62,257.57,278.35,223,234,223c-40.654,0-74.511,29.039-81.971,67.508
				c-0.536,2.765-2.148,5.204-4.537,6.697l-0.2,0.125c-1.089,0.68-2.478-0.209-2.327-1.483
				c5.259-44.497,43.118-79.016,89.035-79.016C281.9,216.83,321.03,254.39,323.54,301.67z"/>
		</g>
		<g>
			<path class="st4" d="M522.133,223.791c-17.449-1.06-35.376,3.33-51.078,13.72c-33.904,22.434-46.116,65.334-31.109,101.532
				c1.079,2.602,1.081,5.525-0.088,8.088l-0.098,0.215c-0.533,1.168-2.182,1.194-2.76,0.047
				c-20.168-40.011-7.644-89.69,30.65-115.028c18.863-12.482,40.718-16.899,61.5-14.08C533.5,219,525.928,224,522.133,223.791z"/>
		</g>
	</g>
	<g id="tormoz">
		<g>
			<path class="st5" d="M285.745,248.074l-6.156-5.109c-0.846-0.702-0.964-1.97-0.262-2.816l0,0
			c0.703-0.846,1.97-0.964,2.816-0.262l6.156,5.109c0.846,0.702,0.964,1.97,0.262,2.816l0,0
			C287.859,248.658,286.592,248.776,285.745,248.074z"/>
			<ellipse transform="matrix(0.6843 -0.7292 0.7292 0.6843 -89.0755 287.0871)" class="st3" cx="287.012" cy="246.415" rx="1" ry="1"/>
			<ellipse transform="matrix(0.6843 -0.7292 0.7292 0.6843 -87.3724 281.0121)" class="st3" cx="280.848" cy="241.41" rx="1" ry="1"/>
		</g>
		<path class="st2" d="M305.545,234.594c0,0-0.419-0.671-1.043-1.321c-0.609-0.659-1.394-1.314-2.29-1.839
			c-0.324-0.177-0.659-0.342-1.002-0.491c0.99-1.812,3.258-3.399,5.015-3.399c0.001,0,0.001,0,0.001,0c0.552,0,1-0.447,1-1
			s-0.447-1-1-1c-0.001,0-0.001,0-0.002,0c-2.838,0-5.81,2.428-6.952,4.77c-0.932-0.246-2.032-0.454-3.094-0.316
			c-0.545,0.047-1.058,0.2-1.551,0.358c-0.479,0.18-0.92,0.386-1.321,0.6c-0.382,0.23-0.753,0.41-1.079,0.646
			c-0.308,0.219-0.654,0.468-0.821,0.554c-0.391,0.232-0.648,0.342-0.648,0.342l-0.009,0.003c-1.069,0.459-1.817,1.523-1.816,2.76
			c0.002,1.656,1.347,2.997,3.003,2.994s2.997-1.347,2.994-3.003c0,0,0-0.28,0.058-0.732c0.041-0.267,0.028-0.39,0.069-0.621
			c0.01-0.226,0.124-0.477,0.233-0.744c0.067-0.116,0.134-0.249,0.217-0.379c0.089-0.111,0.181-0.234,0.287-0.353
			c0.222-0.205,0.483-0.416,0.802-0.536c0.316-0.132,0.677-0.199,1.063-0.187c0.387,0.017,0.781,0.09,1.213,0.23l0.314,0.098
			l0.329,0.12c0.195,0.09,0.343,0.153,0.518,0.258c0.345,0.199,0.641,0.451,0.894,0.715c0.492,0.549,0.767,1.178,0.849,1.739
			c0.056,0.273,0.035,0.545,0.024,0.768c-0.008,0.223-0.07,0.424-0.114,0.579c-0.097,0.313-0.211,0.478-0.211,0.478
			c-0.344,0.59-0.913,0.466-0.504,1.631L305.545,234.594z"/>
		</g>
		<g>
		<path class="st3" d="M283.51,242.235c0,0,0.636-0.265,1.423-0.816c0.803-0.536,1.757-1.358,2.606-2.276
			c0.851-0.916,1.596-1.93,2.053-2.782c0.478-0.834,0.677-1.5,0.677-1.5c0.264-0.882,1.193-1.383,2.075-1.119
			c0.882,0.264,1.383,1.193,1.119,2.075c-0.151,0.505-0.528,0.888-0.982,1.071c0,0-0.646,0.256-1.435,0.805
			c-0.81,0.53-1.755,1.359-2.594,2.287c-0.841,0.925-1.577,1.947-2.041,2.794c-0.48,0.832-0.689,1.488-0.689,1.488
			c-0.277,0.87-1.206,1.351-2.077,1.075c-0.87-0.277-1.351-1.206-1.075-2.077C282.723,242.78,283.08,242.416,283.51,242.235z"/>
	</g>
	<g id="tormoz_front">
		<g>
			<path class="st5" d="M476.648,240.727l7.159-3.572c0.984-0.491,1.388-1.698,0.897-2.683l0,0
				c-0.491-0.984-1.698-1.388-2.683-0.897l-7.159,3.572c-0.984,0.491-1.388,1.698-0.897,2.683l0,0
				C474.457,240.815,475.664,241.219,476.648,240.727z"/>
			<ellipse transform="matrix(0.8948 -0.4464 0.4464 0.8948 -56.6651 237.4861)" class="st3" cx="475.644" cy="238.994" rx="1" ry="1"/>
			<ellipse transform="matrix(0.8948 -0.4464 0.4464 0.8948 -54.2761 240.3562)" class="st3" cx="482.929" cy="235.359" rx="1" ry="1"/>
		</g>
			<path class="st0" d="M472.077,226.041c0,0,0.041-0.252,0.077-0.685c0.003-0.142,0.056-0.315,0.034-0.542
				c-0.013-0.232-0.032-0.494-0.105-0.766c-0.084-0.26-0.166-0.563-0.34-0.833c-0.163-0.277-0.375-0.554-0.639-0.813
				c-0.539-0.509-1.306-0.905-2.152-1.154c-0.202-0.055-0.45-0.135-0.621-0.158l-0.701-0.125c-0.403-0.029-0.8-0.048-1.203-0.009
				c-0.393,0.04-0.76,0.119-1.085,0.241c-0.325,0.117-0.608,0.258-0.84,0.425c-0.466,0.326-0.611,0.703-0.71,0.962l-1.244-3.19
				c0.369-0.156,0.74-0.219,0.99-0.275c0.444-0.078,0.908-0.159,1.394-0.188c0.487-0.02,0.987-0.017,1.492,0.019
				c0.497,0.035,1.023,0.11,1.557,0.2l0.697,0.147c0.299,0.062,0.511,0.117,0.772,0.184c0.997,0.265,2.013,0.646,2.923,1.207
				c0.448,0.287,0.881,0.598,1.241,0.959c0.361,0.357,0.689,0.719,0.956,1.086c0.248,0.372,0.49,0.714,0.66,1.038
				c0.178,0.322,0.332,0.65,0.456,0.91c0.193,0.391,0.323,0.61,0.323,0.61c0.603,1.009,0.274,2.317-0.735,2.92
				c-1.009,0.603-2.317,0.274-2.92-0.735C472.083,227.03,472,226.519,472.077,226.041z"/>
		<g>
			<path class="st3" d="M480.252,235.605c0,0-0.533-0.436-1.129-1.19c-0.616-0.744-1.294-1.804-1.844-2.927
				c-0.553-1.122-0.975-2.306-1.169-3.254c-0.218-0.936-0.219-1.631-0.219-1.631c0-0.921-0.746-1.667-1.667-1.667
				c-0.92,0-1.667,0.746-1.667,1.667c0,0.527,0.251,1.002,0.634,1.308c0,0,0.545,0.431,1.144,1.182
				c0.624,0.74,1.292,1.806,1.829,2.935c0.54,1.128,0.952,2.317,1.154,3.262c0.222,0.935,0.234,1.624,0.234,1.624
				c0.016,0.913,0.768,1.641,1.681,1.625c0.913-0.016,1.641-0.768,1.625-1.681C480.85,236.353,480.612,235.902,480.252,235.605z"/>
		</g>
	</g>
	<g id="sedlo">
		<rect x="302.547" y="205.617" transform="matrix(0.9322 -0.362 0.362 0.9322 -57.1172 124.9964)" class="st3" width="5" height="18.645"/>
		<path class="st6" d="M285.492,205.5h-8.367c-0.552,0-1-0.448-1-1s0.448-1,1-1h8.367c5.497,0,9.62-6.465,9.661-6.531
				c0.294-0.467,0.91-0.608,1.378-0.316c0.467,0.293,0.61,0.909,0.317,1.377C296.657,198.335,292.103,205.5,285.492,205.5z"/>
		<path class="st5" d="M274.5,204.417c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.03,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,204.416,274.517,204.417,274.5,204.417z"/>
		<path class="st5" d="M274.5,203.204c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.031,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,203.203,274.517,203.204,274.5,203.204z"/>
		<path class="st5" d="M274.5,201.991c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
						c0.272-0.031,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,201.99,274.517,201.991,274.5,201.991z"/>
		<path class="st5" d="M274.5,200.778c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
						c0.272-0.023,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,200.777,274.517,200.778,274.5,200.778z"/>
		<path class="st5" d="M274.5,199.565c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
						c0.272-0.024,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,199.564,274.517,199.565,274.5,199.565z"/>
		<path class="st5" d="M274.5,198.352c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
						c0.272-0.024,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,198.351,274.517,198.352,274.5,198.352z"/>
		<path class="st5" d="M274.5,197.139c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.025,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,197.138,274.517,197.139,274.5,197.139z"/>
		<path class="st5" d="M274.5,195.926c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.025,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,195.925,274.517,195.926,274.5,195.926z"/>
		<path class="st5" d="M274.5,194.713c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.026,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.52-0.446,0.549l-12.917,1.333
						C274.534,194.712,274.517,194.713,274.5,194.713z"/>
		<path class="st5" d="M274.5,193.5c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.026,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.52-0.446,0.549l-12.917,1.333
						C274.534,193.499,274.517,193.5,274.5,193.5z"/>
		<path class="st6" d="M287.59,194.377c0,0,0.292,0.024,0.804,0.067c0.257,0.023,0.569,0.05,0.927,0.082
				c0.376,0.055,0.8,0.117,1.263,0.185c0.469,0.065,0.949,0.189,1.477,0.295c0.525,0.106,1.068,0.289,1.641,0.444
				c0.559,0.202,1.154,0.387,1.734,0.654c0.292,0.132,0.587,0.266,0.883,0.4l0.867,0.474c0.572,0.332,1.141,0.696,1.667,1.103
				c0.539,0.395,1.027,0.838,1.499,1.278c0.915,0.902,1.666,1.852,2.246,2.702c0.564,0.855,0.976,1.598,1.244,2.121
				c0.259,0.526,0.407,0.827,0.407,0.827c0.737,1.497,0.121,3.309-1.376,4.046c-1.497,0.737-3.309,0.121-4.046-1.376
				c-0.102-0.207-0.178-0.419-0.229-0.635l-0.011-0.052c0,0-0.057-0.245-0.157-0.674c-0.106-0.426-0.276-1.021-0.528-1.713
				c-0.265-0.682-0.624-1.452-1.109-2.231c-0.256-0.377-0.523-0.774-0.843-1.143c-0.306-0.382-0.659-0.741-1.03-1.091l-0.573-0.514
				l-0.616-0.469c-0.407-0.319-0.857-0.576-1.278-0.853c-0.447-0.235-0.866-0.498-1.298-0.692c-0.429-0.191-0.836-0.405-1.217-0.548
				c-0.384-0.151-0.736-0.289-1.048-0.411c-0.338-0.11-0.634-0.205-0.877-0.284c-0.489-0.156-0.769-0.244-0.769-0.244
				c-0.471-0.15-0.732-0.653-0.582-1.125C286.79,194.593,287.183,194.343,287.59,194.377z"/>
		<path class="st5" d="M306.093,209.853l-5.311,2.123c-0.461,0.184-0.989-0.042-1.174-0.503l-1.711-4.281
				c-0.184-0.461,0.042-0.989,0.503-1.174l5.311-2.123c0.461-0.184,0.989,0.042,1.174,0.503l1.711,4.281
				C306.781,209.141,306.555,209.669,306.093,209.853z"/>
		<path class="st7" d="M271.014,194.342c-1.465,0.238-2.868-0.682-3.208-2.126c-0.967-4.103-1.359-8.154,0.694-9.591
				c2.5-1.75,4.55-2,7.275-2s10.725,2.75,19.35,2.125S315,179.5,319,179.5s9.928,0.422,12.625,4.5c1.708,2.583,2.5,4.875,1.125,6
				c-1.61,1.317-9.625,0.625-18.875,4.875c-6.089,2.798-10.932,5.649-13.531,7.272c-0.956,0.597-2.201,0.256-2.743-0.733
				c-1-1.824-3.537-4.442-9.975-6.164C280.418,193.323,274.278,193.811,271.014,194.342z"/>
		<path class="st5" d="M304.919,223.297c-1.799,0.725-2.66,2.764-1.939,4.554c0.725,1.799,2.755,2.663,4.554,1.939l6.493-2.616
				l-2.616-6.493L304.919,223.297z M306.881,228.166c-0.9,0.362-1.915-0.07-2.277-0.969c-0.359-0.89,0.07-1.915,0.969-2.277
				c0.89-0.359,1.918,0.079,2.277,0.969C308.212,226.789,307.771,227.808,306.881,228.166z"/>
		<circle class="st3" cx="306.227" cy="226.545" r="1.75"/>
	</g>
	<g id="rama">
		<path class="st4" d="M230.922,295.308L230.922,295.308l80.55-65.536l3.155,3.879l-76.672,62.38
						C235.814,297.774,232.665,297.45,230.922,295.308z"/>
		<rect x="322.381" y="225.473" transform="matrix(0.9254 -0.379 0.379 0.9254 -76.5191 143.3384)" class="st4" width="7" height="81.175"/>
		<path class="st4" d="M443.035,169.136c0,0,3.577,9.265,8.943,23.162c2.706,6.939,5.864,15.035,9.247,23.709
					c1.691,4.337,3.439,8.818,5.215,13.372c1.771,4.556,3.582,9.179,5.495,13.762l1.425,3.44c0.441,1.045,0.973,2.199,1.482,3.29
					c0.997,2.224,2.06,4.409,3.119,6.566c2.129,4.294,4.388,8.485,7.004,12.022c2.746,3.577,5.737,6.945,8.504,10.182
					c2.805,3.209,5.456,6.242,7.904,9.043c9.839,11.176,16.398,18.627,16.398,18.627l-2.042,1.884c0,0-1.719-1.794-4.727-4.934
					c-1.5-1.573-3.322-3.483-5.412-5.674c-2.096-2.186-4.413-4.696-6.959-7.418c-2.532-2.738-5.275-5.705-8.176-8.843
					c-1.438-1.586-2.916-3.216-4.426-4.881c-0.754-0.851-1.515-1.71-2.284-2.578c-0.748-0.882-1.511-1.712-2.275-2.716
					c-3.031-3.877-5.459-8.139-7.796-12.529c-1.16-2.198-2.224-4.458-3.269-6.739c-0.509-1.163-0.993-2.27-1.489-3.521l-1.34-3.473
					c-1.775-4.638-3.652-9.235-5.512-13.755c-1.854-4.522-3.679-8.973-5.446-13.28c-3.532-8.614-6.829-16.654-9.655-23.546
					c-5.698-13.764-9.497-22.94-9.497-22.94L443.035,169.136z"/>
		<rect x="357.208" y="257.429" transform="matrix(0.6315 -0.7754 0.7754 0.6315 -48.2292 420.3728)" class="st4" width="121.918" height="7"/>
		<path class="st4" d="M359.333,294c-15.566,0-29.331-11.209-29.909-11.686l3.816-4.63c0.125,0.103,12.714,10.316,26.093,10.316
					c12.561,0,25.665-13.077,31.076-25.719l0.067-0.158c5.724-13.375,23.142-54.076,34.025-67.512
					c8.907-10.995,19.791-13.899,20.25-14.017l1.496,5.811c-0.084,0.022-9.479,2.597-17.084,11.983
					c-6.873,8.484-18.034,30.722-33.171,66.096l-0.068,0.158C389.833,278.874,374.939,294,359.333,294z"/>
	</g>
	<g id="tros">
		<path class="st2" d="M384.511,310.318l-0.771-0.637c0.63-0.764,63.196-76.643,80.892-100.728
					c16.055-21.851,19.178-55.031,15.26-70.582c-3.871-15.36-14.15-21.748-20.235-21.373c-3.911,0.24-8.325,6.017-11.548,10.235
					c-1.682,2.202-3.01,3.94-4.032,4.672c-2.843,2.037-5.122,1.359-8.276,0.422c-0.379-0.113-0.773-0.23-1.187-0.348l0.275-0.962
					c0.416,0.119,0.813,0.237,1.195,0.351c3.098,0.921,4.965,1.477,7.41-0.276c0.9-0.646,2.253-2.416,3.819-4.467
					c3.526-4.615,7.914-10.358,12.282-10.626c6.421-0.395,17.256,6.213,21.265,22.127c3.967,15.743,0.814,49.32-15.422,71.418
					C447.725,233.653,385.141,309.554,384.511,310.318z"/>
		<path class="st2" d="M444.065,170.664l-0.563-0.827c0.007-0.004,0.659-0.449,1.681-1.285c3.207-2.621,9.06-8.214,12.227-16.235
					c3.637-9.215,2.241-14.905,0.874-18.384c-1.095-2.787-3.132-7.974-14.62-10.822c-10.841-2.688-29.352,2.075-29.538,2.124
					l-0.252-0.968c0.769-0.2,18.942-4.875,30.03-2.126c10.537,2.613,13.586,7.036,15.312,11.428
					c1.428,3.636,2.892,9.573-0.876,19.116c-3.25,8.232-9.241,13.96-12.523,16.643C444.757,170.192,444.093,170.645,444.065,170.664
					z"/>
		<path class="st2" d="M470.737,221.422c-6.604-11.103-23.22-51.689-23.387-52.098l0.926-0.378
					c0.167,0.408,16.753,40.925,23.32,51.964L470.737,221.422z"/>
		<path class="st4" d="M373.011,299.594l0.005-0.024l-0.386-0.025c-1.081-0.135-2.179-0.213-3.296-0.213h0l-132.456-8.546
			c-0.617-0.073-1.24-0.121-1.877-0.121c-8.745,0-15.833,7.089-15.833,15.833c0,7.916,5.816,14.456,13.404,15.628l-0.002,0.02
			l130.464,29.093l0.001-0.004c2.019,0.496,4.127,0.764,6.299,0.764c14.544,0,26.333-11.79,26.333-26.333
			C395.667,312.372,385.813,301.384,373.011,299.594z M336.505,314.902c-0.079,0.771-0.725,1.339-1.478,1.333
			c-0.051,0-0.103-0.004-0.154-0.009l-91.684-10.329c0.023,0.257,0.039,0.516,0.039,0.779c0,0.76-0.109,1.493-0.296,2.192
			l91.473,12.624c0.815,0.112,1.391,0.869,1.286,1.69c-0.098,0.768-0.758,1.32-1.51,1.295c-0.051-0.002-0.103-0.006-0.154-0.013
			l-92.469-12.761c-1.526,2.044-3.954,3.361-6.697,3.337c-4.621-0.041-8.367-3.851-8.367-8.511s3.746-8.404,8.367-8.364
			c3.229,0.029,6.025,1.901,7.42,4.614l92.896,10.465C335.995,313.336,336.589,314.078,336.505,314.902z"/>
		<path class="st5" d="M229.557,306.651c-0.143,0-0.289-0.021-0.433-0.064l-81.333-24.5c-0.793-0.239-1.243-1.076-1.003-1.869
					c0.239-0.793,1.075-1.244,1.869-1.003l81.333,24.5c0.793,0.239,1.243,1.076,1.003,1.869
					C230.797,306.232,230.202,306.651,229.557,306.651z"/>
		<circle class="st5" cx="517.471" cy="307.166" r="3.5"/>
		<circle class="st5" cx="234.667" cy="306.5" r="4"/>
		<polygon class="st4" points="467.535,230.287 461.867,232.754 459.535,226.866 465.202,224.4 				"/>
		<path class="st0" d="M459.07,226.998c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l6-2.466
					c0.527-0.216,1.127,0.034,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-6,2.466
					C459.333,226.973,459.201,226.998,459.07,226.998z"/>
		<path class="st0" d="M462.034,234.55c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l6-2.466
					c0.526-0.216,1.127,0.035,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-6,2.466
					C462.297,234.525,462.165,234.55,462.034,234.55z"/>
		<polygon class="st4" points="446.285,177.032 440.617,179.498 438.285,173.611 443.952,171.144 				"/>
		<path class="st0" d="M437.57,173.274c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l10-3.988
					c0.527-0.216,1.127,0.034,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-10,3.988
					C437.833,173.249,437.701,173.274,437.57,173.274z"/>
		<path class="st0" d="M440.784,181.294c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l6-2.466
					c0.526-0.216,1.127,0.035,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-6,2.466
					C441.047,181.27,440.915,181.294,440.784,181.294z"/>
	<g id="pedali_1_">
	<g id="pedali">
		<g>
			<circle class="st3" cx="368.5" cy="325" r="14.5"/>
			<path class="st5" d="M368.5,340c-8.271,0-15-6.729-15-15s6.729-15,15-15c8.271,0,15,6.729,15,15S376.771,340,368.5,340z
				 M368.5,311c-7.72,0-14,6.28-14,14s6.28,14,14,14s14-6.28,14-14S376.22,311,368.5,311z"/>
		</g>
		<g>
			<circle class="st0" cx="368.5" cy="325" r="10.625"/>
		</g>
		<g>
			<circle class="st5" cx="368.5" cy="325" r="6.75"/>
		</g>
	</g>
	<g>
<path class="st11" id="motionPath" d="M414.07,325c0,12.584-5.101,23.976-13.347,32.223c-8.247,8.247-19.639,13.347-32.223,13.347
	s-23.976-5.101-32.223-13.347c-8.247-8.247-13.347-19.639-13.347-32.223s5.101-23.976,13.347-32.223
	c8.247-8.247,19.639-13.347,32.223-13.347s23.976,5.101,32.223,13.347C408.969,301.024,414.07,312.416,414.07,325z"/>
		<path class="st3" id="pedal_a" d="M407.688,348.412l-41.117-19.84c-1.981-0.956-2.82-3.359-1.864-5.341l0,0c0.956-1.981,3.359-2.82,5.341-1.864
			l41.117,19.84c1.981,0.956,2.82,3.359,1.864,5.341v0C412.073,348.529,409.67,349.368,407.688,348.412z"/>
		<circle class="st5" cx="368.5" cy="325" r="2.938"/>
	</g>
	<g id="pedal" transform="translate(-409.518, -344.854)">
		<path class="st0" d="M419.783,344.066l-15.02,9.92c-2.295,1.516-5.412,0.878-6.928-1.417l0,0
			c-1.516-2.295-0.878-5.412,1.417-6.928l15.02-9.92c2.295-1.516,5.412-0.878,6.928,1.417l0,0
			C422.715,339.433,422.078,342.55,419.783,344.066z"/>
		<circle class="st3" cx="409.518" cy="344.854" r="2.938"/>
	</g>
</g>
 <defs>
  <pattern id="pattern" x="0" y="0" width="750" height="500" patternUnits="userSpaceOnUse" >
    <path class="st8" d="M741.936,284.582v1.411h-3.629v-3.83h-3.628v-4.839h-13.509v3.025h-2.419v2.621h-2.419v-12.904h-5.645v2.017
	h-8.872v2.823h-2.823v-4.234h-13.709v6.855h-6.855v-11.089h-3.63v-3.428h-2.419v3.428h-7.662v-2.218h-2.419v3.226h-2.823v12.702
	h-3.226v-13.71h-2.419v-2.419h-3.226v2.822h-1.613v7.662h-1.412v9.879h-2.017v-5.444h-2.419v-38.106h-2.015v-4.234h-17.743v4.435
	h-1.411v-15.323h-7.057v-2.419h-4.84v3.024h-2.218v30.646h-4.011V235.8v-0.588v-1.47h-5.071v1.47h-7.79v-1.47h-1.47v1.47h-2.94
	v-1.102h-8.451v1.102h-3.748v-10.877h-3.087v-1.176h-3.013v1.176h-1.029v-0.588h-2.646v0.588h-7.643v5.108h-12.861v0.919h-1.102
	v-1.837h-1.911v1.837h-3.601v-0.735h-2.499v0.735h-7.202v4.85h-0.955v5.732h0.955v2.572h-0.955v1.911h0.955v2.572h-0.955v1.911
	h0.955v2.572h-0.955v1.911h0.955v2.572h-0.955v1.911h0.955v8.367h-5.009v3.226h-0.587c-1.808-12.568-3.408-27.552-4.71-43.757
	c0.901-0.131,2.148-2.217,2.148-3.477c0-1.3-0.174-1.222-1.342-1.221c-0.387,0-0.791,0.201-1.133,0.522
	c-0.091-1.193-0.18-2.392-0.268-3.596c0.455-0.506,0.863-1.371,0.863-1.966c0-0.886-0.118-0.833-0.915-0.832
	c-0.048,0-0.097,0.012-0.146,0.021c-0.936-13.342-1.669-27.294-2.151-41.247h0.054v-1.419h-0.101
	c-0.014-0.433-0.029-0.867-0.043-1.3h1.641v-1.025h-1.674c-0.123-3.937-0.226-7.87-0.308-11.784h1.076v-0.67h-1.497v-1.511h1.497
	v-0.67h-1.497v-1.511h1.536v-0.67h-1.536v-1.511h1.536v-0.67h-1.536h-0.927l0.001-4.056h0.927v-10.329h0.551v-0.63h-0.551v-2.446
	h-1.065v-8.983h-0.591v8.983h-1.025v2.446h-0.67v0.63h0.67v10.329h0.808l-0.001,4.056h-0.808h-1.536v0.67h1.536v1.511h-1.536v0.67
	h1.536v1.511h-1.576v0.67h1.576v1.511h-1.576v0.67h1.016c-0.082,3.914-0.184,7.846-0.307,11.784h-1.615v1.025h1.582
	c-0.554,17.23-1.495,34.521-2.735,50.72c-0.198-0.074-0.399-0.117-0.596-0.117c-1.462-0.001-1.679-0.1-1.679,1.527
	c0,1.209,0.919,3.03,1.856,3.886c-0.709,8.661-1.503,16.961-2.368,24.713H493.54v5.041h-9.678v17.541h-6.25v-2.117h-2.557v-36.838
	v-4.859h-0.572v-1.262h-7.458v-13.341v-6.941h-0.817v-1.803h-75.396v-0.374h1.565v-2.45l-5.308-2.041h-2.382l-1.361,2.041v2.45
	h1.633v0.374h-24.633v1.803h-2.722v-7.281h5.852l5.512-0.68v-0.68h-9.635l-0.367-1.021h-4.287l-0.367,1.021h-1.878v1.361h4.015
	v7.281h-0.885v6.941h0.272l-0.06,1.803h-0.195c-0.365,0-0.663,0.299-0.663,0.664c0,0.365,0.298,0.663,0.663,0.663h0.151
	l-0.313,9.362c-0.287,0.073-0.501,0.332-0.501,0.641c0,0.293,0.194,0.541,0.459,0.628l-1.323,39.607l-1.619-0.023v7.088h-4.03
	l-2.85,0.112v-10.143h0.975c0.288,0,0.367-0.397,0.1-0.506l-1.076-0.442v-0.004h-0.01l-6.17-2.536v-0.945h-0.165v-1.685h0.165
	v-0.586h-0.266v-0.909h0.001l-0.597-0.634v-0.382c0.079-0.032,0.134-0.11,0.134-0.2c0-0.091-0.056-0.168-0.134-0.2v-0.111
	c0-0.045-0.037-0.082-0.082-0.082c-0.046,0-0.083,0.037-0.083,0.082v0.111c-0.079,0.032-0.134,0.11-0.134,0.2
	c0,0.091,0.055,0.168,0.134,0.2v0.382l-0.596,0.634h0.003v0.909h-0.267v0.586h0.165v1.685h-0.165v0.879h-9.089v-9.489l0.339-0.142
	v-0.234l0.412-0.165l0.179-1.333l-1.195-0.385c0,0,0.027-0.508-0.083-0.893c-0.11-0.385-1.951-2.473-2.102-3.023
	c-0.151-0.55-0.137-2.322-0.247-2.652c-0.11-0.33-0.687-0.962-1.237-1.759c-0.55-0.797-0.783-1.223-0.948-1.772
	c-0.12-0.401-0.307-2.15-0.398-3.065v-0.651c0.077-0.024,0.133-0.094,0.133-0.179c0-0.084-0.056-0.155-0.133-0.179v-0.525
	c0.059-0.022,0.102-0.079,0.102-0.146c0-0.067-0.042-0.124-0.102-0.146v-0.528c0.045-0.021,0.076-0.065,0.076-0.118
	c0-0.052-0.031-0.097-0.076-0.118v-0.267c0-0.03-0.025-0.055-0.055-0.055s-0.055,0.025-0.055,0.055v0.267
	c-0.045,0.021-0.076,0.066-0.076,0.118c0,0.052,0.031,0.097,0.076,0.118v0.528c-0.059,0.022-0.102,0.079-0.102,0.146
	c0,0.067,0.042,0.124,0.102,0.146v0.525c-0.077,0.024-0.133,0.094-0.133,0.179c0,0.085,0.056,0.155,0.133,0.179v0.651
	c-0.092,0.915-0.278,2.664-0.398,3.065c-0.165,0.55-0.398,0.976-0.948,1.772c-0.549,0.797-1.127,1.429-1.237,1.759
	s-0.096,2.102-0.247,2.652c-0.151,0.549-1.992,2.638-2.102,3.023c-0.11,0.385-0.082,0.893-0.082,0.893l-1.195,0.385l0.179,1.333
	l0.412,0.165v0.234l0.339,0.142v15.608l-8.287,4.706c-0.325,0.185-0.194,0.68,0.18,0.68h-0.503c-0.635,0-1.154,0.519-1.154,1.154
	v0.147c0,0.635,0.519,1.154,1.154,1.154h0.728v2.448h-2.419v2.621h-2.419v-12.904h-5.645v2.017h-8.872v2.823h-2.823v-4.234h-13.709
	v6.855h-6.855v-11.089h-3.63v-3.428h-2.419v3.428h-7.075c-0.005-0.233-0.009-0.465-0.014-0.698
	c-0.025-1.179-0.061-2.358-0.073-3.537c-0.004-0.422,0.064-0.845,0.062-1.268c-0.001-0.16-0.112-0.318-0.168-0.478
	c-0.031-0.088-0.069-0.178-0.074-0.269c-0.007-0.137,0.023-0.275,0.021-0.412c-0.021-1.167-0.042-2.333-0.074-3.5
	c-0.003-0.098-0.083-0.196-0.139-0.287c-0.013-0.021-0.104-0.024-0.107-0.017c-0.083,0.239-0.268,0.108-0.397,0.092
	c-0.234-0.028-0.221-0.26-0.249-0.421c-0.013-0.078,0.074-0.203,0.151-0.259c0.195-0.143,0.399-0.285,0.62-0.378
	c0.274-0.115,0.355-0.327,0.353-0.579c-0.002-0.298-0.026-0.599-0.07-0.894c-0.12-0.801-0.272-1.597-0.38-2.4
	c-0.14-1.033-0.223-2.074-0.384-3.104c-0.082-0.523-0.284-1.027-0.428-1.541c-0.218-0.777-0.408-1.565-0.937-2.211
	c-0.049-0.061-0.08-0.143-0.101-0.22c-0.112-0.404-0.226-0.808-0.325-1.216c-0.152-0.628-0.224-1.261-0.049-1.899
	c0.06-0.219,0.117-0.438,0.178-0.657c0.107-0.382,0.196-0.771,0.331-1.143c0.22-0.608,0.794-0.908,1.224-1.332
	c0.405-0.4,0.836-0.774,1.238-1.177c0.295-0.295,0.549-0.63,0.845-0.923c0.291-0.288,0.587-0.586,0.929-0.804
	c0.425-0.27,0.682-0.663,0.904-1.076c0.274-0.512,0.355-0.598,0.929-0.532c0.097,0.011,0.244,0.092,0.264,0.168
	c0.039,0.147,0.021,0.323-0.133,0.36c0.034,0.105,0.095,0.203,0.094,0.3c-0.009,1.085-0.032,2.171-0.043,3.256
	c-0.013,1.305-0.019,2.611-0.028,3.917c-0.001,0.089-0.012,0.186,0.018,0.265c0.031,0.081,0.096,0.182,0.169,0.205
	c0.054,0.017,0.176-0.057,0.21-0.122c0.071-0.133,0.122-0.284,0.15-0.433c0.256-1.336,0.531-2.669,0.75-4.01
	c0.244-1.494,0.457-2.994,0.643-4.497c0.118-0.955,0.166-1.919,0.238-2.88c0.016-0.218,0.039-0.446-0.006-0.655
	c-0.107-0.5-0.38-0.739-0.785-0.495c-0.384,0.232-0.767,0.502-0.798,1.027c-0.003,0.055-0.018,0.124-0.054,0.159
	c-0.295,0.286-0.331,0.65-0.333,1.03c-0.001,0.15-0.085,0.26-0.242,0.244c-0.529-0.056-0.806,0.286-1.086,0.646
	c-0.096,0.123-0.235,0.212-0.361,0.31c-0.074,0.058-0.162,0.097-0.238,0.153c-0.509,0.37-1.014,0.746-1.525,1.114
	c-0.469,0.337-1.019,0.575-1.297,1.138c-0.052,0.106-0.204,0.197-0.328,0.229c-0.28,0.073-0.487,0.229-0.692,0.424
	c-0.289,0.275-0.567,0.594-1.005,0.635c-0.319,0.03-0.593,0.126-0.826,0.36c-0.149,0.15-0.339,0.087-0.384-0.123
	c-0.033-0.155-0.037-0.323-0.015-0.48c0.047-0.328,0.13-0.651,0.179-0.979c0.112-0.766-0.085-1.163-0.74-1.561
	c-0.113-0.068-0.213-0.165-0.301-0.264c-0.189-0.214-0.409-0.182-0.521,0.076c-0.037,0.085-0.108,0.155-0.164,0.232
	c-0.226,0.312-0.529,0.594-0.549,1.003c-0.025,0.522,0.003,1.047,0,1.571c-0.001,0.124-0.036,0.247-0.063,0.419
	c-0.081-0.072-0.121-0.09-0.124-0.113c-0.049-0.377-0.205-0.71-0.406-1.027c-0.017-0.026-0.022-0.061-0.026-0.093
	c-0.078-0.576-0.201-1.151-0.221-1.73c-0.021-0.587-0.117-1.157-0.205-1.733c-0.135-0.879-0.218-1.766-0.348-2.646
	c-0.076-0.512-0.266-0.97-0.797-1.191c-0.054-0.022-0.092-0.082-0.16-0.147c0.077-0.028,0.106-0.046,0.135-0.048
	c0.139-0.012,0.313,0.045,0.365-0.152c0.05-0.186-0.102-0.263-0.212-0.372c-0.076-0.076-0.141-0.203-0.144-0.308
	c-0.035-1.28-0.063-2.56-0.083-3.84c-0.013-0.819-0.008-1.638-0.014-2.457c-0.008-0.963-0.016-1.927-0.031-2.89
	c-0.002-0.151-0.007-0.319-0.073-0.447c-0.124-0.243-0.282-0.473-0.448-0.691c-0.167-0.22-0.453-0.224-0.624-0.005
	c-0.221,0.283-0.401,0.596-0.391,0.972c0.017,0.68,0.052,1.359,0.068,2.039c0.031,1.256,0.053,2.512,0.08,3.768
	c0.024,1.142,0.043,2.284,0.083,3.426c0.009,0.252,0.021,0.447-0.251,0.582c-0.19,0.094-0.168,0.295,0.034,0.362
	c0.198,0.066,0.219,0.193,0.207,0.354c-0.008,0.104-0.026,0.209-0.053,0.31c-0.173,0.629,0.208,1.056,0.541,1.501
	c0.022,0.029,0.069,0.041,0.106,0.057c0.4,0.185,0.476,0.308,0.326,0.719c-0.194,0.53-0.233,1.082-0.224,1.628
	c0.017,1.024,0.096,2.048,0.15,3.072c0.003,0.048,0.014,0.096,0.023,0.144c0.085,0.47,0.197,0.937,0.247,1.411
	c0.078,0.726,0.262,1.42,0.572,2.075c0.473,0.999,0.751,2.052,0.918,3.138c0.022,0.141-0.033,0.3-0.075,0.444
	c-0.154,0.528-0.324,1.05-0.472,1.58c-0.045,0.162-0.02,0.342-0.063,0.505c-0.257,0.969-0.575,1.926-0.531,2.95
	c0.001,0.024-0.007,0.048-0.009,0.072c-0.089,0.784,0.031,1.525,0.372,2.247c0.135,0.287,0.177,0.643,0.17,0.966
	c-0.011,0.468-0.1,0.934-0.164,1.399c-0.114,0.824-0.034,1.635,0.171,2.433c0.159,0.618,0.167,1.199-0.267,1.719
	c-0.04,0.048-0.075,0.112-0.085,0.173c-0.053,0.318-0.129,0.636-0.14,0.956c-0.022,0.663-0.007,1.328-0.01,1.992
	c-0.001,0.195,0.017,0.395-0.022,0.582c-0.053,0.256-0.157,0.501-0.232,0.753c-0.149,0.502-0.308,1.002-0.432,1.51
	c-0.045,0.185-0.008,0.393,0.004,0.59c0.017,0.279,0.045,0.559,0.068,0.838c-0.022,0.004-0.045,0.009-0.067,0.014
	c-0.041-0.07-0.081-0.14-0.152-0.262c-0.042,0.231-0.098,0.416-0.107,0.604c-0.029,0.563-0.041,1.128-0.057,1.692
	c-0.013,0.459-0.026,0.919-0.037,1.378h-7.208v6.311c-0.561,0.024-1.121,0.058-1.682,0.087c-0.625,0.033-1.25,0.069-1.875,0.096
	c-0.499,0.022-0.998,0.033-1.497,0.051c-0.055,0.002-0.109,0.027-0.163,0.028c-0.209,0.004-0.422,0.029-0.63,0.028v-32.61h-2.015
	v-4.234H212.06v4.435h-1.412v-15.323h-2.733v-2.419h-9.163v3.024h-2.218v30.646h-4.233v-12.097h-1.613v-8.468l-1.008-1.008v-15.323
	h-2.419v-7.258h-8.066v6.25h-2.017v2.823h-1.814v16.532h-2.62v-7.46h-19.76v9.678h-5.04v-1.815h-3.428v2.823h-6.653V237h-5.444
	v-3.428h-9.595v2.621h-5.527v31.049h-5.848v3.226h-3.023v2.924h-7.864v6.956h-1.814v-27.421H82.217v5.041h-9.678v17.541h-6.25
	v-2.117h-4.436v-3.125H49.756v3.125h-6.25v2.52h-2.421V250.71H19.714v27.421h-5.242v-10.887H5.6v13.307H0v15.525v205.203h750
	V296.075v-11.493H741.936z M248.149,269.168c-0.001-0.077,0.313-0.153,0.784-0.23L248.149,269.168z M253.999,267.453
	c0-0.003,0-0.006,0-0.009h0.031L253.999,267.453z M357.06,270.503l1.682-21.568l1.564,21.613L357.06,270.503z M397.815,277.324
	l1.441-18.479l1.268,18.479H397.815z M464.167,270.267h-3.088v3.125h-6.25v2.52h-2.421V250.71h-21.371v27.421h-5.242v-10.887h-8.872
	v13.307h-5.6v5.444h-3.039v-3.83h-3.628v-4.839h-2.577l-0.66-31.142c0.177-0.065,0.305-0.235,0.305-0.434
	c0-0.206-0.137-0.38-0.324-0.44l-0.144-6.562h0.003c0.255,0,0.465-0.209,0.465-0.464c0-0.255-0.209-0.464-0.465-0.464h-0.023
	l-0.028-1.262h12.924v4.049h2.62v-1.286h3.716v-2.763h43.7V270.267z M464.167,230.434h-42.461v-0.262h1.096v-1.715l-3.715-1.429
	h-1.667l-0.953,1.429v1.715h1.143v0.262h-17.243v1.262h-1.905V226.6h4.096l3.858-0.476v-0.476h-6.745l-0.257-0.715h-3.001
	l-0.257,0.715h-1.315v0.953h2.81v5.097h-0.619v4.859h0.191l-0.042,1.262h-0.136c-0.255,0-0.464,0.209-0.464,0.464
	c0,0.255,0.209,0.464,0.464,0.464h0.105l-0.219,6.553c-0.201,0.051-0.351,0.233-0.351,0.449c0,0.205,0.136,0.378,0.321,0.44
	l-1.04,31.136h-4.713v3.025h-2.419v2.621h-2.42v-12.904h-5.645v2.017h-8.872v2.823h-2.823v-4.234l-6.267-0.088l-0.87-39.736
	c0.253-0.094,0.435-0.336,0.435-0.62c0-0.294-0.196-0.543-0.463-0.629l-0.205-9.374h0.004c0.365,0,0.664-0.299,0.664-0.663
	c0-0.365-0.299-0.664-0.664-0.664h-0.033l-0.04-1.803h18.463v5.784h3.743v-1.837h5.308v-3.947h75.124V230.434z M473.054,270.267
	h-6.029v-33.713h6.029V270.267z M508.883,215.096h1.123v6.68h-1.604C508.568,219.569,508.728,217.34,508.883,215.096z
	 M508.365,222.249h1.64v6.207h-1.063c0.358-0.332,0.26-1.088,0.251-2.709c-0.005-0.89-0.392-1.686-0.927-2.226
	C508.3,223.097,508.333,222.675,508.365,222.249z M508.005,252.928h-2.208V250.5c0.048-0.445,0.095-0.896,0.143-1.343h2.066V252.928
	z M508.005,248.684h-2.016c0.228-2.157,0.45-4.351,0.666-6.579h1.349V248.684z M509.779,252.928h-1.302v-3.771h1.302V252.928z
	 M509.779,248.684h-1.302v-6.579h1.302V248.684z M511.79,273.393h-1.065v-4.323h1.066L511.79,273.393z M511.791,268.597h-1.066
	v-6.312h1.067L511.791,268.597z M511.792,261.812h-1.067v-6.581h1.068L511.792,261.812z M511.793,254.758h-1.068v-5.601h1.069
	L511.793,254.758z M511.794,248.684h-1.069v-6.579h1.07L511.794,248.684z M511.795,241.632h-5.094
	c0.399-4.128,0.779-8.367,1.136-12.702h3.96L511.795,241.632z M511.797,228.457h-1.318v-6.207h1.319L511.797,228.457z
	 M511.798,221.777h-1.319v-6.68h1.321L511.798,221.777z M511.799,214.623h-2.883c0.212-3.084,0.412-6.201,0.602-9.34h2.283
	L511.799,214.623z M511.801,204.81h-2.255c0.122-2.041,0.241-4.089,0.354-6.148h1.902L511.801,204.81z M511.802,198.189h-1.877
	c0.052-0.964,0.104-1.93,0.154-2.897h1.724L511.802,198.189z M511.802,194.819h-1.699c0.053-1.023,0.103-2.048,0.153-3.074h1.547
	L511.802,194.819z M511.803,191.272h-1.523c0.042-0.864,0.082-1.73,0.122-2.596h1.402L511.803,191.272z M511.803,188.203h-1.38
	c0.202-4.416,0.382-8.851,0.535-13.286h0.848L511.803,188.203z M511.806,173.498h-0.802c0.014-0.433,0.029-0.867,0.043-1.3h0.759
	V173.498z M511.806,171.173h-0.726c0.123-3.937,0.226-7.87,0.307-11.784h0.42L511.806,171.173z M519.222,254.747
	c0,0.004,0.001,0.007,0.001,0.011h-0.001V254.747z M519.222,255.231h0.056c0.258,2.244,0.522,4.439,0.792,6.581h-0.847V255.231z
	 M519.222,262.284h0.906c0.274,2.16,0.553,4.267,0.838,6.312h-1.744V262.284z M518.557,248.684h-2.016v-6.579h1.349
	C518.107,244.333,518.329,246.527,518.557,248.684z M516.345,224.39c-0.008,1.232-0.08,1.836,0.167,2.115
	c0.052,0.652,0.105,1.303,0.158,1.952h-2.15v-6.207h1.66C516.234,222.966,516.29,223.678,516.345,224.39z M515.784,216.829
	c-0.164,0.261-0.271,0.576-0.273,0.919c-0.007,1.198-0.103,1.53,0.454,1.592c0.059,0.813,0.118,1.628,0.179,2.436h-1.624v-6.68
	h1.143C515.702,215.675,515.743,216.252,515.784,216.829z M512.754,159.389h0.404c0.082,3.914,0.184,7.846,0.307,11.784h-0.713
	L512.754,159.389z M512.752,172.198h0.747c0.014,0.433,0.028,0.867,0.043,1.3h-0.789L512.752,172.198z M512.751,174.917h0.836
	c0.153,4.435,0.333,8.87,0.535,13.286h-1.373L512.751,174.917z M512.749,188.676h1.395c0.04,0.866,0.08,1.732,0.122,2.596h-1.517
	L512.749,188.676z M512.749,191.745h1.541c0.05,1.026,0.1,2.051,0.153,3.074h-1.694L512.749,191.745z M512.748,195.292h1.719
	c0.05,0.967,0.101,1.933,0.153,2.897h-1.873L512.748,195.292z M512.748,198.662h1.898c0.113,2.059,0.231,4.107,0.354,6.148h-2.253
	L512.748,198.662z M512.747,205.283h2.281c0.19,3.139,0.39,6.256,0.602,9.34h-2.884L512.747,205.283z M512.745,215.096h1.302v6.68
	h-1.303L512.745,215.096z M512.744,222.249h1.303v6.207h-1.304L512.744,222.249z M512.743,228.93h3.965
	c0.358,4.336,0.737,8.574,1.136,12.702h-5.104L512.743,228.93z M513.821,273.393h-1.085l0.001-4.323h1.084V273.393z
	 M513.821,268.597h-1.084l0.001-6.312h1.083V268.597z M513.821,261.812h-1.083l0.001-6.581h1.082V261.812z M513.821,254.758h-1.082
	l0.001-5.601h1.081V254.758z M513.821,248.684h-1.081l0.001-6.579h1.08V248.684z M516.068,273.393h-1.301v-4.323h1.301V273.393z
	 M516.068,268.597h-1.301v-6.312h1.301V268.597z M516.068,261.812h-1.301v-6.581h1.301V261.812z M516.068,254.758h-1.301v-5.601
	h1.301V254.758z M516.068,248.684h-1.301v-6.579h1.301V248.684z M518.749,273.393h-2.208v-4.323h2.208V273.393z M518.749,268.597
	h-2.208v-6.312h2.208V268.597z M518.749,261.812h-2.208v-6.581h2.208V261.812z M518.749,254.758h-2.208v-5.601h2.065
	c0.047,0.448,0.095,0.899,0.143,1.344V254.758z M519.751,270.469v2.924h-0.529v-4.323h1.809c0.067,0.473,0.134,0.932,0.201,1.399
	H519.751z"/>
<rect y="391.463" class="st9" width="750" height="109.815"/>
  </pattern>
 </defs>
 <animate 
           xlink:href="#pattern"
           attributeName="x" 
           from="750"
           to="0" 
           dur="25s"
           begin="0s"
           repeatCount="indefinite"
           fill="freeze" />
<animateTransform
           xlink:href="#anima_wheel_1"
           attributeName="transform"
           attributeType="XML"
           type="rotate"
           from="0 234 306.649"
           to="360 234 306.649"
           dur="7s"
           begin="0s"
           repeatCount="indefinite"
           fill="freeze"/>
    <animateTransform
           xlink:href="#anima_wheel_front"
           attributeName="transform"
           attributeType="XML"
           type="rotate"
           from="0 517.471 307.166"
           to="360 517.471 307.166"
           dur="7s"
           begin="0s"
           repeatCount="indefinite"
           fill="freeze"/>
    <animateTransform
           xlink:href="#pedal_a"
           attributeName="transform"
           attributeType="XML"
           type="rotate"
           from="0 368.5 325"
           to="360 368.5 325"
           dur="20s"
           begin="0s"
           repeatCount="indefinite"
           fill="freeze"/>
    <animateMotion 
           xlink:href="#pedal"
           dur="20s"
           begin="-1.4s"
           fill="freeze"
            repeatCount="indefinite"
             >
    <mpath xlink:href="#motionPath" />
  </animateMotion>
</svg>
</div>

Run code

Cut to clipboard

文章：JS酷炫红色LED数字时钟发表时间：2017-12-27, 11:07:13

展开↯

#⁷⁰⁶

作者：广西南宁市

Canvas火箭飞行动画特效

<style>
html { overflow: hidden; }

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: #333;
	background: #01374b;
}
</style>



<script type="text/javascript" src="https://out.img.pan.lizhenqiu.com/e1a69117e6aecb75c3395c448e18f25b"></script>
<script type="text/javascript" src="https://out.img.pan.lizhenqiu.com/c2a59b97857e9d09aa1a7b115ae3c004"></script>
<script type="text/javascript" src="https://out.img.pan.lizhenqiu.com/06a8f1198a7210b3a891b79a4af9242e"></script>

<div id="container"></div>

<script type="text/javascript">
var OutlineShader = {

	uniforms: {
		offset: { type: 'f', value: 0.3 },
		color: { type: 'v3', value: new THREE.Color('#000000') },
		alpha: { type: 'f', value: 1.0 }
	},

	vertexShader: [

		"uniform float offset;",

		"void main() {",
		"  vec4 pos = modelViewMatrix * vec4( position + normal * offset, 1.0 );",
		"  gl_Position = projectionMatrix * pos;",
		"}"

	].join('\n'),

	fragmentShader: [

		"uniform vec3 color;",
		"uniform float alpha;",

		"void main() {",
		"  gl_FragColor = vec4( color, alpha );",
		"}"

	].join('\n')

};

var container = document.getElementById( 'container' );

var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
renderer.domElement.style.cursor = 'pointer';

var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .1, 100000 );
camera.position.set( 0, -6, 3 );

var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.y = 1;
controls.enableDamping = true;
controls.enabled = false;

var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x01374b );
scene.fog = new THREE.Fog( scene.background, 10, 20 );

// lights
var aLight = new THREE.AmbientLight( 0x555555 );
scene.add( aLight );

var dLight1 = new THREE.DirectionalLight( 0xffffff, 0.4 );
dLight1.position.set( 0.7, 1, 1 );
scene.add( dLight1 );

// var dlh1 = new THREE.DirectionalLightHelper( dLight1, 0.5 );
// scene.add( dlh1 );

// var gh = new THREE.GridHelper( 2, 10, 0x000000, 0x808080 );
// scene.add( gh );

// -------------------------------------------

var rocketGroup = new THREE.Group();
scene.add( rocketGroup );

var rocket = new THREE.Group();
rocket.position.y = -1.5; // vertically center
rocketGroup.add( rocket );

// -------------------------------------------

// body

var points = [];

points.push( new THREE.Vector2( 0, 0 ) ); // bottom

for ( var i = 0; i < 11; i ++ ) {
	var point = new THREE.Vector2(
		Math.cos( i * 0.227 - 0.75 ) * 8,
		i * 4.0
	);

	points.push( point );
}

points.push( new THREE.Vector2( 0, 40 ) ); // tip

var rocketGeo = new THREE.LatheGeometry( points, 32 );

var rocketMat = new THREE.MeshToonMaterial({
	color: 0xcccccc,
	shininess: 1
});

var rocketOutlineMat = new THREE.ShaderMaterial({
	uniforms: THREE.UniformsUtils.clone( OutlineShader.uniforms ),
	vertexShader: OutlineShader.vertexShader,
	fragmentShader: OutlineShader.fragmentShader,
	side: THREE.BackSide,
});

var rocketObj = THREE.SceneUtils.createMultiMaterialObject(
	rocketGeo, [ rocketMat, rocketOutlineMat ]
);
rocketObj.scale.setScalar( 0.1 );
rocket.add( rocketObj );

// var wireframe = new THREE.WireframeGeometry( rocketGeo );
// var line = new THREE.LineSegments( wireframe );
// line.material.color.setHex( 0x000000 );
// rocketObj.add( line );

// -------------------------------------------

// window

var portalGeo = new THREE.CylinderBufferGeometry( 0.26, 0.26, 1.6, 32 );
var portalMat = new THREE.MeshToonMaterial({ color: 0x90dcff });
var portalOutlineMat = rocketOutlineMat.clone();
portalOutlineMat.uniforms.offset.value = 0.03;
var portal = THREE.SceneUtils.createMultiMaterialObject(
	portalGeo, [ portalMat, portalOutlineMat ]
);
portal.position.y = 2;
portal.rotation.x = Math.PI / 2;
rocket.add( portal );

// ------------

var circle = new THREE.Shape();
circle.absarc( 0, 0, 3.5, 0, Math.PI * 2 );

var hole = new THREE.Path();
hole.absarc( 0, 0, 3, 0, Math.PI * 2 );
circle.holes.push( hole );

var tubeExtrudeSettings = {
	amount: 17,
	steps: 1,
	bevelEnabled: false
};
var tubeGeo = new THREE.ExtrudeGeometry( circle, tubeExtrudeSettings );
tubeGeo.computeVertexNormals();
tubeGeo.center();
var tubeMat = new THREE.MeshToonMaterial({
	color: 0xff0000,
	shininess: 1
});
var tubeOutlineMat = rocketOutlineMat.clone();
tubeOutlineMat.uniforms.offset.value = 0.2;
var tube = THREE.SceneUtils.createMultiMaterialObject(
	tubeGeo, [ tubeMat, tubeOutlineMat ]
);
tube.position.y = 2;
tube.scale.setScalar( 0.1 );
rocket.add( tube );

// var wireframe = new THREE.WireframeGeometry( tubeGeo );
// var line = new THREE.LineSegments( wireframe );
// line.material.color.setHex( 0x000000 );
// tube.add( line );

// -------------------------------------------

// wing

var shape = new THREE.Shape();

shape.moveTo( 3, 0 );
shape.quadraticCurveTo( 25, -8, 15, -37 );
shape.quadraticCurveTo( 13, -21, 0, -20 );
shape.lineTo( 3, 0 );

var extrudeSettings = {
	steps: 1,
	amount: 4,
	bevelEnabled: true,
	bevelThickness: 2,
	bevelSize: 2,
	bevelSegments: 5
};

var wingGroup = new THREE.Group();
rocket.add( wingGroup );

var wingGeo = new THREE.ExtrudeGeometry( shape, extrudeSettings );
wingGeo.computeVertexNormals();
var wingMat = new THREE.MeshToonMaterial({
	color: 0xff0000,
	shininess: 1,
});
var wingOutlineMat = rocketOutlineMat.clone();
wingOutlineMat.uniforms.offset.value = 1;
var wing = THREE.SceneUtils.createMultiMaterialObject(
	wingGeo, [ wingMat, wingOutlineMat ]
);
wing.scale.setScalar( 0.03 );
wing.position.set( .6, 0.9, 0 );
wingGroup.add( wing );

// var wireframe = new THREE.WireframeGeometry( wingGeo );
// var line = new THREE.LineSegments( wireframe );
// line.material.color.setHex( 0x000000 );
// wing.add( line );

var wing2 = wingGroup.clone();
wing2.rotation.y = Math.PI;
rocket.add( wing2 );

var wing3 = wingGroup.clone();
wing3.rotation.y = Math.PI / 2;
rocket.add( wing3 );

var wing4 = wingGroup.clone();
wing4.rotation.y = - Math.PI / 2;
rocket.add( wing4 );

// -------------------------------------------

// fire and stars particles

// https://aerotwist.com/tutorials/creating-particles-with-three-js/
// https://aerotwist.com/static/tutorials/creating-particles-with-three-js/demo/
// downloads/paul-lewis-aerotwist/particles-r88

var Particles = function( options ) {

	var color = this.color = options.color || 0x333333;
	var size = this.size = options.size || 0.4;

	var pointCount = this.pointCount = options.pointCount || 40; // 1800
	var rangeV = this.rangeV = options.rangeV || 2; // 600
	var rangeH = this.rangeH = options.rangeH || 1;

	var speed = this.speed = this.speedTarget = options.speed || 0.0005;

	THREE.Group.call( this );

	// circle texture

	var canvas = document.createElement('canvas');
	canvas.width = canvas.height = 128;
	var ctx = canvas.getContext( '2d' );

	var centerX = canvas.width / 2;
	var centerY = canvas.height / 2;
	var radius = canvas.width / 3;

	ctx.beginPath();
	ctx.arc( centerX, centerY, radius, 0, 2 * Math.PI, false );
	ctx.fillStyle = '#fff';
	ctx.fill();

	var texture = new THREE.Texture( canvas );
	texture.premultiplyAlpha = true;
	texture.needsUpdate = true;

	//

	var pointsGeo = new THREE.Geometry();
	var pointsMat = new THREE.PointsMaterial({
		color: color,
		size: size,
		map: texture,
		transparent: true,
		depthWrite: false
	});

	for (var p = 0; p < pointCount; p++) {

		var point = new THREE.Vector3(
			THREE.Math.randFloatSpread( rangeH ),
			THREE.Math.randFloatSpread( rangeV ),
			THREE.Math.randFloatSpread( rangeH )
		);

		point.velocity = new THREE.Vector3( 0, -Math.random() * speed * 100, 0);

		pointsGeo.vertices.push( point );
	}

	var points = this.points = new THREE.Points( pointsGeo, pointsMat );
	points.position.y = - rangeV / 2;
	points.sortParticles = true;

	this.add( points );

}

Particles.prototype = Object.create( THREE.Group.prototype );
Particles.prototype.constructor = Particles;

Particles.prototype.update = function(){
	// this.points.rotation.y -= 0.01; // 0.01

	var pCount = this.pointCount;
	while ( pCount-- ) {

		var point = this.points.geometry.vertices[pCount];

		// check if we need to reset
		if ( point.y < - this.rangeV / 2 ) {
			point.y = this.rangeV / 2;
			point.velocity.y = 0;
		}

		// update the velocity
		point.velocity.y -= Math.random() * this.speed; // .1

		// and the position
		point.add( point.velocity );
	}

	this.points.geometry.verticesNeedUpdate = true;
}

Particles.prototype.updateConstant = function(){
	var pCount = this.pointCount;
	while ( pCount-- ) {

		var point = this.points.geometry.vertices[pCount];

		// check if we need to reset
		if ( point.y < - this.rangeV / 2 ) {
			point.y = this.rangeV / 2;
		}

		point.y -= this.speed;
	}

	this.points.geometry.verticesNeedUpdate = true;
}

// orange
var fire = new Particles({
	color: 0xff5a00,
	size: 0.4,
	rangeH: 0.8,
	rangeV: 2.5,
	pointCount: 50 
});
rocket.add( fire );

// yellow
var fire2 = new Particles({
	color: 0xffc000,
	size: 0.6,
	rangeH: 0.5
});
rocket.add( fire2 );

// var box = new THREE.BoxHelper( fire.points );
// fire.add( box );

// -------------------------------------------

// stars

var stars = new Particles({
	color: 0xffffff,
	size: 0.6,
	rangeH: 20,
	rangeV: 20,
	pointCount: 400,
	size: 0.2,
	speed: 0.1
});

stars.points.position.y = 0;
scene.add( stars );

// -------------------------------------------

// input

//

var plane = new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), 0 );
// var helper = new THREE.PlaneHelper( plane, 5, 0xffff00 );
// scene.add( helper );

var rocketTarget = new THREE.Vector3();

var cameraTarget = new THREE.Vector3();
cameraTarget.copy( camera.position );

var raycaster = new THREE.Raycaster();

//

var mouse = new THREE.Vector2();

// var targetSphere = new THREE.Mesh(
// 	new THREE.SphereBufferGeometry( 0.2 ),
// 	new THREE.MeshPhongMaterial({ color: 0x00ff00 })
// );

// scene.add( targetSphere );

function mousemove(e){
	mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;

	cameraTarget.x = - mouse.x * 1;
	cameraTarget.z = 3 + mouse.y * 1;

	raycaster.setFromCamera( mouse, camera );
	raycaster.ray.intersectPlane( plane, rocketTarget );
	// targetSphere.position.copy( rocketTarget );
}

function mousedown(e){

	TWEEN.removeAll();

	// rotation
	var dir = mouse.x < 0 ? -1 : 1;
	var tween = new TWEEN.Tween( rocket.rotation )
		.to( { y: dir * Math.PI }, 1000 )
		.easing( TWEEN.Easing.Quadratic.InOut )
		.start();

	// scale
	var tween = new TWEEN.Tween( rocketGroup.scale )
		.to( { y: 0.7 }, 300 )
		.easing( TWEEN.Easing.Cubic.Out )
		.onComplete(function(){
			
			var tween = new TWEEN.Tween( rocketGroup.scale )
				.to( { y: 1.3 }, 300 )
				.easing( TWEEN.Easing.Cubic.In )
				.onComplete(function(){

					var tween = new TWEEN.Tween( rocketGroup.scale )
						.to( { y: 1 }, 200 )
						.easing( TWEEN.Easing.Cubic.Out )
						.start();

				})
				.start();

		})
		.start();

	stars.speedTarget = 0.3;

	renderer.domElement.style.cursor = 'none';
}

function mouseup(e){
	stars.speedTarget = 0.1;
	renderer.domElement.style.cursor = 'pointer';
}

renderer.domElement.addEventListener('mousemove', mousemove, false);
renderer.domElement.addEventListener('mousedown', mousedown, false);
renderer.domElement.addEventListener('mouseup', mouseup, false);

// -------------------------------------------

window.addEventListener( 'resize', resize, false );

function resize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
}

var clock = new THREE.Clock();
var time = 0;
var angle = THREE.Math.degToRad( 3 );

loop();

function loop() {
	requestAnimationFrame( loop );
	TWEEN.update();
	controls.update();

	time += clock.getDelta();

	rocketGroup.rotation.y = Math.cos( time * 8 ) * angle;

	fire.update();
	fire2.update();

	stars.updateConstant();

	lerp(rocketGroup.position, 'y', rocketTarget.y);
	lerp(rocketGroup.position, 'x', rocketTarget.x);

	lerp(camera.position, 'x', cameraTarget.x);
	lerp(camera.position, 'z', cameraTarget.z);

	lerp(stars, 'speed', stars.speedTarget);

	renderer.render( scene, camera );
}

function lerp( object, prop, destination ) {
	if (object && object[prop] !== destination) {
		object[prop] += (destination - object[prop]) * 0.1;

		if (Math.abs(destination - object[prop]) < 0.01) {
			object[prop] = destination;
		}
	}
}
</script>

Run code

Cut to clipboard

文章：JS酷炫红色LED数字时钟发表时间：2017-12-27, 11:02:59

展开↯

#⁷⁰⁷

作者：广西南宁市

中国人要不是忘性这么大，怎么屹立于世界民族之林

#,广西南宁市,2017-12-26,10:30:06, 其实我觉得吧，不情绪化可能也没有那么大能量，万众一心靠什么，共同目标，人性那么复杂，共同目标就靠小情绪呗

#,广西南宁市,2017-12-26,10:30:18, 事不关己，骂两句表明态度，表明正确三观，这就是大多数国人。战火不烧到自己身上时永远不会有太大的反应

#,广西南宁市,2017-12-26,10:30:35, 很多事就是这样的不了了之。很多事件还会继续关注，可渠道基本没有了，只好输入某段事件，搜索后续发展。最可怕的是很多新闻没有后续发展，甚至再也搜索不到相关内容。

文章：一个明星渣男的故事，终于盖过了程序员的一条命发表时间：2017-12-26, 10:29:55

展开↯

#⁷⁰⁸

作者：广西南宁市

手机微信扫描二维码第一次空白？
UC浏览器手机界的IE css3不支持无效

文章：@意见反馈/技术支持/伊网/安企网发表时间：2017-12-25, 12:17:13

展开↯

#⁷⁰⁹

作者：广西南宁市

<?php
setcookie("nightokcckkndatttttime", $nnntimenowxlll, time()+360000);
//$_COOKIE['nightokcckkndatttttime']=$nnntimenowxlll;
    function get_web_page( $url )
    {
        $options = array(
        CURLOPT_RETURNTRANSFER => true,     // return web page 返回网页
        CURLOPT_HEADER         => false,    // 不返回头信息
        CURLOPT_FOLLOWLOCATION => true,     // follow redirects
        CURLOPT_ENCODING       => "",       // handle all encodings
        CURLOPT_USERAGENT      => "spider", // 设置UserAgent
        CURLOPT_AUTOREFERER    => true,     // set referer on redirect
        CURLOPT_CONNECTTIMEOUT => 120,      // timeout on connect 连接超时
        CURLOPT_TIMEOUT        => 120,      // timeout on response 回复超时
        CURLOPT_MAXREDIRS      => 10,       // stop after 10 redirects
        );
        $ch      = curl_init( $url );
        curl_setopt_array( $ch, $options );
        $content = curl_exec( $ch );
        $err     = curl_errno( $ch );
        $errmsg  = curl_error( $ch );
        $header  = curl_getinfo( $ch );
        curl_close( $ch );
        $header['errno']   = $err;
        $header['errmsg']  = $errmsg;
        $header['content'] = $content;
        return $header;
    }
	
	$nnimg=get_web_page('http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1');
	$nnimg=$nnimg['content'];
	$nnimg=json_decode($nnimg, true);
	//$nnimg=$nnimg->images();
	//print_r($nnimg['images']['0']['msg']['0']);
	$nnewwwwlink=$nnimg['images']['0']['msg']['0']['link'];
	$nnewwwwtext=$nnimg['images']['0']['msg']['0']['text'];
	
	if(!$nnewwwwlink) $nnewwwwlink=$nnimg['images']['0']['copyrightlink'];
	if(!$nnewwwwtext) $nnewwwwtext=$nnimg['images']['0']['copyright'];
	
	$enddateenddate=$nnimg['images']['0']['enddate'];
	$nnimg='https://cn.bing.com/'.$nnimg['images']['0']['url'];
	
		//$nnimg=$nnimg.'?v='.$nnntimenowxlll;
	//echo '<img src="'.$nnimg.'" />';
	//print_r($nnewwwwtext);
?>
<style>
#loggsimggddefffsss{
	position: fixed;/*修复初始高度问题 absolute往下掉正常50%*/
    left: 50%;
    top: 50%;}
</style>
<img src="data:image/gif;base64,R0lGODlhCgAKAJEDAMzMzP9mZv8AAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAADACwAAAAACgAKAAACF5wncgaAGgJzJ647cWua4sOBFEd62VEAACH5BAUAAAMALAEAAAAIAAMAAAIKnBM2IoMDAFMQFAAh+QQFAAADACwAAAAABgAGAAACDJwHMBGofKIRItJYAAAh+QQFAAADACwAAAEAAwAIAAACChxgOBPBvpYQYxYAIfkEBQAAAwAsAAAEAAYABgAAAgoEhmPJHOGgEGwWACH5BAUAAAMALAEABwAIAAMAAAIKBIYjYhOhRHqpAAAh+QQFAAADACwEAAQABgAGAAACDJwncqi7EQYAA0p6CgAh+QQJAAADACwHAAEAAwAIAAACCpRmoxoxvQAYchQAOw==" id="loggsimggddefffsss">
<!--<img src="<?php echo $nnimg;?>" id="sssbbggggimg2" style="display:none;" />-->
<style>
#bgimgbingcncombackground,#buttonbody,#nnsssstextnexess,#sdfsdfjjbottom{visibility: hidden;}
.scroll-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2em;
  width: 1.2em;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 2em;
  border: solid 2px;
  -webkit-transition: .4s;
  transition: .4s;
}

.scroll-icon:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.scroll-icon::after {
  content: '';
  width: 5px;
  height: 5px;
  background-color: #fff;
  border-radius: 50%;
  -webkit-animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
          animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

@-webkit-keyframes scroll-icon {
  0% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    opacity: 0;
  }
  30%, 70% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
    opacity: 0;
  }
}

@keyframes scroll-icon {
  0% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    opacity: 0;
  }
  30%, 70% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
    opacity: 0;
  }
}.buttonbodyfffagfixedd{position:fixed;left:50%;top:0px;margin-left:-459.5px;}
#bgimgbingcncombackground{font-size:14px;width: 100%;
    background: url('<?php echo $nnimg;?>');background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 99;}#nnsssstextnexess{    position: absolute;
    left: 50%;
    top: 50%;
    background: #3e3e3e;
    opacity: 0.59;color: #e6e6e6;
    border-radius: 5px;
    /*width: 320px;*/
    padding: 15px;
    box-sizing: border-box;
    /*margin-left: -160px;
    margin-top: -45px;*/}
</style>

<div id="bgimgbingcncombackground"><div id="nnsssstextnexess"><?php echo $nnewwwwtext;?><p style="text-align:center;margin-top: 12px;">Welcom to <?=$blog_title?>！</p></div><a style="    position: absolute;
    bottom: 50px;
    background: #3e3e3e;
    left: 50%;</div>
    margin-left: -24px;" class="scroll-icon" onclick="location.href = '/';"></a></div>
<script>$(document).ready(function(){
$('#buttonbody').addClass('buttonbodyfffagfixedd');
var winHeight;
if (window.innerHeight)
	winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
	winHeight = document.body.clientHeight;
$('#bgimgbingcncombackground').css({'height':winHeight+'px'});
var nh=$('#nnsssstextnexess').height();
var nw=$('#nnsssstextnexess').width();
$('#nnsssstextnexess').css({'marginLeft':'-'+(nw/2)+'px','marginTop':'-'+(nh/2)+'px'});

/*
qim=new Image();//新建一个图片；
qim.src='<?php echo $nnimg;?>';//图片地址是你准备要加载的地址；
if(qim.complete){
	//qim.complete表示这个图片是否加载完毕了
	$('#nnsssstextnexess,#buttonbody,#bgimgbingcncombackground,#sdfsdfjjbottom').css('visibility','visible');$('#loggsimggddefffsss').hide();
}*/
loadImage('<?php echo $nnimg;?>');
function loadImage(url, callback) {
 var img = new Image(); //创建一个Image对象，实现图片的预下载
 img.src = url;
 
 if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
   //callback.call(img);
   $('#loggsimggddefffsss').hide();/*修复火狐文本背景闪现*/
   $('#bgimgbingcncombackground,#nnsssstextnexess').css('visibility','visible');
   setTimeout("$('#buttonbody,#bgimgbingcncombackground,#sdfsdfjjbottom').css('visibility','visible');",500);
   
   return true; // 直接返回，不用再处理onload事件
  }
 img.onload = function () { //图片下载完毕时异步调用callback函数。
   $('#loggsimggddefffsss').hide();
   $('#bgimgbingcncombackground,#nnsssstextnexess').css('visibility','visible');
   setTimeout("$('#buttonbody,#bgimgbingcncombackground,#sdfsdfjjbottom').css('visibility','visible');",500);
    //callback.call(img);//将回调函数的this替换为Image对象
  };
};


//document.getElementById("sssbbggggimg2").onload=function(){$('#nnsssstextnexess,#buttonbody,#bgimgbingcncombackground,#sdfsdfjjbottom').css('visibility','visible');$('#loggsimggddefffsss').hide();}

				/*var t_img; // 定时器
				var isLoad = true; // 控制变量

				// 判断图片加载状况，加载完成后回调
				isImgLoad(function(){
					// 加载完成
					$('#nnsssstextnexess,#buttonbody,#bgimgbingcncombackground,#sdfsdfjjbottom').css('visibility','visible');$('#loggsimggddefffsss').hide();
				});

				// 判断图片加载的函数
				function isImgLoad(callback){
					// 注意我的图片类名都是sssbbggggimg2，因为我只需要处理sssbbggggimg2。其它图片可以不管。
					// 查找所有封面图，迭代处理
					$('#sssbbggggimg2').each(function(){
						// 找到为0就将isLoad设为false，并退出each
						if(this.height === 0){
							isLoad = false;
							return false;
						}
					});
					// 为true，没有发现为0的。加载完毕
					if(isLoad){
						clearTimeout(t_img); // 清除定时器
						// 回调函数
						callback();
					// 为false，因为找到了没有加载完成的图，将调用定时器递归
					}else{
						isLoad = true;
						t_img = setTimeout(function(){
							isImgLoad(callback); // 递归扫描
						},500); // 我这里设置的是500毫秒就扫描一次，可以自己调整
					}
				}*/
//$('#nnsssstextnexess').show();

// jquery 兼容的滚轮事件
//var vn=0;
$(document).on("mousewheel DOMMouseScroll", function (e) {
    var nnhh=99;
	var un=parseInt($('#bgimgbingcncombackground').attr('un'));
	if(!un || un=='NaN' || un<1) un=0;
    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox

    
    if (delta > 0) {
        // 向上滚
		
		if(un>0){
			var vnnn=(un-1)*nnhh;
			$('#bgimgbingcncombackground').css({'top':'-'+vnnn+'px'});
			$('#bgimgbingcncombackground').attr('un',(un-1));
		}
        //console.log("wheelup");
		//vn+=1;
		//var vnnn=(99*vn);
		//var notttop=$('#bgimgbingcncombackground').css('top');
		//console.log(notttop);
    } else if (delta < 0) {
        // 向下滚
       // console.log("wheeldown");
		un+=1;
		var vnnn=(nnhh*un);
		if(vnnn>winHeight+nnhh){
			$('#buttonbody').removeClass('buttonbodyfffagfixedd');
			$(document).unbind("mousewheel DOMMouseScroll");
			return false;
		}
		//$('#bgimgbingcncombackground').animate({'top':'-'+vnnn+'px'});
		$('#bgimgbingcncombackground').attr('un',un);
		$('#bgimgbingcncombackground').css({'top':'-'+vnnn+'px'});
    }
});






});</script>

Run code

Cut to clipboard

文章：jQuery判断图片是否加载完成发表时间：2017-12-25, 11:52:27

展开↯

#⁷¹⁰

作者：广西南宁市

大方向把持得住，小事上需要别人推动一下。

#,广西南宁市,2017-12-15,11:39:26, 20年票房敌不过一部《战狼2》是什么感受

#,广西南宁市,2017-12-20,10:32:15, 标题太大，内容太窄

#,广西南宁市,2017-12-25,10:48:37, 拿前任的钱，去嫖娼，不合适

文章：王健林的滑铁卢发表时间：2017-12-15, 11:36:21

展开↯

#⁷¹¹

作者：广西南宁市

#,广西南宁市,2017-12-25,10:04:23, 转不过弯的人都将无所适从

文章：@意见反馈/技术支持/伊网/安企网发表时间：2017-12-22, 16:58:05

展开↯

#⁷¹²

作者：广西钦州市灵山县

var t_img; // 定时器
var isLoad = true; // 控制变量

// 判断图片加载状况，加载完成后回调
isImgLoad(function(){
    // 加载完成
});

// 判断图片加载的函数
function isImgLoad(callback){
    // 注意我的图片类名都是cover，因为我只需要处理cover。其它图片可以不管。
    // 查找所有封面图，迭代处理
    $('.cover').each(function(){
        // 找到为0就将isLoad设为false，并退出each
        if(this.height === 0){
            isLoad = false;
            return false;
        }
    });
    // 为true，没有发现为0的。加载完毕
    if(isLoad){
        clearTimeout(t_img); // 清除定时器
        // 回调函数
        callback();
    // 为false，因为找到了没有加载完成的图，将调用定时器递归
    }else{
        isLoad = true;
        t_img = setTimeout(function(){
            isImgLoad(callback); // 递归扫描
        },500); // 我这里设置的是500毫秒就扫描一次，可以自己调整
    }
}

Run code

Cut to clipboard

#,广西百色市,2017-12-24,16:23:07, javaScript & jquery完美判断图片是否加载完毕

来谈一下关于load的问题。

-------------------------------------------------------------

众所周知，常见瀑布流当鼠标滚动到浏览器底部的时候，就会发起一个ajax的请求。在服务端生成item列表后，通过 js append到相应的div里边。

看起来很简单的样子，关键问题就出在图片的加载问题上，图片一般都放在服务器上，通过http下载到客户端。

例如我的图片地址：

http://xxx.xxx.com/sc/item/cover/9-4352-c400.jpg

而图片下载到本地是需要一定时间的(网速快的路过)。当图片还没有下载完的时候，使用js获取到元素的宽高将会是0。

-------------------------------------------------------------------

有的同学说了我使用jquery的ready不就好了。如下：

$(document).ready(function(){
  // 在这里写你的代码...
});
如果这么简单就好了，我这里就说下ready与window.onload的区别。

jquery的ready只是dom的结构加载完毕，便视为加载完成。(缺点是图片没有加载完毕，宽高为0，程序出错)

js的window.onload是指dom的生成和资源的加载，比如flash、图片完全加载出来后才执行onload。(缺点就是当某一张图片很大的时候，岂不阻止了其它js的正常执行)

-------------------------------------------------------------------------------------

知道了他们的区别后，我们再来谈谈如何避免错误和选择性使用。

如果你进行了百度，很多人会告诉你。

这样：

$('img').load(function(){
  // 加载完成    
});
 

好像很强大的样子，其实不然，他的缺点是每加载一张图片，回调函数就执行一次。好吧太烦了，我只想全部加载完走一次就可以了。当然可以，你可以进行修改如下：

va imgNum=$('img').length;
$('img').load(function(){
    if(!--imgNum){
        // 加载完成
    }
});
 

这样总可以了吧，我加载一张，就用图片总数去减一，减到0我就加载完毕。看起来很完美，前提是你没遇到IE。

IE的图片总是从缓存文件里去拿，这就造成load方法根本就不执行，只有是新图片才会走load。

服了吧？继续往下看。

---------------------------------------------------------------

或者是这样：

document.getElementById('img').onload=function(){
        // 加载完成 
};
 

看我原生代码一统天下，实际上效果甚微，一次只能处理一个你准备写多少个document，有人说我可以用循环去绑定，经过我测试貌似根本没效果。

Run code

Cut to clipboard

#,广西百色市,2017-12-24,16:23:21, 利用图片没有加载完成的时候，宽高为0。我们很容易判断图片的一个加载情况。

#,广西百色市,2017-12-24,16:23:52, 楼主你去扒一下其它知名站点实现的瀑布流的ajax请求结果看看，你会发现他们都是直接把图片的高度在服务器处理好，json数据里面返回过来了

你这样搞的结果就是网速很慢的时候，要等好久，然后一下子图片都出来了，不觉得很诡异吗

常见的瀑布流都是先出来一个空白区域加载提示小图片，然后图片慢慢load上去的

文章：不加载图片！直接HTTP方式获取图片尺寸发表时间：2017-12-24, 16:21:45

展开↯

#⁷¹³

作者：广西南宁市

http协议中:GET/POST/PUT/DELETE/INPUT/TRACE/OPTIONS/HEAD方法

请求方法是请求一定的Web页面的程序或用于特定的URL。可选用下列几种：
GET： 请求指定的页面信息，并返回实体主体。
HEAD： 只请求页面的首部。
POST： 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体。
PUT： 从客户端向服务器传送的数据取代指定的文档的内容。
DELETE： 请求服务器删除指定的页面。
OPTIONS： 允许客户端查看服务器的性能。
TRACE： 请求服务器在响应中的实体主体部分返回所得到的内容。
PATCH： 实体中包含一个表，表中说明与该URI所表示的原内容的区别。
MOVE： 请求服务器将指定的页面移至另一个网络地址。
COPY： 请求服务器将指定的页面拷贝至另一个网络地址。
LINK： 请求服务器建立链接关系。
UNLINK： 断开链接关系。
WRAPPED： 允许客户端发送经过封装的请求。
Extension-mothed：在不改动协议的前提下，可增加另外的方法。
当服务器响应时，其状态行的信息为HTTP的版本号，状态码，及解释状态码的简单说明。现将5类状态码详细列出：
① 客户方错误
100  继续
101  交换协议
② 成功
200  OK
201  已创建
202  接收
203  非认证信息
204  无内容
205  重置内容
206  部分内容
③ 重定向
300  多路选择
301  永久转移
302  暂时转移
303  参见其它
304  未修改（Not Modified）
305  使用代理
④ 客户方错误
400  错误请求（Bad Request）
401  未认证
402  需要付费
403  禁止（Forbidden）
404  未找到（Not Found）
405  方法不允许
406  不接受
407  需要代理认证
408  请求超时
409  冲突
410  失败
411  需要长度
412  条件失败
413  请求实体太大
414  请求URI太长
415  不支持媒体类型
⑤ 服务器错误
500  服务器内部错误
501  未实现（Not Implemented）
502  网关失败
504  网关超时
505 HTTP版本不支持
关于实体头部的内容还可以有：
Last Modified ：请求文档的最近修改时间。
Expires ：请求文档的过期时间。
Connect-length：文档数据的长度。
WWW-authenricate：通知客户端需要的认证信息。
Connect-encoding ：说明有无使用压缩技术。
Transfer-encoding ：说明采用的编码变换类型。
标准Http协议支持六种请求方法，即：
0，GET
1，HEAD
2，PUT
3，DELETE
4，POST
5，OPTIONS
但其实我们大部分情况下只用到了GET和POST。如果想设计一个符合RESTful规范的web应用程序，则这六种方法都会用到。不过即使暂时不想涉及REST，了解这六种方法的本质仍然是很有作用的。大家将会发现，原来web也是很简洁明了的。下面依次说明这六种方法。
0，GET：GET可以说是最常见的了，它本质就是发送一个请求来取得服务器上的某一资源。资源通过一组HTTP头和呈现数据（如HTML文本，或者图片或者视频等）返回给客户端。GET请求中，永远不会包含呈现数据。
1，HEAD：HEAD和GET本质是一样的，区别在于HEAD不含有呈现数据，而仅仅是HTTP头信息。有的人可能觉得这个方法没什么用，其实不是这样的。想象一个业务情景：欲判断某个资源是否存在，我们通常使用GET，但这里用HEAD则意义更加明确。
2，PUT：这个方法比较少见。HTML表单也不支持这个。本质上来讲， PUT和POST极为相似，都是向服务器发送数据，但它们之间有一个重要区别，PUT通常指定了资源的存放位置，而POST则没有，POST的数据存放位置由服务器自己决定。举个例子：如一个用于提交博文的URL，/addBlog。如果用PUT，则提交的URL会是像这样的”/addBlog/abc123”，其中abc123就是这个博文的地址。而如果用POST，则这个地址会在提交后由服务器告知客户端。目前大部分博客都是这样的。显然，PUT和POST用途是不一样的。具体用哪个还取决于当前的业务场景。
3，DELETE：删除某一个资源。基本上这个也很少见，不过还是有一些地方比如amazon的S3云服务里面就用的这个方法来删除资源。
4，POST：向服务器提交数据。这个方法用途广泛，几乎目前所有的提交操作都是靠这个完成。
5，OPTIONS：这个方法很有趣，但极少使用。它用于获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET, POST”。
其实还有一个TRACE方法，不过这个基本上不会用到，这里就不介绍了。以上的六种方法，我们可以跟数据库的CRUD增删改查操作对应起来：
CREATE ：PUT
READ：GET
UPDATE：POST
DELETE：DELETE
这样一来就实现了HTTP和数据库操作（其实不光是数据库，任何数据如文件图表都是这样）的完美统一，这也是REST的精髓之一。
http://blog.csdn.net/alextiger0/article/details/5836572
http://chlotte.blog.51cto.com/318402/554758
http://blog.sina.com.cn/s/blog_4c9ba2850100ftsy.html
http://www.hulifeng.com/article/jishu/23.htm
http://wenku.baidu.com/view/8f8f2025ccbff121dd36832e.html

Run code

Cut to clipboard

#,广西南宁市,2017-12-23,17:55:07,
CREATE ：PUT
READ：GET
UPDATE：POST
DELETE：DELETE
应该写反了吧，put更新，post创建

文章：常用html、demo代码发表时间：2017-12-23, 17:54:53

展开↯

#⁷¹⁴

作者：广西南宁市

Css鼠标滚动图标

<style>body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #111;
}

.scroll-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2em;
  width: 1.2em;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 2em;
  border: solid 2px;
  -webkit-transition: .4s;
  transition: .4s;
}

.scroll-icon:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.scroll-icon::after {
  content: '';
  width: 5px;
  height: 5px;
  background-color: #fff;
  border-radius: 50%;
  -webkit-animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
          animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

@-webkit-keyframes scroll-icon {
  0% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    opacity: 0;
  }
  30%, 70% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
    opacity: 0;
  }
}

@keyframes scroll-icon {
  0% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    opacity: 0;
  }
  30%, 70% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
    opacity: 0;
  }
}
</style><a href="#" class="scroll-icon"></a>

Run code

Cut to clipboard

#,广西南宁市,2017-12-23,17:48:14,
mousewheel滚轮事件鼠标滚轮事件滚动监听鼠标滚轮滚动事件绑定鼠标滚轮
原生的滚轮事件：火狐与其他浏览器使用了不同的事件

/* 
 * 滚轮事件只有firefox比较特殊，使用DOMMouseScroll; 其他浏览器使用mousewheel;
 * 
*/
// firefox
document.body.addEventListener("DOMMouseScroll", function(event) {

    var direction= event.detail && (event.detail > 0 ? "mousedown" : "mouseup");
    console.log(direction);    
});

// chrome and ie
document.body.onmousewheel = function (event) {
    event = event || window.event;

    var direction = event.wheelDelta && (event.wheelDelta > 0 ? "mouseup" : "mousedown");
    console.log(direction);
};

Run code

Cut to clipboard

使用jquery兼容后的事件

// jquery 兼容的滚轮事件
$(document).on("mousewheel DOMMouseScroll", function (e) {
    
    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox

    
    if (delta > 0) {
        // 向上滚
        console.log("wheelup");
    } else if (delta < 0) {
        // 向下滚
        console.log("wheeldown");
    }
});

Run code

Cut to clipboard

#,广西南宁市,2017-12-23,17:52:18, jq滚轮事件

文章：AOS.js页面滚动元素动画jQuery动画库发表时间：2017-12-23, 17:46:13

展开↯

#⁷¹⁵

作者：广西南宁市

JS获取浏览器窗口大小

// 获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
// 获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}

Run code

Cut to clipboard

#,广西南宁市,2017-12-23,17:49:51,

原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


我说怎么取不出高度来,原来是写成了<HTML>

Run code

Cut to clipboard

文章：js获取浏览器高度和宽度值发表时间：2017-12-23, 17:49:40

展开↯

#⁷¹⁶

作者：广西南宁市

都在我设计动作范围之内

#,广西南宁市,2017-12-18,10:28:51, 每年例行的谣言:某人已被送去301医院，Steam要退出国区

#,广西南宁市,2017-12-19,09:25:53,
智能商业有三个特征：
利用互联网和算法的优势，低成本实时服务海量用户；
满足每一个用户的个性需求；
快速迭代，自我更新，自我提升。

#,广西南宁市,2017-12-19,09:27:56, 未来任何一个企业，都是服务企业，因为客户真正要的是服务，不是产品。

#,广西南宁市,2017-12-19,09:36:57, 企业文化是留下来的人塑造的，企业文化最后只有养能人或宠小人两种

#,广西南宁市,2017-12-19,09:37:25, 成了后说什么都对，不会说话的都已经死在半道上了...

#,广西南宁市,2017-12-20,09:54:41, 做正确的事永远不会晚

#,广西南宁市,2017-12-20,09:58:22, 互联网相关行业没有任何一个能让你安心吃老本等退休的变化太快

#,广西南宁市,2017-12-20,11:05:28, 有网友问，他欠200万，我才欠20万，为什么我没有他过得潇洒和风光?网友回答:因为你一直想着还！

#,广西南宁市,2017-12-21,09:21:34,
2017 year progress
▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 96%

#,广西南宁市,2017-12-21,09:24:30, 在这块土地上什么事情都不能说太细。。。

#,广西南宁市,2017-12-21,09:32:13, 在采访前，我们明确要求，只许说真话

#,广西南宁市,2017-12-22,11:37:21, 我开玩笑地到处找人跟我打架，但从来没想过会有人当真。

#,广西南宁市,2017-12-22,11:45:56, 有利可图才是最主要的。不管这“利”是从哪里来的

#,广西南宁市,2017-12-22,14:27:57, 持续验证自己的能力，成功与否看你们怎么想了

#,广西南宁市,2017-12-22,15:24:26, 临近岁末，盘点这一年的生活，人们各有收获：“脱贫了”“涨工资了”“搬新房了”“开公司了”“在城里落户了”……一个个鲜活的故事，一张张开心的笑脸，汇成了一幅多彩斑斓的民生画卷。

文章：迅雷邹胜龙的错过发表时间：2017-12-18, 09:45:38

展开↯

#⁷¹⁷

作者：广西南宁市

类似上滑解锁，网站首页首屏鼠标滚动上拉收起卷帘门效果斯坦福大学的首页

<html>
<body>
<style>*{padding:0px;margin:0px;}html,body{width:100%;height:100%;}
.header{position:fixed;left:0;right:0;line-height: 40px;top:0;border:1px solid #000;background: #39464e;z-index:3;}
.splash_screen{position:relative;z-index: 2;width:100%;height: 100%;line-height:400px;text-align:center;background:#ffa200;}
.content{margin-top:60px;height: 2400px;width:100%;z-index:1;background:green;}
.content_fix{position: fixed;top:50px;margin-top:0;}
.content_shadow{height: 2900px;}
</style>
<div class="header">header</div>
<div class="splash_screen"><img src="http://out.img.pan.lizhenqiu.com/4a2ac65e68cd31509eb1039cd348cde5" width="100%" height="100%"></div>
<div class="content content_fix" style="
    text-align: center;
"><br>content<br><img src="http://out.img.pan.lizhenqiu.com/cd0a877c06b8a3582804c18ba7ee4b96" width="80%"><br><img src="http://out.img.pan.lizhenqiu.com/fccab3de7ec87d6270d444a645bb1339" width="80%"></div>
<div class="content_shadow"></div>
<script>$(document).on('scroll', function () {
	if ($(document).scrollTop() > $('.splash_screen').height()) {
  	$('.content').removeClass('content_fix')
  	$('.content_shadow').css('height', 0)
  } else {
  	$('.content').addClass('content_fix')
  	$('.content_shadow').css('height', $('.content').outerHeight())
  }
})
</script></body></html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-12-22, 10:39:05

展开↯

#⁷¹⁸

作者：广西南宁市

无论理论再多，产品都是由人做出来的，软件只是辅助工具，如果纯粹的依赖软件，人的积极性就会降低，就会产生依赖性，就会学会甩锅。人的主动意识是人工智能永远也学不会的。

#,广西南宁市,2017-12-21,17:41:29,

文章：软件开发模式变迁史发表时间：2017-12-20, 16:04:30

展开↯

#⁷¹⁹

作者：广西南宁市

比如说：一个人A为父类，他的儿子B，妻子C，私生子D（注：D不在他家里）
如果我们给A的事情增加修饰符：
public事件，地球人都知道，全公开
protected事件，A，B，D知道（A和他的所有儿子知道，妻子C不知道）
private事件，只有A知道（隐私？心事？）
internal事件，A，B，C知道（A家里人都知道，私生子D不知道）
protected internal事件，A，B，C，D都知道,其它人不知道

文章：<?= 和<?php 的区别发表时间：2017-12-21, 14:31:02

展开↯

#⁷²⁰

作者：广西南宁市

<!--pages/product/product.wxml-->

<view class="container">
   <view  bindtap="bindViewTap" class="userinfo">
  <image class="userinfo-avatar" src="../images/ab_banner.jpg" background-size="cover" background-position="center"></image>
   <!-- <text class="userinfo-nickname">{{userInfo.nickName}}</text>-->
  </view>
  <view class="usermotto">
    <text class="user-motto" >{{titlessss}}</text>
  </view>
  
<text class="pice{{jzzz}}">加载中 </text>

 <block wx:for="{{all}}">
   <view class="companyprofile"> <!-- pice{{jzzzs}}-->
    <view class="left">
    <image class="companyimg" src="https://hhh.liangtianmei.com{{item.imgurl}}" background-size="cover"></image>
      </view>

     
	 
	  <view class="right">
     <navigator url="../prodetail/prodetail?title={{item.title}}">
	   <text class="companytitle">{{item.title}}\n</text>
     </navigator>
	   <text class="companymain">{{item.content}}</text>
   <text class="pice">￥100 </text> <block wx:if="{{index==clickId}}"> <image id="{{index}}" class="shopimg" src="../images/red.png" bindtap="btn_primary"></image>  </block>
     
     
      <block wx:else> <image id="{{index}}" class="shopimg" src="../images/sp_0777.png" bindtap="btn_primary"></image>  </block>
	 
   
     <view class="stepper" >  

<text class="{{minusStatus}}" bindtap="bindMinusssss" id="{{index}}">-</text>
    <!-- 减号   
      <block wx:if="{{index==clickId}}">
    <text class="{{minusStatus}}" bindtap="bindMinus" id="{{index}}">-</text>  
      </block>
     <block wx:else>
        <text class="{{minusStatus}}" bindtap="bindMinus" id="{{index}}">-</text>  
       </block>-->

    <!-- 数值 -->  
     <block wx:if="{{index==clickId}}">
    <input type="number" bindchange="bindManual" value="{{num}}" id="{{index}}"/>  
     </block>
     <block wx:else>
     <input type="number" value="{{item.nnum}}" name="nnum" id="nnum{{index}}"/>  <!--bindchange="bindManual" -->
     </block>
     <text class="normal" bindtap="bindPlussssss" id="{{index}}">+</text>
    <!-- 加号   
     <block wx:if="{{index==clickId}}">
    <text class="normal" bindtap="bindPlus" id="{{index}}">+</text>  
     </block>
      <block wx:else> <text class="normal" bindtap="bindPlus" id="{{index}}">+</text>   </block>-->


</view>  
    

    
    <!-- <view class="icon">
       <image id="{{index}}" class="add" src="../images/add.png" bindtap="btn_primary"></image>  <text class="companymain">1</text>  <image id="{{index}}" class="minus" src="../images/minus.jpg" bindtap="btn_primary"></image>
      </view>-->


<!--
      <view class="icon">         
       <image src="../images/add.png" class="add-img {{item.numbers==0 ?'none':''}}" bindtap="reduceNum" data-index="{{index}}"></image>
       <view  class="num {{item.numbers==0?'none':''}}">{{item.id}}</view>
       <image src="../images/minus.jpg" class="add-img" bindtap="addNum" data-index="{{index}}" data-index="{{index}}"></image>
 </view>
 -->






     
      </view>
  </view>
  </block>
  
  <!-- 
  
     <view class="companyprofile">
    <view class="left">
    <image class="companyimg" src="../images/ab_01.jpg" background-size="cover"></image>
      </view>
	 
	  <view class="right">
	   <text class="companytitle">湖北早梗米\n</text>
	   <text class="companymain">浙江百慕生物科技有限公司隶属浙江丽珀集团，成立于2011年3月，注册资本1000万元，是一家从事海洋生物开发销售的公司，主要从事保健品（海参）产品的销售。</text>
    <text class="pice">￥120 </text> <image  class="shopimg" src="{{imageUrl}}" bindtap="btn_primary" ></image>
      </view>
  </view>
  -->
  
  
  
  <view class="footer">
    <text class="footerword">版权所有©2016 全家科技发展有限公司</text>
  </view>
  
  
  
</view>

Run code

Cut to clipboard

#,广西南宁市,2017-12-19,12:21:08,
小程序购物者加减数量输入框获取value
微信小程序获取value 微信小程序如何获取单个input值
微信小程序—如何获取用户输入文本框的值
微信小程序获取用户输入微信小程序怎么获取用户输入

//构造令牌 使用服务器时间戳

var utilMd5 = require('../../utils/md5.js');

var util = require('../../utils/util.js');



// pages/product/product.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
   // tabs:["泰国香米","湖北早梗米"],
  // clickId:0,//默认选中的键值，从零开始
   // imageUrl:'../images/sp_0777.png'//默认图片
    titlessss:'产品中心',
    jzzzs:1,
    num: 0,
    // 使用data数据对象设置样式名  
    minusStatus: 'disabled'  ,
    inputTxt:0
  },
  /* 点击减号 */
  bindMinus: function (event) {
    var num = this.data.num;
    // 如果大于1时，才可以减  
    if (num > 1) {
      num--;
    }
    // 只有大于一件的时候，才能normal状态，否则disable状态  
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    // 将数值与状态写回  
    this.setData({
      num: num,
      minusStatus: minusStatus,
      clickId: event.currentTarget.id
    });
  },
  bindMinusssss:function(e){
    //new 2017.12.19
    var id = e.currentTarget.id;
    var all = this.data.all;
    if (!all[id].nnum) all[id].nnum = 1;
    var nv = all[id].nnum;
    
    if(nv>1) nv-=1;
    
    all[id].nnum=nv;
    this.setData({
      all: all
    })
    //e.detail = { nv, cursor }
    //e.detail.value=100;
    //console.log(all);
    //console.log(e.currentTarget.dataset.value);
  },
  bindPlussssss: function (e) {
    //new 2017.12.19
    var id = e.currentTarget.id;
    var all = this.data.all;
    if (!all[id].nnum) all[id].nnum = 1;
    var nv = all[id].nnum;

    nv += 1;//记得判断是否超过库存

    all[id].nnum = nv;
    this.setData({
      all: all
    })
    //e.detail = { nv, cursor }
    //e.detail.value=100;
    //console.log(all);
    //console.log(e.currentTarget.dataset.value);
  },
  /* 点击加号 */
  bindPlus: function (event) {
   
    var num = this.data.num;
    // 不作过多考虑自增1  
    num++;
    // 只有大于一件的时候，才能normal状态，否则disable状态  
    var minusStatus = num < 1 ? 'disabled' : 'normal';
    // 将数值与状态写回  
    this.setData({
      num: num,
      minusStatus: minusStatus,
      clickId: event.currentTarget.id
       
    });
  },
  /* 输入框事件 */
  bindManual: function (event) {
   //var clickId = event.detail.id;
   // console.log(clickId)


    var num = event.detail.value;
   console.log(num)
    var that = this;
    // 将数值与状态写回  
    this.setData({
      num: num,
      clickId: event.currentTarget.id
 
    
    });
  }  ,



  btn_primary: function (event) {
    console.log(event)
    var that = this;
    this.setData({
      clickId: event.currentTarget.id,
     // imageUrl: "../images/sp_07.png"//触发事件时的图片
    })
  }  ,
  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    var that = this;
    var app = getApp();//获取app小程序实例

   // WxParse.wxParse('content', 'html', content, that, 5)


    wx.login({
      success: function (res) {
        if (res.code) {
          //更新数据

          var url = 'https://hhh.liangtianmei.com/index.php/Home/Product/index';
          util.ntime(utilMd5, that,url);
        }
      }
    })

  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

Run code

Cut to clipboard

文章：微信小程序开发笔记发表时间：2017-12-19, 12:19:38

展开↯

#⁷²¹

作者：广西南宁市

吕布的命，非想干曹操的事儿。

#,广西南宁市,2017-11-20,10:22:52, Pony马化腾捐出的24小时独占朋友圈广告推送（包含核心城市+iOS用户），起拍600万，最终由顺风王卫4000万拍得。

#,广西南宁市,2017-11-20,10:29:51, 管家说不好意思，密码锁只认钱

#,广西南宁市,2017-11-20,10:30:06,

#,广西南宁市,2017-11-20,16:45:00, 小常识：如果你前面说了“我觉得”，那么后面就不要加“肯定是”

#,广西南宁市,2017-11-21,09:46:31, 不是什么理都可以讲的，讲了之后还要能得到支持才行

#,广西南宁市,2017-11-21,10:06:44,
“那个人样子好怪。”
“我也看到了，他好像一条狗。”

#,广西南宁市,2017-11-21,10:34:39,
到菜市场买菜，看到一个孩子在看摊，我问：“一只鸡多少钱？” 那孩子回答：“23。” 我又问：“两只鸡多少钱？” 孩子愣了一下，一时间没算过来，急中生智大吼一声：“一次只能买一只！”

#,广西南宁市,2017-12-04,09:40:23, 苹果在微博、知乎和各种论坛都倒闭了好几回了，

#,广西南宁市,2017-12-06,10:21:41, 企业家不应被道德裹挟，不应被哄骗着，去认领什么“社会责任”

#,广西南宁市,2017-12-06,14:36:10,
「细思极恐」
你的对手在看书
你的仇人在磨刀
你的闺蜜在减肥
隔壁老王在练腰

#,广西南宁市,2017-12-07,09:32:02, 选择不一样，人生不一样

#,广西南宁市,2017-12-07,09:32:15, 就如同众神之夫奥丁所说：‘’阿德斯嘉不是地方，是人民！‘’因此硅谷并不是改变世界的因素，而人才才是

#,广西南宁市,2017-12-08,09:56:33, 西方有个寓言故事，屠龙勇士历经千辛万苦，手刃恶龙，然后坐在龙穴面对数不尽的财宝，慢慢变成一条新的龙，生活大概就是如此

#,广西南宁市,2017-12-08,10:25:45, 一般来说大家很难知道一个国家最胖的那个人是谁，但凡事总有例外。

#,广西南宁市,2017-12-08,10:46:20,@13, 憋说话，赔钱

#,广西南宁市,2017-12-08,17:41:33, 君只见红墙绿瓦碧蓝天，却不见北风旷野冷炊烟。

#,广西南宁市,2017-12-11,16:49:53, 大城市土著就因为继承了祖上一套房耀武扬威，

#,广西南宁市,2017-12-18,17:45:13, 最好的结局不是打倒一个人，而是这个人又重新站了起来，让大家的损失都减到最低，就如同史玉柱东山再起一样。

文章：不知妻美二手东，悔创阿里杰克马，一无所有王健林，普通家庭马化腾，不熟运作假药停发表时间：2017-11-18, 00:24:35

展开↯

#⁷²²

作者：广西南宁市

格力的手机，小米的空调，你会买哪个？

#,广西南宁市,2017-12-15,16:39:47, 看别人掉坑，让自己无坑可掉

#,广西南宁市,2017-12-15,16:41:16, 不看A片的日本人

#,广西南宁市,2017-12-15,16:41:31,@2, 一些日本非盈利社会组织，也决定承担责任。他们为中年处男开设裸模艺术课，提供“与真实的裸体女性最为接近的场合”。老处男们也希望挣扎一下，“自然地激发对异性的兴趣”。但实在低估了自己心如止水的程度，对宅久了的30代～40代的男性来说，区区裸体已经不能带来什么刺激了。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。色情泛滥的社会不是什么好社会，性冷淡的世界更是一片荒芜。

#,广西南宁市,2017-12-15,16:52:12, 以前买菜的时候，小贩都会送一把葱
突然有一天小贩不送葱了…

#,广西南宁市,2017-12-18,16:37:48, 成长中太多的见闻让我开始揣测是不是为了老师布置的日行一善作业而嗤之以鼻，却突然想起自己小时候也仅仅是出于好心做过几乎一模一样的事，不禁有些唏嘘感叹到底是自己变了还是残酷的世界不允许我们显露善良的一面

#,广西南宁市,2017-12-18,17:17:16, 稍有有点钱有点见识的都拼了命的往外跑，整个中国已经处罢工罢市罢课的状态栏，屁民还在幻想大国崛起

文章：雷军的本命年：轮回中的挫败、幸运和逆袭发表时间：2017-12-15, 16:35:52

展开↯

Records:2804 38/148 «‹34 35 36 37 38 39 40 41 42 ›»