微信 动画表情 骰子 猜拳

使用此类带来的一切利益损失概不负责

今天看到微信上有2个功能，发送动画表情，骰子 和 猜拳 于是便兴起模仿做下 。

 

可以直接下载此压缩包：http://download.youkuaiyun.com/detail/neilson123456/6819629

另外一个例子：http://download.youkuaiyun.com/detail/neilson123456/6848329

使用前必须先引入jquery 因为此js代码扩展依赖于jquery
使用方式:


html文件：

<script src="your_path/jquery.js" type="text/javascript"> </script>
<script src="your_path/jquery.bet.js" type="text/javascript"> </script>
<div class="content"></div>

js文件：

$(document).ready(function () {
	$(".content").runMora({callBack: function (res) {alert(res)}});
	$(".content").runDice({callBack: function (res) {alert(res)}});
});

可设置的属性：
表情的长和宽 : {height: "30px", width: "30px"}
初始显示的图片： {src: 'yourpath/yourimg_name.jpg'}
样式: {style: 'display: none; background-color: red'}
动画结束后的回调方法： {callBack: function (res) {alert(res)}}// res:返回动画停止时的图片序号， 数字类型

 

 

主文件 jquery.bet.js：

 

(function( $, window, undefined ){ 
	var __FILE__ = $("script").last().attr("src");
	var _FILE_IMG_ = __FILE__.substring(0, (__FILE__.length - 13));

	var methods = {
		moraInit: function (settings) {
			settings = settings || {};
			var  _settings = $.extend({
				src	: "",
				style: "display:none",
				width: "30px",
				height: "30px",
				type: 'mora',
				bookNum: null,
				driveData: driveMoraData(),
				
			}, settings);
			
			run.call(this, _settings);
		},
		
		diceInit: function (settings) {
			settings = settings || {};
			var  _settings = $.extend({
				src	: "",
				style: "display:none",
				width: "30px",
				height: "30px",
				type: 'dice',
				bookNum: null,
				driveData: driveDiceData(),
				
			}, settings);

			run.call(this, _settings);
		}
	};
	
	var run = function (settings) {
			var $img = $("<img>", {
			  src: settings.src || "",
			  style: settings.style || "",
			  width: settings.width || "30px",
			  height: settings.height || "30px", 
			});
			
			$(this).append($img);
			
			if (settings.type === 'dice') {
				$img.css("-webkit-transition", "3s linear all");
			}
			
			driveWork.call($img, settings);
	};
		
	var driveWork = function (settings) {
			var _that = this;
			var _random = 0;
			var _maxAlternate = settings.driveData.length - 1;
			var startTime = new Date().getTime();
			
			_that.setIntervalId = setInterval(function() {
			
				_random = Math.round(Math.random() * (_maxAlternate - 1));
			
				if ((new Date().getTime()) - startTime > 3000 && settings.bookNum !== null) {
					_random = settings.bookNum - 1;
				}
				
				$(_that).attr("src", _FILE_IMG_ + settings.driveData[_random]);
				$(_that).show();
				
				if (settings.type === 'dice') {
					$(_that).css("-webkit-transform", "rotatez(2520deg)");
				}
				
				if ((new Date().getTime()) - startTime > 3000) {
					clearInterval(_that.setIntervalId);
					
					if (typeof settings.callBack === 'function') {
						settings.callBack(_random + 1);
					}
				}
				
			}, 360);
	};
		
	var driveMoraData = function () {
			return ['img/f1.jpg', 'img/f2.jpg', 'img/f3.jpg'];
	};
		
	var	driveDiceData = function () {
			return ['img/t1.jpg', 'img/t2.jpg', 'img/t3.jpg', 'img/t4.jpg', 'img/t5.jpg', 'img/t6.jpg'];
	};
	
	$.fn.runMora = function(settings){
		return methods['moraInit'].call(this, settings);
	};

	$.fn.runDice = function (settings) {
		return methods.diceInit.call(this, settings);
	}
})( jQuery, window );