Jquery仿彩票更换数字动画效果
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var y=3;
$("input").click(function(event) {
$("ul li").each(function(index, el) {
///开始///随机函数
function createRandom(num ,from ,to )
{
var arr=[];
for(var i=from;i<=to;i++)
arr.push(i);
arr.sort(function(){
return 0.5-Math.random();
});
arr.length=num;
return arr;
} function createRandom2(num , from , to)
{
var arr=[];
var json={};
while(arr.length<num)
{
//产生单个随机数
var ranNum=Math.ceil(Math.random()*(to-from))+from;
//通过判断json对象的索引值是否存在 来标记 是否重复
if(!json[ranNum])
{
json[ranNum]=1;
arr.push(ranNum);
}
}
return arr;
}
///结束///随机函数
var arr=[];//声明一个空的数组
arr=createRandom2(7,1,33)/*将随机生成的0-33的7个数字赋值给arr*/
//定义了sort的比较函数将arr数组里面的数字
arr.sort(function(a,b){
return a-b;
});
//利用循环让每个li取到arr数组的值
for(var i=0;i<=$("ul li").size();i++){
$("ul li").eq(i).text(arr[i]);
}
/*每个圆转的度数等于 y*360*/
y++;
$("ul li").eq(index).css({
"transform": 'rotate('+y*360+'deg)',
"-moz-transform": 'rotate('+y*360+'deg)',
"-webkit-transform": 'rotate('+y*360+'deg)',
"-o-transform": 'rotate('+y*360+'deg)',
"-s-transform": 'rotate('+y*360+'deg)'
});
});
//判断随机生成的是不是小于10如果是的就给前面加上0如生成的是1那么就显示01
$("ul li").each(function(index, el) {
if (parseInt($(this).text())<10) {
var cc=$(this).text();
$(this).text("0"+cc)
};
});
});
});
</script>
Jquery仿彩票更换数字动画效果的更多相关文章
- javascript仿天猫加入购物车动画效果
javascript仿天猫加入购物车动画效果 注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...
- Jquery库自带的动画效果方法记录
1.显示和隐藏hide()和show() <script type="text/javascript"> $(function() { ...
- JQuery实现的模块交换动画效果
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- 基于jQuery CSS3鼠标点击动画效果
分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="co ...
- 仿网易nec首页动画效果
仿网页nec首页动画效果nec链接:http://nec.netease.com/ 首先,介绍animationanimation检索或设置对象所应用的动画特效.animation由“keyframe ...
- jquery仿搜狐投票动画代码
体验效果:http://hovertree.com/texiao/jquery/21/ 这是一款基于jquery实现的仿搜狐投票动画特效源码,运行该源码可见VS图标首先出现在中间位置,紧接着随着投票比 ...
- jquery 仿手机屏幕切换界面效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- JQuery模拟实现天猫购物车动画效果
测试程序源代码下载地址:源码 一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: < ...
随机推荐
- ASP.NET 教程(一)
ASP.NET 是一个开发框架,用于通过 HTML.CSS.JavaScript 以及服务器脚本来构建网页和网站. ASP.NET 支持三种开发模式: Web Pages.MVC (Model Vie ...
- html/css小练习1
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAywAAAFgCAIAAADW6Wr0AAAgAElEQVR4nOzdd1xT5+L48bJlhUAGCY
- javascript中对象在OOP方面的一些知识(主要是prototype和__proto__相关)
在ES6的Class到来之前,先总结下个人对js中prototype属性的理解. 1.构造函数(大写函数名 this 无return) 2.原型对象(函数.prototype) 3.实例对象( ...
- POJ 3087 Shuffle'm Up
Shuffle'm Up Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit ...
- 使用VC6.0创建和运行C程序的方法
使用VC6.0可以有快捷的方式创建C程序,对于初学者,建议按照如下方式创建.先创建一个工作区,然后创建工程,最后在工程中创建源文件文件.理解工作区.工程与文件之间的关系.
- scalac 学习
val logEnable = false def log(msg: => String) = if (logEnable) println(msg) val MSG = "progr ...
- ssh 密码登陆
概要: 首先 自己生成秘钥 其次 用已经生成的秘钥 实现 用秘钥登陆的功能(在别的机器上部署的道理相同) 辅助: 登陆工具 Tera Term linux版本:cen ...
- 书旗小说app点评
书旗小说这个手机软件用了好久了,大一的时候就开始用,业余无聊时间可以看一看网络小说打发一下时间. 书旗免费小说是一款内容以免费小说书旗网为基础的在线阅读器,除了拥有传统阅读器的书籍同步阅读.全自动书签 ...
- Jmail组件-----发送email
jmail是一个第三方邮件操作组件,通常位于web服务器端,和站点程序紧密配合来接收及提交邮件到邮件服务器的控件,让网站拥有发送邮件既接收邮件的功能. 之所以想尝试它的理由呢 是因为----jmail ...
- 一、Python 简介
There should be one -- and preferably only one -- obvious way to do it. 一种解释型,面向对象的.带有动态语义的高级程序设计语言. ...