我使用 jquery animate 函数开发了如下匹配的游戏。它的工作完全符合我的预期。这是我的游戏 http://jsfiddle.net/Manivasagam/z4aLva34/40/ .我的问题是,当我在我的系统中运行这个游戏时,它工作正常,如下图所示,
但是当我在其他系统中运行时,它的对齐方式会自动改变(黑色),如下图所示,
css 我正在使用什么,
#main{ width: 800px; border: 1px solid #f00}
#first {
float:left; /* add this */
height: 350px;
padding-left: 0px;
}
#second {
text-align:left;
float:right;
height: 350px;
}
.dropzone {
margin: 5px;
padding: 10px!important;
border: 2px dashed #f0ad4e;
border-radius: 5px;
background-color: #eeeeee;
z-index: 50;
float: left;
text-align: center;
list-style:none;
}
.item {
margin: 5px;
padding: 10px!important;
border: 2px solid #5bc0de;
border-radius: 5px;
background-color: #eeeeee;
z-index: 9999;
float: left;
text-align: center;
list-style:none;
}
label, span { position: relative; }
jsp:
<div id="main" align="center">
<div id="first" class="nav nav-justified">
<label id="Cat" class="dropzone">Cat</label><br><br><br>
<label id="Snake" class="dropzone">Snake</label><br><br><br>
<label id="Cow" class="dropzone">Cow</label><br><br><br>
<label id="Afor" class="dropzone">A for</label><br><br><br>
<label id="Cfor" class="dropzone">C for</label><br><br><br>
</div>
<div id="second">
<label id="Cow" class="item" name="Milk">Milk</label><br><br><br>
<label id="Cat" class="item" name="Rat">Rat</label><br><br><br>
<label id="Snake" class="item" name="Eagle">Eagle</label><br><br><br>
<label id="Cfor" class="item" name="Cherry">Cherry</label><br><br><br>
<label id="Afor" class="item" name="Apple">Apple</label><br><br><br>
</div>
</div>
如何解决这个问题?
最佳答案
工作演示 Jsfiddle
$(function(){
var count=0;
var click=0;
var i=1;
$('#textid').val('');
$('#textid2').val('');
//$('.item').prop('disabled','disabled');
$('#successMessage').hide();
$("#errorMessage").hide();
$('.dropzone').attr('Disabled',false);
$('.item').attr('Disabled',false);
$('.dropzone').click(function(){
var x,y;
var Ans = $(this).attr('id');
$(this).animate({left:"250px"},"slow" );
//$(this).effect("highlight", {});
//$(this).blink();
T = $("#"+Ans).offset().top;
L = $("#"+Ans).offset().left;
// alert('x :'+T+'\n'+'y :'+L);
//var lname = $(this).attr('name');
$('#textid').val(Ans);
var textval=$('#textid2').val();
//alert(textval);
//$('#textid2').val(lname);
if(textval!=""){
//alert(Ans+'\n'+'#'+textval);
$('#'+textval).animate({left:"0px"},"slow" );
}
$('#textid2').val(Ans);
//alert('#'+Ans);
//$('label[name='+lname+']').animate({right:"200px"},"slow" );
//alert(Ans);
});
$('.item').click(function(){
var Ques =$(this).attr('id');
var lname = $(this).attr('name');
$(this).animate({right:'250px'});
var Ans =$('#textid').val();
var text2 =$('#textid2').val();
if(text2=="")
{
$(this).animate({right:"0px"});
}
//alert(lname);
var T = $("#"+Ans).offset().top;
var L = $("#"+Ans).offset().left;
// alert('x :'+T+'\n'+'y :'+L);
//alert('label name :'+lname);
if(Ques==Ans)
{
//alert("matched");
M = $(this).offset().top;
N = $(this).offset().left;
M-=T;
N-=L+120;
//alert(M+"\n"+N);
$(this).animate({bottom:M+'px'});
$(this).animate({right:N+'px'});
var isimagecheck=$('#imageyestext').val();
// alert(isimagecheck);
if(i==1){
$("#"+Ans).css({'background-color':'red','color':'white'});
if(isimagecheck=="no"){
$('input[name='+lname+']').css({'background-color':'red','color':'white'});
}
else
{
$(this).css({'background-color':'red','color':'white'});
}
}
else if(i==2){
$("#"+Ans).css({'background-color':'green','color':'white'});
if(isimagecheck=="no"){
$('input[name='+lname+']').css({'background-color':'green','color':'white'});
}
else
{
$(this).css({'background-color':'green','color':'white'});
}
}
else if(i==3){
$("#"+Ans).css({'background-color':'yellow','color':'black'});
if(isimagecheck=="no"){
$('input[name='+lname+']').css({'background-color':'yellow','color':'black'});
}
else
{
$(this).css({'background-color':'yellow','color':'white'});
}
}
else if(i==4){
$("#"+Ans).css({'background-color':'gray','color':'white'});
if(isimagecheck=="no"){
$('input[name='+lname+']').css({'background-color':'gray','color':'white'});
}
else
{
$(this).css({'background-color':'gray','color':'white'});
}
}
else if(i==5){
$("#"+Ans).css({'background-color':'pink','color':'white'});
if(isimagecheck=="no"){
$('input[name='+lname+']').css({'background-color':'pink','color':'white'});
}
else
{
$(this).css({'background-color':'pink','color':'white'});
}
}
else if(i==6){
$("#"+Ans).css({'background-color':'#339933','color':'white'});
if(isimagecheck=="no"){
$('input[name='+lname+']').css({'background-color':'#339933','color':'white'});
}
else
{
$(this).css({'background-color':'#339933','color':'white'});
}
}
else if(i==7){
$("#"+Ans).css({'background-color':'pink','#666633':'white'});
if(isimagecheck=="no"){
$('input[name='+lname+']').css({'background-color':'#666633','color':'white'});
}
else
{
$(this).css({'background-color':'#666633','color':'white'});
}
}
else if(i==8){
$("#"+Ans).css({'background-color':'pink','#CC9900':'white'});
if(isimagecheck=="no"){
$('input[name='+lname+']').css({'background-color':'#CC9900','color':'white'});
}
else
{
$(this).css({'background-color':'#CC9900','color':'white'});
}
}
$('input[name='+lname+']').prop('disabled',true);
$("#"+Ans).attr('disabled',true);
$(this).attr('disabled',true);
$('#textid2').val('');
$('#textid').val('');
count++;
i++;
}
else
{
$("#" + Ans).animate({left:"0px"});
$(this).animate({right:"0px"});
$('#textid2').val('');
$('#textid').val('');
click++;
}
function successMessagestyle()
{
$('#successMessage').animate( {
left: '550px',
top: '180px',
width: '400px',
height: '110px',
opacity: 1
} );
}
function errorMessagestyle()
{
$('#errorMessage').animate( {
left: '815px',
top: '180px',
width: '350px',
height: '110px',
opacity: 1
} );
}
if(count==5)
{
$("#successMessage").show();
$("#successbuttonid").blink();
$("#successbuttonid").css({'color':'green'});
successMessagestyle();
}
if(click==6)
{
$("#errorMessage").show();
$("#errorbuttonid").blink();
$("#errorbuttonid").css({'color':'red'});
errorMessagestyle();
$('.item').attr('disabled', true);
$('.dropzone').attr('disabled', true);
}
});
});
function PlayAgain()
{
$("#errorMessage").hide();
location.reload(true);
}
//blink jquery plugin
(function($)
{
$.fn.blink = function(options)
{
var defaults = { delay:500 };
var options = $.extend(defaults, options);
return this.each(function()
{
var obj = $(this);
setInterval(function()
{
if($(obj).css("visibility") == "visible")
{
$(obj).css('visibility','hidden');
}
else
{
$(obj).css('visibility','visible');
}
}, options.delay);
});
}
}(jQuery))
*{box-zizing: border-box; padding: 0; margin: 0}
.dropzone {
z-index: 50;
border: 2px dashed #f0ad4e;
}
.item {
z-index: 9999;
border: 2px solid #5bc0de;
}
label, span {
position: relative;
}
label{
display: block;
margin: 5px;
padding: 10px;
border-radius: 5px;
background-color: #eeeeee;
text-align: center;
list-style:none;
}
#main{ width: 800px; border: 1px solid #f00; position: relative}
#first,#second{height: 350px;}
#first {
float:left; /* add this */
padding-left: 0px;
}
#second {
text-align:left;
float:right;
}
#successMessage {
position: absolute;
left: 580px;
top: 250px;
width: 0;
height: 0;
z-index: 100;
background: #dfd;
border: 2px solid #333;
border-radius: 10px;
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 20px;
}
#errorMessage {
position: absolute;
left: 580px;
top: 250px;
width: 0;
height: 0;
z-index: 100;
background: #dfd;
border: 2px solid #333;
border-radius: 10px;
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="main" align="center">
<div id="first" class="nav nav-justified">
<label id="Cat" class="dropzone">Cat</label>
<label id="Snake" class="dropzone">Snake</label>
<label id="Cow" class="dropzone">Cow</label>
<label id="Afor" class="dropzone">A for</label>
<label id="Cfor" class="dropzone">C for</label>
</div>
<div id="second">
<label id="Cow" class="item" name="Milk">Milk</label>
<label id="Cat" class="item" name="Rat">Rat</label>
<label id="Snake" class="item" name="Eagle">Eagle</label>
<label id="Cfor" class="item" name="Cherry">Cherry</label>
<label id="Afor" class="item" name="Apple">Apple</label>
</div>
</div>
<input type="hidden" id="textid" value="" >
<input type="hidden" id="textid2" value="">
<div id="successMessage" align="center">
<h2 id="successbuttonid">You did it!</h2>
<button id="" onclick="PlayAgain()">Play Again</button>
</div>
<div id="errorMessage" align="center">
<h2 id="errorbuttonid">Sorry! You Lost! You cliked 6 times wrong answer</h2>
<button id="" onclick="PlayAgain()">Play Again</button>
</div>
关于jquery - css 设计更改设备到设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27201456/