使用此类带来的一切利益损失概不负责
今天看到微信上有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 );
相关推荐
今天看到微信上有2个功能 发送动画表情 骰子 和 猜拳 于是便兴起模仿做下 。
不是代码,是 PNG 图片!!!微信默认表情110个png,微信默认表情,都是 PNG 资源,适用于小程序开发,网页开发等等
微信小程序-猜拳游戏 小程序代码 猜拳游戏 源码下载
自用微信emoji表情png版,111个,自己提取的高清版
微信默认表情105个png
2021最新微信原生表情包 WeChat emoji 最全原生表情资源 含9个新增: 「吃瓜」、「加油」、「汗」、「天啊」、「Emm」、「社会社会」、「旺柴」、「好的」、「哇」
生成艺术字,微信qq表情生成艺术字,微信qq表情生成艺术字,微信qq表情生成艺术字,微信qq表情生成艺术字,微信qq表情生成艺术字,微信qq表情生成艺术字,微信qq表情生成艺术字,微信qq表情生成艺术字,微信qq表情...
109个微信自带的emoji表情
微信最新表情下载,微信默认表情png 微信默认表情146个png,微信最新Emoji表情146个png打包.zip 微信最新原版默认表情146个打包.zip
微信自带表情中另外的9个表情
主要为大家详细介绍了Vue表情输入组件,微信face表情组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
把微信中获取的表情标签如:<span class="emoji emoji1f631"></span>,直接输出到HTML中,再引入本CSS文件即可识别显示。
2018年微信默认表情整理,带配置文件,带配置路径,gif图片文件
微信原版默认表情114个 tiff格式表情打包.zip
微信最新原版默认表情263个打包.zip
高仿微信emoji表情,自定义表情
微信表情商店部分表情
2018年10月31日更新,最新版的微信默认表情,带配置文件
微信467特殊表情字符与对应的微信识别字符+111张微信emoji表情图
android 仿微信Emoji表情demo