| 微信 动画表情 骰子 猜拳 | 您所在的位置：网站首页 › 骰子随机动图 › 微信 动画表情 骰子 猜拳 |
|
使用此类带来的一切利益损失概不负责 今天看到微信上有2个功能，发送动画表情，骰子 和 猜拳 于是便兴起模仿做下 。
可以直接下载此压缩包：http://download.csdn.net/detail/neilson123456/6819629 另外一个例子：http://download.csdn.net/detail/neilson123456/6848329 使用前必须先引入jquery 因为此js代码扩展依赖于jquery 使用方式: html文件：
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 = $("", { 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 );
|
| CopyRight 2018-2019 实验室设备网 版权所有 |