热门关键字:
jquery > jquery教程 > jquery教程 > HTML和PHP网站设计实例

HTML和PHP网站设计实例

336
作者:管理员
发布时间:2021/5/27 19:29:36
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4808
  HTML部分:


  首先我们需要准备两粒色子和奖品素材,这些作者已经打包上传了,请大家放心下载。我们将在html页面中写下如下的html结构代码,。wrap用来放置色子和提示信息,#prize则是用来放置奖品的。


  CSS部分:


  我们要用CSS技术来将页面布局合理规范化,我们将奖品围成一个矩形,共10个位置,将两粒色子定位在矩形的中央,抽奖时可以直接点击中间的色子。这些我们可以用CSS的定位技术来实现页面布局。


  。demo{width:650px; height:420px; margin:60px auto 10px auto; position:relative; }


  。wrap{width:200px; height:100px; position:absolute; margin-left:220px; margin-top:140px; z-index:1000;}


  #msg{display:none;width:50px; height:20px; padding:4px; background:#ffc; border:1px solid #fc9;


  text-align:center; color:#f30; font-size:18px; position:absolute; z-index:1001; right:-20px; top:-10px}


  。dice{width:90px; height:90px; display:block; float:left; background:url(dice.png) no-repeat; cursor:pointer}


  #dice_mask{width:200px; height:100px; background:#fff; opacity:0; position:absolute; top:0; left:0; z-index:999}


  。dice_1{background-position:-5px -4px}


  。dice_2{background-position:-5px -107px}


  。dice_3{background-position:-5px -212px}


  。dice_4{background-position:-5px -317px}


  。dice_5{background-position:-5px -427px}


  。dice_6{background-position:-5px -535px}


  。dice_t{background-position:-5px -651px}


  。dice_s{background-position:-5px -763px}


  。dice_e{background-position:-5px -876px}


  #prize{position:relative}


  #prize li{position:absolute; width:150px; height:112px; border:1px solid #d3d3d3}


  #d_0{left:0; top:0}


  #d_1{left:160px; top:0}


  #d_2{left:320px; top:0}


  #d_3{left:480px; top:0}


  #d_4{left:480px; top:128px}


  #d_5{left:480px; top:256px}


  #d_6{left:320px; top:256px}


  #d_7{left:160px; top:256px}


  #d_8{left:0; top:256px}


  #d_9{left:0; top:128px}


  。mask{opacity: 0.6; width:150px; height:112px; line-height:32px; background:#ffc;


  z-index:1001; position:absolute; top:0; left:0; text-align:center; font-size:16px}


  jQuery部分:


  我们使用jQquery来完成前端动作,包括掷色子动画,仿大富翁奖品逐步运动动画,其中有防重复点击知识、ajax交互知识,动画提示知识。整个 操作流程可简单概括为:点击色子->向dice.php发送ajax请求->完成掷色子动画->提示点数->逐步运动动画到最终 奖品位置停止->完成抽奖。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐