jQuery图片去重网页小游戏代码.zip资源-CSDN文库

共11个文件

jpg：9个

js：1个

html：1个

版权申诉

jquery

jquery代码

jquery插件

jquery特效

92 浏览量 2023-09-21 00:21:56 上传评论收藏 64KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery图片去重网页小游戏代码.zip （11个子文件）

jquery.min.js 91KB

index.html 4KB

images

modle6.jpg 3KB

modle5.jpg 4KB

modle3.jpg 3KB

modle1.jpg 4KB

modle2.jpg 4KB

modle0.jpg 4KB

modle7.jpg 3KB

modle4.jpg 4KB

back1.jpg 3KB

<!DOCTYPE html> <html> <head> <title>jQuery图片去重网页小游戏代码</title> </head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <style type="text/css"> html,body{ padding: 0; background: #00bff3; margin: 0; } .page_mengceng{ position: fixed; top: 0; display: none; z-index: 1000; left: 0; height: 100%; width: 100%; } .card_border{ width: 340px; height: 340px; margin: 0 auto; margin-top: 100px; font-size: 0; } .card{ height: 73px; width: 73px; cursor: pointer; display: inline-block; box-shadow: 5px 5px rgba(0,0,0,0.5); overflow: hidden; border-radius: 10px; margin-left: 10px; margin-top: 10px; } .card_backImg{ position: relative; z-index: 1; height: 73px; width: 73px; } .card_img{ position: absolute; border-radius: 10px; height: 73px; width: 73px; } .card_IndexNum{ opacity: 0; z-index: -1; position: relative; } .card_backImg_active{ margin-top: -73px; margin-left: -73px; opacity: 0; -webkit-animation: active 0.3s; } @-webkit-keyframes active { 0% { margin-top: 0px; margin-left: 0px; opacity: 1; } 100% { margin-top: -73px; margin-left: -73px; opacity: 0; } } .card_backImg_Unactive{ margin-top: 0px; margin-left: 0px; opacity: 1; -webkit-animation: unactive 0.3s; } @-webkit-keyframes unactive { 0% { margin-top: -73px; margin-left: -73px; opacity: 0; } 100% { margin-top: 0px; margin-left: 0px; opacity: 1; } } </style> <body><script src="/demos/googlegg.js"></script> <div class="page_mengceng"></div> <div class="card_border"></div> </body> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> var ary=[0,1,2,3,4,5,6,7]; ary.push(...ary); var num=ary.length; var time=ary.length; var DomAry=[] var dobleAry_index=[]; var dobleAry_Num=[]; (function(){ for(var j=0;j<time;j++){ var random=Math.floor(Math.random()*num); for(var i=0;i<ary.length;i++){ if(random==i){ DomAry.push(ary[i]); $(".card_border").append("<div class='card'><div class='card_IndexNum'>"+ary[i]+"</div><img src='images/modle"+ary[i]+".jpg' class='card_img'><img src='images/back1.jpg' class='card_backImg'></div>") ary.splice(i,1); num-- } } } })() var el=document.getElementsByClassName("card_backImg"); for(var i=0;i<el.length;i++){ var a=el[i]; a.index=i; a.onclick=function() { $(this).removeClass('card_backImg_Unactive'); $(this).addClass('card_backImg_active'); dobleAry_Num.push($(this).siblings(".card_IndexNum").html()) dobleAry_index.push($(this).parent().index()) if(dobleAry_index.length==2){ if(dobleAry_Num[0]==dobleAry_Num[1]){ dobleAry_Num.length=0 dobleAry_index.length=0 }else{ $(".page_mengceng").show(); setTimeout(function(){ $(".page_mengceng").hide(); $(".card").eq(dobleAry_index[0]).children(".card_backImg").addClass('card_backImg_Unactive') $(".card").eq(dobleAry_index[1]).children(".card_backImg").addClass('card_backImg_Unactive') dobleAry_Num.length=0 dobleAry_index.length=0 },500) } } }; } </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p> </div> </html>

评论收藏

内容反馈

版权申诉