微信 动画表情 骰子 猜拳

新博客地址：http://blog.lunhui.ren

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

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

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

另外一个例子： http://download.csdn.net/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 );