Jquery编写的世界杯主题卡片抽奖页面

  • R2_570219
    了解作者
  • 185.3KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-08 10:09
    上传日期
2014年巴西世界杯主题,32强球队卡片大抽奖的程序。
Jquery编写的世界杯主题卡片抽奖页面.zip
  • 2014世界杯抽奖.html
    5.4KB
  • jquery-1.11.0.js
    276.3KB
  • jquery.cookie.js
    3KB
  • BXZQ2014
  • 19.jpg
    2.8KB
  • 2.jpg
    3.2KB
  • 21.jpg
    2.8KB
  • 11.jpg
    2.7KB
  • 13.jpg
    3KB
  • 8.jpg
    3.2KB
  • 30.jpg
    3.1KB
  • 6.jpg
    2.4KB
  • 1.jpg
    3.2KB
  • 16.jpg
    2.5KB
  • 22.jpg
    2.9KB
  • 0.jpg
    2.6KB
  • 12.jpg
    2.5KB
  • 28.jpg
    2.9KB
  • 14.jpg
    3KB
  • 4.jpg
    2.8KB
  • 31.jpg
    2.6KB
  • 5.jpg
    3.1KB
  • 17.jpg
    2.6KB
  • 26.jpg
    3.1KB
  • 25.jpg
    15.3KB
  • 9.jpg
    2.9KB
  • 18.jpg
    2.9KB
  • 24.jpg
    2.8KB
  • cover.jpg
    18.6KB
  • 23.jpg
    2.7KB
  • 10.jpg
    2.8KB
  • 7.jpg
    2.7KB
  • 20.jpg
    2.9KB
  • 27.jpg
    2.4KB
  • 15.jpg
    2.8KB
  • 3.jpg
    2.9KB
  • 29.jpg
    2.6KB
内容介绍
<!DOCTYPE html> <html> <head> <title></title> <script src="jquery-1.11.0.js"></script> <script src="jquery.cookie.js"></script> <style> .card { display: inline-block; Width: 90px; margin: 5px; border: 2px solid gray; Height: 122px; border-radius: 5px; } .cardActive { } </style> </head> <script language="JavaScript" type="text/javascript"> var currentCard; var chooseTime =2;//用户可以选择的卡片数量 var leftTime = 2; var flag = 0; var myCards; $(function () { //initCards(); alert("恭喜您总共拥有" + chooseTime + "次机会抽取世界杯32强入围球队\n目前剩余次数:" + leftTime + "次.\n您可以通过点击球队卡片进行抽取!"); $("#cards img").mouseover(function () { $(this).attr("style", "border:2px solid white"); }).mouseout(function () { $(this).attr("style", "border:2px solid gray"); }).click(function () { currentCard = this; if (flag == chooseTime) { alert("您已经选过了!"); return; } $(this).animate({ width: '0px' }, 600).delay(300).animate({ width: '90px' }, 600); t = setTimeout("getRandomImg()", 1000); flag = flag + 1; $(this).unbind(); }); }); function initCards() { myCards = $.cookie('myCards'); if (typeof (myCards) == "undefined") return; var cards = myCards.split("|"); leftTime = cards.length; for (var i = 0; i < cards.length; i++) { $("#myCards").append(" <img id='mc'" + (new Date()).getMilliseconds() + " class='card' style='display:none;' src='" + cards[i] + "' />"); } } //动态远程获取随机球队卡片地址或者数据 function getRandomImg() { var a = Math.round(Math.random() * 1000 % 32); $(currentCard).attr("src", "BXZQ2014/" + a + ".jpg"); //隐藏图片 $(currentCard).hide(1000); //添加图片 $("#myCards").append(" <img id='mc'" + (new Date()).getMilliseconds() + " class='card' style='display:none;' src='" + $(currentCard).attr("src") + "' />"); $("#myCards img").show(1000); //if (typeof (myCards) == "undefined") // myCards = $(currentCard).attr("src"); //else // myCards = myCards + "|" + $(currentCard).attr("src"); //$.cookie("myCards", myCards, { expires: 7, path: '/' }); } </script> <body> <h1>2014巴西世界杯马上开赛啦!金圣送您球队卡片和大礼,与您共享激情!</h1> <hr> <div id="cards" style="float: left; border: 1px solid red; Width: 900px;"> <div> </div> <div> </div> <div> </div> <div> </div> </div> <div id="myCards" style="float: right; border: 1px solid red; Width: 300px; text-align: center;"> <h3>我拥有的卡片:</h3> <hr /> </div> </body> </html>
评论
    相关推荐
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jquery1.32
      jquery-1.3.2.min.js 最新 jquery-1.2.6-vsdoc-cn.js 中文注释版 jquery-1.2.6.pack.js 压缩后的直接使用(推荐) jquery-1.2.6.min.js 精简的版本(学习用) jquery-1.2.6.js 学习用的(97k) jquery_0.js 初始版
    • JQuery资料
      JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 ...
    • jqueryDemo
      初学jquery的非常不错的demo (描述重点就可以了啊。还要有字数的限制。。 初学jquery的非常不错的demo 初学jquery的非常不错的demo 初学jquery的非常不错的demo )
    • jquery
      jquery
    • jquery
      Ajax使用例子(jQuery)
    • JQuery
      jQuery查询