前端JS特效第26集：jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果

于 2024-07-09 18:15:00 发布
阅读量255 收藏
点赞数 3
文章标签： 前端 javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85903333/article/details/139999366
版权

jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果，先来看看效果：

部分核心的代码如下(全部代码在文章末尾)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
<title>HTML5微信红包抽奖红包雨特效动画js效果</title>
<meta name="keywords" content="HTML5,微信红包,抽奖,红包雨,特效动画,js效果" />
<meta name="description" content="HTML5微信红包抽奖红包雨特效动画js效果下载。一款非常实用的红包雨抽奖jQuery插件，背景红包雨动画非常炫酷，带抽奖弹窗提示。" /> 
<meta name="author" content="js代码(www.jsdaima.com)" />
<meta name="copyright" content="js代码(www.jsdaima.com)" />
<link rel="stylesheet" href="css/demo.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/sweet-alert.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/awardRotate.js"></script>
<script src="js/sweet-alert.min.js"></script>
<script type="text/javascript" src="js/ThreeCanvas.js"></script>
<script type="text/javascript" src="js/Snow.js"></script>

<script type="text/javascript">
	var SCREEN_WIDTH = window.innerWidth;//
	var SCREEN_HEIGHT = window.innerHeight;
	var container;
	var particle;//粒子

	var camera;
	var scene;
	var renderer;

	var starSnow = 1;

	var particles = []; 

	var particleImage = new Image();
	//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
	particleImage.src = 'images/ParticleSmoke.png'; 
	


	function init() {
		//alert("message3");
		container = document.createElement('div');//container：画布实例;
		document.body.appendChild(container);

		camera = new THREE.PerspectiveCamera( 50, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
		camera.position.z = 1000;
		//camera.position.y = 50;

		scene = new THREE.Scene();
		scene.add(camera);
			
		renderer = new THREE.CanvasRenderer();
		renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
		var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
			//alert("message2");
		for (var i = 0; i < 260; i++) {
			//alert("message");
			particle = new Particle3D( material);
			particle.position.x = Math.random() * 2000-1000;
			
			particle.position.z = Math.random() * 2000-1000;
			particle.position.y = Math.random() * 2000-1000;
			//particle.position.y = Math.random() * (1600-particle.position.z)-1000;
			particle.scale.x = particle.scale.y = 0.5;
			scene.add( particle );
			
			particles.push(particle); 
		}

		container.appendChild( renderer.domElement );


		//document.addEventListener( 'mousemove', onDocumentMouseMove, false );
		document.addEventListener( 'touchstart', onDocumentTouchStart, false );
		document.addEventListener( 'touchmove', onDocumentTouchMove, false );
		document.addEventListener( 'touchend', onDocumentTouchEnd, false );
		
		setInterval( loop, 1000 / 40 );
		
	}

	var touchStartX;
	var touchFlag = 0;//储存当前是否滑动的状态;
	var touchSensitive = 80;//检测滑动的灵敏度;
	//var touchStartY;
	//var touchEndX;
	//var touchEndY;
	function onDocumentTouchStart( event ) {

		if ( event.touches.length == 1 ) {

			event.preventDefault();//取消默认关联动作;
			touchStartX = 0;
			touchStartX = event.touches[ 0 ].pageX ;
			//touchStartY = event.touches[ 0 ].pageY ;
		}
	}


	function onDocumentTouchMove( event ) {

		if ( event.touches.length == 1 ) {
			event.preventDefault();
			var direction = event.touches[ 0 ].pageX - touchStartX;
			if (Math.abs(direction) > touchSensitive) {
				if (direction>0) {touchFlag = 1;}
				else if (direction<0) {touchFlag = -1;};
				//changeAndBack(touchFlag);
			}	
		}
	}

	function onDocumentTouchEnd (event) {
		// if ( event.touches.length == 0 ) {
		// 	event.preventDefault();
		// 	touchEndX = event.touches[ 0 ].pageX ;
		// 	touchEndY = event.touches[ 0 ].pageY ;
	
		// }这里存在问题
		var direction = event.changedTouches[ 0 ].pageX - touchStartX;

		changeAndBack(touchFlag);
	}


	function changeAndBack (touchFlag) {
		var speedX = 20*touchFlag;
		touchFlag = 0;
		for (var i = 0; i < particles.length; i++) {
			particles[i].velocity=new THREE.Vector3(speedX,-10,0);
		}
		var timeOut = setTimeout(";", 800);
		clearTimeout(timeOut);

		var clearI = setInterval(function () {
			if (touchFlag) {
				clearInterval(clearI);
				return;
			};
			speedX*=0.8;

			if (Math.abs(speedX)<=1.5) {
				speedX=0;
				clearInterval(clearI);
			};
			
			for (var i = 0; i < particles.length; i++) {
				particles[i].velocity=new THREE.Vector3(speedX,-10,0);
			}
		},100);


	}


	function loop() {
		for(var i = 0; i<particles.length; i++){
			var particle = particles[i]; 
			particle.updatePhysics(); 

			with(particle.position)
			{
				if((y<-1000)&&starSnow) {y+=2000;}

				if(x>1000) x-=2000; 
				else if(x<-1000) x+=2000;
				if(z>1000) z-=2000; 
				else if(z<-1000) z+=2000;
			}			
		}

		camera.lookAt(scene.position); 

		renderer.render( scene, camera );
	}
</script>
<script type="text/javascript">

$(function (){

	var rotateTimeOut = function (){
		$('#rotate').rotate({
			angle:0,
			animateTo:2160,
			duration:8000,
			callback:function (){
				alert('网络超时，请检查您的网络设置！');
			}
		});
	};
	var bRotate = false;

	var rotateFn = function (awards, angles, txt){
		bRotate = !bRotate;
		$('#rotate').stopRotate();
		$('#rotate').rotate({
			angle:0,
			animateTo:angles+1800,
			duration:8000,
			callback:function (){
				/*alert(txt);*/
				swal({   title: "获得"+txt+"红包",   imageUrl: "images/gx.png" });
				
				bRotate = !bRotate;
			}
		})
	};
	
	 document.onkeydown=function(event){
            var e = event || window.event || arguments.callee.caller.arguments[0];
         
              if(e && e.keyCode==32){ // enter 键
			  	$('showSweetAlert').css("display","none");
				$('sweet-overlay').css("display","none");

				if(bRotate)return;
		var item = rnd(1,5);

		switch (item) {
			case 1:
				//var angle = [26, 88, 137, 185, 235, 287, 337];
				rotateFn(1, 55, '888元');
				break;
			case 2:
				//var angle = [88, 137, 185, 235, 287];
				rotateFn(2, 140, '388元');
				break;
			case 3:
				//var angle = [137, 185, 235, 287];
				rotateFn(3, 199, '188元');
				break;
			case 4:
				//var angle = [137, 185, 235, 287];
				rotateFn(4, 269, '88元');
				break;
			case 5:
				//var angle = [185, 235, 287];
				rotateFn(5, 341, '8元');
				break;
			
		}
		
		console.log(item);

             }
         }; 

	$('.pointer').click(function (){

		if(bRotate)return;
		var item = rnd(1,5);

		switch (item) {
			case 1:
				//var angle = [26, 88, 137, 185, 235, 287, 337];
				rotateFn(1, 55, '888元');
				break;
			case 2:
				//var angle = [88, 137, 185, 235, 287];
				rotateFn(2, 140, '388元');
				break;
			case 3:
				//var angle = [137, 185, 235, 287];
				rotateFn(3, 199, '188元');
				break;
			case 4:
				//var angle = [137, 185, 235, 287];
				rotateFn(4, 269, '88元');
				break;
			case 5:
				//var angle = [185, 235, 287];
				rotateFn(5, 341, '8元');
				break;
			
		}
		
		console.log(item);
	});
});
function rnd(n, m){
	return Math.floor(Math.random()*(m-n+1)+n)
}
</script>

</head>
<body bgcolor="#eae0d9" id="body" onLoad="init()">
	<div class="couten" style="position:fixed; width:100%; margin:0 auto; text-align:center; padding-top:5%">
        <div class="turntable-bg">
            <!--<div class="mask"><img src="images/award_01.png"/></div>-->
            <div class="pointer"><img src="images/pointer.png" alt="pointer"/></div>
            <div class="rotate" ><img id="rotate" src="images/turntable.png" alt="turntable"/ ></div>
        </div>
	</div>

</body>
</html>

全部代码：jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果

强迫领导写Bug
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值