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;

}

相关问答

Q1: 九宫格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');

Q2: 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