使用此类带来的一切利益损失概不负责,另此文和实例只准用于技术研究,如有需要用于项目必须符合使用地的法律法规,否则自行承担一切后果和法律责任。
今天看到微信上有2个功能,发送动画表情,骰子 和 猜拳 于是便兴起模仿做下 。
实例下载:demo
使用前必须先引入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 );
1565total visits,1visits today
Leave a Reply