div{
margin: 100px auto 0px; // 居中
width:500px;
height:250px;
border:3px solid black; // 边框
}
li{
width:129px;
height:59px;
border:3px solid black;
float:left; // 向左浮动
margin:8px 0 0 8px; // 设置图片间的间距
list-style:none;
}
.btn{
border:3px solid blue; // 设置为红色边框
cursor:pointer; // 设置光标类型为指针
}
.cur{
border:3px solid red; // 设置为红色边框
}
zhuanpan
- 1
- 2
- 3
- 谢谢参与
- 点击抽奖
- 1
- 2
- 3
- 谢谢参与
// 整个转动过程所需的步骤
var step = [
['c1',0], // 第一个元素特殊设置
['c1', 500],
['c2', 100],
['c3', 300],
['c4', 200],
['c5', 200],
['c6', 200],
['c7', 200],
['c8', 200],
['c1', 100],
['c2', 100],
['c3', 100],
['c4', 100],
['c5', 100],
['c6', 100],
['c7', 100],
['c8', 100],
['c1', 100],
['c2', 100],
['c3', 100],
['c4', 100],
['c5', 100],
['c6', 100],
['c7', 100],
['c8', 100],
['c1', 100],
['c2', 100],
['c3', 100],
['c4', 100],
['c5', 100],
['c6', 100],
['c7', 100],
['c8', 100],
['c1', 100],
['c2', 200],
['c3', 300],
['c4', 300],
['c5', 300],
['c6', 300],
['c7', 300],
['c8', 300],
['c1', 400],
['c2', 400],
['c3', 400],
['c4', 400],
['c5', 400],
['c6', 400],
['c7', 400],
['c8', 400]
];
// 记录当前步数，即step数组的下标
var current = 1;
// 设置样式和重新设置定时器
function run(){
// 删除之前设置的cur类
$('#'+step[current-1][0]).removeClass('cur');
// 为当前元素设置cur类
$('#'+step[current][0]).addClass('cur');
// 判断step数组所有步骤是否已经走完
if(current == step.length - 1){
alert(step[current][0]);
window.location.reload();
}else{
// 重新设置定时器
setTimeout('run()', step[current][1]);
current++;
}
}Js写九宫格抽奖
国庆出去转了一圈,回来及时把以前写的一些有用的在这儿记录一下 --------------------------------------------我是分割线-------------------- ...
php+lottery.js制作九宫格抽奖实例
php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js
PHP+Ajax微信手机端九宫格抽奖实例
PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现.支持可以设置中奖概率等. 奖品列表
JS版百度地图API
地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结: 一起jquery,17jquery 一.引入JS :这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件 ...
PureMVC(JS版)源码解析：总结
PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写博客的过程中得到了些提升.我也是第一次写系列 ...
常见排序算法(JS版)
常见排序算法(JS版)包括: 内置排序,冒泡排序,选择排序,插入排序,希尔排序,快速排序(递归 & 堆栈),归并排序,堆排序,以及分析每种排序算法的执行时间. index.html
随机推荐
mongo vue的常用操作
查找在某个范围内的记录: {"_id":{$in: [a,b,c]}} 如果images是个数组,则查询方式与普通数据一样:{"images":&quo ...
django(一)搭建开发环境
本学习系列均使用centos7操作系统,基于python3进行操作.centos7下的python3安装配置 ...
C# 图片旋转360度程序
这几天开发一个程序,需要将一个图片旋转360度然后每一个角度保存下来.刚开始本来想着是让美工弄的,但是让一个美工手动转360度,她会喷你一脸. using System; using System.C ...
zend studio 10 字体，颜色，快捷键等相关设置
一.修改字体 没想到zend studio 10中对中文显示不太好看,似乎有点小了.修改如下:打开 Window->Preferences->General->Appearance- ...
动态规划——线性dp
我们在解决一些线性区间上的最优化问题的时候,往往也能够利用到动态规划的思想,这种问题可以叫做线性dp.在这篇文章中,我们将讨论有关线性dp的一些问题. 在有关线性dp问题中,有着几个比较经典而基础的模 ...
SOAP详解
1. SOAP简介 1.1应用背景 对于应用程序开发来说,使程序之间进行因特网通信是很重要的.目前的应用程序通过使用远程过程调用(RPC)在诸如 DCOM 与 CORBA 等对象之间进行通信,但是 H ...
odoo Model字段的参数
odoo Model字段的参数 class Field(object): """ The field descriptor contains the field defi ...
C++类的成员
1.成员变量 成员变量可以是任何类型,如基本数据类型.引用.另一个类的对象或指针.自身类的引用或指针,但不能是自身类的对象: 成员变量不能指定为auto.register.extern 存储类型. 1 ...
【转】避免全表扫描的sql优化
对查询进行优化,应尽量避免全表扫描,首先应考虑在where 及order by 涉及的列上建立索引: .尝试下面的技巧以避免优化器错选了表扫描:· 使用ANALYZE TABLE tbl_name为扫 ...
Mysql date,datetime的区别以及相互转换
参考: 在数据库中一直有这三个时间类型有点搞不太清楚. 今天就来说一下之间的区别,其实是 ...
