数码资讯
基于jQuery的金蛋金牌计划
首先给你看效果图： 查看演示下载源码 死的工作 我们需要准备道具（材料），相关图片，包括图片，粉碎后的金蛋蛋图片，粉碎后的花卉图片，和照片的锤子。 HTML 在页面上，我们有一个金蛋的桌子，有三个金蛋1, 2, 3号和一个锤子： 锤 一 二 三 上面的代码，把锤子。锤子，砸鸡蛋after.resul
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
首先给你看效果图：
查看演示下载源码
死的工作
我们需要准备道具（材料），相关图片，包括图片，粉碎后的金蛋蛋图片，粉碎后的花卉图片，和照片的锤子。
HTML
在页面上，我们有一个金蛋的桌子，有三个金蛋1, 2, 3号和一个锤子：
锤
一
二
三
上面的代码，把锤子。锤子，砸鸡蛋after.resulttip用于显示结果，没有胜利，三里放置了3个金蛋，我们使用CSS的装饰效果。
CSS
。鸡蛋{宽度：660px；身高：400px；保证金：50px汽车20px汽车；}
。鸡蛋的ul { Z指数：999；}
。egglist { padding-top：110px；位置：相对；宽度：660px；}
。egglist李{浮动：左；背景：URL（图像/ egg_1。PNG）没有重复的底部；宽度：158px；
身高：187px；鼠标指针；位置：相对；margin-left: 35px；}
。egglist李跨度{位置：绝对；宽度：30px；身高：60px；左：68px；顶部：64px；颜色：# ff0；
字体大小：42px；font-weight:大胆}
。egglist李。1 { background: url（图像/ egg_2。PNG）没有重复的底部；光标：默认；Z指数：300；}
。egglist li.curr燮{位置：绝对；背景：URL（图像/ img-4。PNG）没有重复；宽度：232px；
身高：181px；顶部：- 36px；左：- 34px；Z指数：800；}
。锤{背景：URL（图像/ img-6。PNG）没有重复；宽度：74px；身高：87px；位置：绝对的；
文本缩进：- 9999px；Z指数：150；左：168px；顶部：100px；}
。resulttip {位置：绝对；背景：# FFC；宽度：148px；填充：6px；Z指数：500；最高：200px；
左：10px；颜色：# F60；文本对齐：中心；溢出：隐藏；显示：无；Z指数：500；}
。resulttip B {字体大小：14px；线高度：24px；}
根据上面的代码，我们可以在页面中看到一个完整的金蛋场景。我们注意到我们使用了PNG图片。如果你的客户仍使用IE6，你可能需要透明地处理PNG图片。这篇文章不涉及它。
jQuery
接下来，我们必须使用jQuery代码来实现打破金蛋、打破鸡蛋和显示结果的整个过程。当然，旧的规则，例如用jQuery实现的程序，必须首先载入jQuery库文件。
首先，当老鼠滑到金蛋时，用来打碎金蛋的锤子只在金蛋的顶端。它可以使用位置（）来定位。
$（。egglist李）。Hover（function（）{）
VaR（这）脑= $（）。位置。左+ $（this）Width（）；
$（#锤），表明（）。Css（右，脑）；
}）
然后，在金蛋的点击，在挥舞着锤子砸向金蛋的过程。我们隐藏的编号数点击金蛋，然后调用自定义函数eggclick（）。
$（。egglist李）。Click（function（）{）
$（this）；
EggClick（$（this））；
}）；
最后，在用户自定义函数中eggclick（），我们使用jQuery的getJSON美元。方法发送一个Ajax请求的背景data.php，后台PHP程序将处理的奖金分配和返回的胜利的结果，我们使用动画（）实现落锤的动画，通过改变顶部和左实现一个简单的动画锤座，锤子在金蛋的方式回。当前，和then.resulttip金散，获胜的结果，没有胜利取决于运气和设置你的得奖回来的机会。看代码，砸金蛋eggclick（）函数：
功能eggclick（obj）{
无功_this = obj；
美元。getJSON（PHP 数据。
_this.unbind（点击'）； / /点击发布
$（。锤）。Css（{顶：_this.position（）。top-55，左：_this.position（）。左+ 185 }）；
$（。
顶：_this.position（25），
左：_this.position（左+ 125）。
}，30，函数（）{（）
_this.addclass（我）； / /鸡蛋破碎效果
_this.find（增刊）（显示）； / /金散
$（）
$（'。resulttip）。Css（{显示：阻止，顶部：'100px，左：_this.position（））。
左+ 45，不透明度：0 }）
。动画（{顶：'50px '，不透明度：1 }，功能（300），{ / /获奖的动画效果
如果（res.msg = = 1）{ / /返回结果
$（#结果）。Html（恭喜你，你得到+ +res.prize！；
其他{ }
$（#结果）。Html（可惜你没赢奖！）
}
}）；
}
）；
}）；
}
为了打金蛋更切合你的网站实际，你可以验证会员在有限的时间，之前粉碎鸡蛋，粉碎鸡蛋后赢得打破鸡蛋左联系等，看看具体网站的需求。
PHP
当data.php手柄的前端发送Ajax请求，我们用概率算法在基于获奖的概率的JSON格式的获奖结果输出。概率计算实例可以被称为：PHP + jQuery实现的绘图板奖
prize_arr美元=阵列（
0=阵列（'id' = > 1，'prize= >平板电脑，V = > 3），
1=阵列（'id' = > 2，'prize= >，数码相机，V = > 5），
2=阵列（'id' = > 3，'prize= >的音频，V = > 10），
3=阵列（'id' = > 4，'prize= > '4g，V = > 12），
4=阵列（'id' = > 5，'prize= >，Q币10元，V = > 20），
5=阵列（'id' = > 6，'prize= >也许下次可以哦，V = > 50），
）；
foreach（prize_arr美元美元美元关键= val）{
$ ARR { $瓦尔{ 'id' } } = { } $值V；
}
为摆脱= getRand（$ ARR）； / /根据一个ID奖获得概率
{ } =美元'msg RES的0:1（= = 6美元摆脱）； / /如果0不在
{ } =物'prize美元美元美元prize_arr { rid-1 } { 'prize}； / /
回声json_encode（合物）；
概率计算
函数getRand（$ proarr）{
结果=；
概率的总概率
$启源= array_sum（$ proarr）；
循环数组的概率
foreach（proarr美元美元美元关键=采购指）{
randnum美元（1美元= mt_rand，启源）；
如果（randnum美元美元采购指）{
$结果=键；
打破；
{人}
$启源= $采购指；
}
}
unset（$ proarr）；
返回$结果；
}
通过设置概率，我们可以看到，平板电脑的点击率为3%，几率为50%，然后点击demo试试运气。
查看演示下载源码
死的工作
我们需要准备道具（材料），相关图片，包括图片，粉碎后的金蛋蛋图片，粉碎后的花卉图片，和照片的锤子。
HTML
在页面上，我们有一个金蛋的桌子，有三个金蛋1, 2, 3号和一个锤子：
锤
一
二
三
上面的代码，把锤子。锤子，砸鸡蛋after.resulttip用于显示结果，没有胜利，三里放置了3个金蛋，我们使用CSS的装饰效果。
CSS
。鸡蛋{宽度：660px；身高：400px；保证金：50px汽车20px汽车；}
。鸡蛋的ul { Z指数：999；}
。egglist { padding-top：110px；位置：相对；宽度：660px；}
。egglist李{浮动：左；背景：URL（图像/ egg_1。PNG）没有重复的底部；宽度：158px；
身高：187px；鼠标指针；位置：相对；margin-left: 35px；}
。egglist李跨度{位置：绝对；宽度：30px；身高：60px；左：68px；顶部：64px；颜色：# ff0；
字体大小：42px；font-weight:大胆}
。egglist李。1 { background: url（图像/ egg_2。PNG）没有重复的底部；光标：默认；Z指数：300；}
。egglist li.curr燮{位置：绝对；背景：URL（图像/ img-4。PNG）没有重复；宽度：232px；
身高：181px；顶部：- 36px；左：- 34px；Z指数：800；}
。锤{背景：URL（图像/ img-6。PNG）没有重复；宽度：74px；身高：87px；位置：绝对的；
文本缩进：- 9999px；Z指数：150；左：168px；顶部：100px；}
。resulttip {位置：绝对；背景：# FFC；宽度：148px；填充：6px；Z指数：500；最高：200px；
左：10px；颜色：# F60；文本对齐：中心；溢出：隐藏；显示：无；Z指数：500；}
。resulttip B {字体大小：14px；线高度：24px；}
根据上面的代码，我们可以在页面中看到一个完整的金蛋场景。我们注意到我们使用了PNG图片。如果你的客户仍使用IE6，你可能需要透明地处理PNG图片。这篇文章不涉及它。
jQuery
接下来，我们必须使用jQuery代码来实现打破金蛋、打破鸡蛋和显示结果的整个过程。当然，旧的规则，例如用jQuery实现的程序，必须首先载入jQuery库文件。
首先，当老鼠滑到金蛋时，用来打碎金蛋的锤子只在金蛋的顶端。它可以使用位置（）来定位。
$（。egglist李）。Hover（function（）{）
VaR（这）脑= $（）。位置。左+ $（this）Width（）；
$（#锤），表明（）。Css（右，脑）；
}）
然后，在金蛋的点击，在挥舞着锤子砸向金蛋的过程。我们隐藏的编号数点击金蛋，然后调用自定义函数eggclick（）。
$（。egglist李）。Click（function（）{）
$（this）；
EggClick（$（this））；
}）；
最后，在用户自定义函数中eggclick（），我们使用jQuery的getJSON美元。方法发送一个Ajax请求的背景data.php，后台PHP程序将处理的奖金分配和返回的胜利的结果，我们使用动画（）实现落锤的动画，通过改变顶部和左实现一个简单的动画锤座，锤子在金蛋的方式回。当前，和then.resulttip金散，获胜的结果，没有胜利取决于运气和设置你的得奖回来的机会。看代码，砸金蛋eggclick（）函数：
功能eggclick（obj）{
无功_this = obj；
美元。getJSON（PHP 数据。
_this.unbind（点击'）； / /点击发布
$（。锤）。Css（{顶：_this.position（）。top-55，左：_this.position（）。左+ 185 }）；
$（。
顶：_this.position（25），
左：_this.position（左+ 125）。
}，30，函数（）{（）
_this.addclass（我）； / /鸡蛋破碎效果
_this.find（增刊）（显示）； / /金散
$（）
$（'。resulttip）。Css（{显示：阻止，顶部：'100px，左：_this.position（））。
左+ 45，不透明度：0 }）
。动画（{顶：'50px '，不透明度：1 }，功能（300），{ / /获奖的动画效果
如果（res.msg = = 1）{ / /返回结果
$（#结果）。Html（恭喜你，你得到+ +res.prize！；
其他{ }
$（#结果）。Html（可惜你没赢奖！）
}
}）；
}
）；
}）；
}
为了打金蛋更切合你的网站实际，你可以验证会员在有限的时间，之前粉碎鸡蛋，粉碎鸡蛋后赢得打破鸡蛋左联系等，看看具体网站的需求。
PHP
当data.php手柄的前端发送Ajax请求，我们用概率算法在基于获奖的概率的JSON格式的获奖结果输出。概率计算实例可以被称为：PHP + jQuery实现的绘图板奖
prize_arr美元=阵列（
0=阵列（'id' = > 1，'prize= >平板电脑，V = > 3），
1=阵列（'id' = > 2，'prize= >，数码相机，V = > 5），
2=阵列（'id' = > 3，'prize= >的音频，V = > 10），
3=阵列（'id' = > 4，'prize= > '4g，V = > 12），
4=阵列（'id' = > 5，'prize= >，Q币10元，V = > 20），
5=阵列（'id' = > 6，'prize= >也许下次可以哦，V = > 50），
）；
foreach（prize_arr美元美元美元关键= val）{
$ ARR { $瓦尔{ 'id' } } = { } $值V；
}
为摆脱= getRand（$ ARR）； / /根据一个ID奖获得概率
{ } =美元'msg RES的0:1（= = 6美元摆脱）； / /如果0不在
{ } =物'prize美元美元美元prize_arr { rid-1 } { 'prize}； / /
回声json_encode（合物）；
概率计算
函数getRand（$ proarr）{
结果=；
概率的总概率
$启源= array_sum（$ proarr）；
循环数组的概率
foreach（proarr美元美元美元关键=采购指）{
randnum美元（1美元= mt_rand，启源）；
如果（randnum美元美元采购指）{
$结果=键；
打破；
{人}
$启源= $采购指；
}
}
unset（$ proarr）；
返回$结果；
}
通过设置概率，我们可以看到，平板电脑的点击率为3%，几率为50%，然后点击demo试试运气。
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。