jquery九宫格,jquery九宫格抽奖手机端
如何通过jquery mobile制作九宫格
jquerymobile实现一个简单的九宫格代码如下：
创新互联建站是一家集网站建设,会泽企业网站建设,会泽品牌网站建设,网站定制,会泽网站建设报价,网络营销,网络优化,会泽网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
效果如下：
index.html页面代码如下：
Html代码
!DOCTYPE html
html lang="en"
head
meta charset="utf-8" /
meta name="viewport" content="width=device-width, initial-scale=1"
titlejQuery Mobile Examples - JQM Gallery /title
link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.1.min.css" /
link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /
link rel="stylesheet" href="style.css" type="text/css" /
script src="jquery.mobile/jquery-1.6.4.min"/script
script src="jquery.mobile/jquery.mobile-1.0.1.min.js"/script
/head
body
div data-role="page" data-theme="a" id="jqm-home"
div data-role="header"
h1业务管理/h1
/div
div data-role="content" data-theme="b"
section class="gallery"
ul class="gallery-entries clearfix"
li class="gallery-item"
a href="#"img src="images/shoppingcart.png"/
h3故障管理/h3
/a
/li
li class="gallery-item"
a href="#"img src="images/2.png"/
h3工单管理/h3
/a
/li
li class="gallery-item"
a href="#"img src="images/3.png"/
h3资产属性/h3
/a
/li
li class="gallery-item"
a href="#"img src="images/4.png"/
h3资产状态/h3
/a
/li
li class="gallery-item"
a href="#"img src="images/5.png"/
h3资产看板/h3
/a
/li
li class="gallery-item"
a href="#"img src="images/6.png"/
h3故障上报/h3
/a
/li
li class="gallery-item"
a href="#"img src="images/7.png"/
h3备品备件/h3
/a
/li
li class="gallery-item"
a href="#"img src="images/8.png"/
h3采购申请/h3
/a
/li
/ul
/div
/div
/body
/html
css样式代码如下：
Js代码
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
}
.gallery{
float: left;
width:100%;
}
.gallery-entries{
list-style:none;
padding:0;
float: left;
}
.gallery-entries .gallery-item{
float: left;
margin-right:1%;
margin-bottom:2%;
}
.gallery-entries .gallery-item img{
-webkit-box-shadow: #999 0 3px 5px;
-moz-box-shadow: #999 0 3px 5px;
box-shadow: #999 0 3px 5px;
border: 1px solid #fff;
max-width:100%;
width: 80px;
height: 80px;
}
.gallery-entries .gallery-item a{
font-weight:normal;
text-decoration:none;
}
.gallery-entries .gallery-item a h3{
width:80px;
white-space:nowrap;
font-size:1em;
overflow: hidden;
text-overflow:ellipsis;
padding-top:3px;
align:center;
}
.gallery-entries .gallery-item a:hover h3, .gallery-entries .gallery-item a:active h3{
text-decoration:underline;
}
九宫格abcdefg 输入123输出所有组合可能性
代码如下：
function foo(chars) {
if (!chars.length) return;
var _foo = function(chars, tmp) {
for (i in chars) {
var ch = chars;
var t = tmp + ch[i];
var ch = delCharAt(chars, i);
if (ch.length 1) {
alert(t);
} else {
_foo(ch, t);
}
}
};
_foo(chars, '');
}
function delCharAt(s, i) {
ss = '';
for (j in s) {
if (i != j) {
ss += s[j];
}
}
return ss;
}
foo('1234');
jquery九宫格抽奖怎么控制停止位置
参考下面代码
!--效果html开始--
div id="lottery"
table border="0" cellpadding="0" cellspacing="0"
tr
td class="lottery-unit lottery-unit-0"img src="images/1.png"/td
td class="lottery-unit lottery-unit-1"img src="images/2.png"/td
td class="lottery-unit lottery-unit-2"img src="images/4.png"/td
td class="lottery-unit lottery-unit-3"img src="images/3.png"/td
/tr
tr
td class="lottery-unit lottery-unit-11"img src="images/7.png"/td
td colspan="2" rowspan="2"a href="#"/a/td
td class="lottery-unit lottery-unit-4"img src="images/5.png"/td
/tr
tr
td class="lottery-unit lottery-unit-10"img src="images/1.png"/td
td class="lottery-unit lottery-unit-5"img src="images/6.png"/td
/tr
tr
td class="lottery-unit lottery-unit-9"img src="images/3.png"/td
td class="lottery-unit lottery-unit-8"img src="images/6.png"/td
td class="lottery-unit lottery-unit-7"img src="images/8.png"/td
td class="lottery-unit lottery-unit-6"img src="images/7.png"/td
/tr
/table
/div
js部分
script type="text/javascript" src="jquery-1.8.3.min.js"/script
script type="text/javascript"
var lottery={
index:-1, //当前转动到哪个位置，起点位置
count:0, //总共有多少个位置
timer:0, //setTimeout的ID，用clearTimeout清除
speed:20, //初始转动速度
times:0, //转动次数
cycle:50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
prize:-1, //中奖位置
init:function(id){
if ($("#"+id).find(".lottery-unit").length0) {
$lottery = $("#"+id);
$units = $lottery.find(".lottery-unit");
this.obj = $lottery;
this.count = $units.length;
$lottery.find(".lottery-unit-"+this.index).addClass("active");
};
},
roll:function(){
var index = this.index;
var count = this.count;
var lottery = this.obj;
$(lottery).find(".lottery-unit-"+index).removeClass("active");
index += 1;
if (indexcount-1) {
index = 0;
};
$(lottery).find(".lottery-unit-"+index).addClass("active");
this.index=index;
return false;
},
stop:function(index){
this.prize=index;
return false;
}
};
function roll(){
lottery.times += 1;
lottery.roll();
if (lottery.times lottery.cycle+10 lottery.prize==lottery.index) {
clearTimeout(lottery.timer);
lottery.prize=-1;
lottery.times=0;
click=false;
}else{
if (lottery.timeslottery.cycle) {
lottery.speed -= 10;
}else if(lottery.times==lottery.cycle) {
var index = Math.random()*(lottery.count)|0;
lottery.prize = index;
}else{
if (lottery.times lottery.cycle+10 ((lottery.prize==0 lottery.index==7) || lottery.prize==lottery.index+1)) {
lottery.speed += 110;
}else{
lottery.speed += 20;
}
}
if (lottery.speed40) {
lottery.speed=40;
};
//console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
lottery.timer = setTimeout(roll,lottery.speed);
}
return false;
}
var click=false;
window.onload=function(){
lottery.init('lottery');
$("#lottery a").click(function(){
if (click) {
return false;
}else{
lottery.speed=100;
roll();
click=true;
return false;
}
});
};
/script
本文标题：jquery九宫格,jquery九宫格抽奖手机端
路径分享：http://6mz.cn/article/dscpsji.html