爲用戶顯示圖像src轉換

我爲手機應用程序做了一個簡單的設計，我只是想根據某個點擊事件更改div中圖像的src，但是這個src在另一個div中，當根據點擊src變化圖像的前一個src和下一個src之間的過渡出現爲用戶，我只是不希望這樣的笛福在應用程序..爲用戶顯示圖像src轉換

因此，所有我需要的是使src同時移動到應用程序的其他div而不讓用戶注意到這樣的事情

....這裏是我的HTML，CSS，JavaScript

document.getElementById("Golds").addEventListener('touchstart', function(){ 
 
\t window.location.href='#loginpage'; 
 
\t var x= document.getElementById("GymLogin"); 
 
\t x.src="goldsgymlogo.png"; 
 
\t x.style.display = "inline"; 
 
}); 
 
document.getElementById("Titans").addEventListener('touchstart', function(){ 
 
\t window.location.href='#loginpage'; 
 
\t var x= document.getElementById("GymLogin"); 
 
\t x.src="Titans.jpg"; 
 
\t x.style.display = "inline"; 
 
}); 
 
document.getElementById("Smart").addEventListener('touchstart', function(){ 
 
\t window.location.href='#loginpage'; 
 
\t var x= document.getElementById("GymLogin"); 
 
\t x.src="smart.png"; 
 
\t x.style.display = "inline"; 
 
}); 
 
document.getElementById("SamiaAllouba").addEventListener('touchstart', function(){ 
 
\t window.location.href='#loginpage'; 
 
\t var x= document.getElementById("GymLogin"); 
 
\t x.src="Samia-Allouba.jpg"; 
 
\t x.style.display = "inline"; 
 
}); 
 
document.getElementById("Fibers").addEventListener('touchstart', function(){ 
 
\t window.location.href='#loginpage'; 
 
\t var x= document.getElementById("GymLogin"); 
 
\t x.src="fibers.jpg"; 
 
\t x.style.display = "inline"; 
 
});

/* 
 
Thats My CSS 
 
*/ 
 

 
#GymLogin{ 
 
\t display: none; 
 
\t margin-left:30%; 
 
\t margin-top:15%; 
 
\t max-width:135px; 
 
\t max-height:135px; 
 
}

<!--HTML CODE HERE--> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Phone Gap trial</title> 
 
<link rel= 'stylesheet' href='css/bootstrap.css' /> 
 
<link rel= 'stylesheet' href='css/font-awesome.min.css' /> 
 
<link rel= 'stylesheet' href='css/style.css' /> 
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> 
 
<script type="text/javascript" charset="utf-8" src="cordova.js"></script> 
 
<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script> 
 
<script type="text/javascript" charset="utf-8" src="Torch.js"></script> 
 
</head> 
 

 
<body> 
 
<div id="start" class="ourteam text-center"> 
 
\t <!--start container--> 
 
\t <div class="team"> 
 
\t <section class="header"> 
 
\t \t <div> 
 
\t \t <h1>Train & Game</h1> 
 
\t \t </div> 
 
\t \t </section> 
 
\t \t <div class="container"> 
 
\t \t 
 
\t \t \t <div class="row"> 
 

 
\t \t \t <div class="col-xs-4"> 
 
\t \t \t <div class="person"> 
 
\t \t \t <img id="Golds" class="teamphotos img-circle" src="img\goldsgymlogo.png"/> 
 
\t \t \t <h6>Gold's Gym</h6> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="col-xs-4"> 
 
\t \t \t <div class="person"> 
 
\t \t \t <img id="Titans" class="teamphotos img-circle" src="img\Titans.jpg"/> 
 
\t \t \t <h6>Titans Gym</h6> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="col-xs-4"> 
 
\t \t \t <div class="person"> 
 
\t \t \t <img id="Smart" class="teamphotos img-circle" src="img\smart.png"/> 
 
\t \t \t <h6>Smart Gym</h6> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t \t </div> 
 
\t \t \t <br> 
 
\t \t \t <div class="row"> 
 
\t \t \t 
 
\t \t \t <div class="col-xs-6"> 
 
\t \t \t <div class="person"> 
 
\t \t \t <img id="SamiaAllouba" class="teamphotos img-circle" src="img\Samia-Allouba.jpg"/> 
 
\t \t \t <h6>Samia Allouba</h6> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="col-xs-6"> 
 
\t \t \t <div class="person"> 
 
\t \t \t <img id="Fibers" class="teamphotos img-circle" src="img\fibers.jpg"/> 
 
\t \t \t <h6>Fibers Gym</h6> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t </div> 
 

 
\t \t \t </div> 
 
\t \t \t <!--end container--> 
 
\t </div> 
 
\t <!--end team--> 
 
\t </div> 
 
<!--Our team div end--> 
 

 

 

 
<!-- Start Login Page --> 
 
<div data-role="page" id="loginpage" onblur="deletesrc()"> 
 
\t \t <img id="GymLogin" class="img-circle" src=""/> 
 
     <input type="text" size="15" id="Usernameinput" placeholder="Username"> 
 
     <span id="asterisk1" class="asterisk"> </span> 
 
     <input type="password" id="Passwordinput" placeholder="Password"> 
 
     <span id="asterisk2" class="asterisk"> </span> 
 
    <button class="btn btn-danger" id="GymName">Omar</button> 
 
</div> 
 
<!-- End Login Page --> 
 
<script src="js/jquery-2.1.4.min.js"> </script> 
 
<script src="js/jquery.mobile-1.4.5.min.js"> </script> 
 
<script src="js/bootstrap.min.js"> </script> 
 
<script src="js/index.js"></script> 
 
</body> 
 
</html>

來源

2015-10-08 Omar Abdel Meneim Zaki

雖然還有很多更好的方法做你想做什麼，你可以試試這個它可能會幫助

除了更改圖像「的.src」的，只是有多個圖像加載和隱藏，並改變你想要的顯示。

所以你的HTML becoms

<img id="golds" class="GymLogin img-circle" src="golds..."/> 
<img class="GymLogin img-circle" src="titans..."/> 
<img class="GymLogin img-circle" src="samia..."/> 
<img class="GymLogin img-circle" src="fibers..."/>

你的CSS

.GymLogin{ 
    opacity: 0; 
}

您的JavaScript

document.getElementById("Golds").addEventListener('touchstart', function(){ 
    $('.GymLogin').hide(); 
    $('#golds').show(); 
});

還沒有嘗試過，但你的想法。

來源

2015-10-08 07:04:09 MegaAppBear

嗯，非常感謝它的工作，但有一個小問題，因爲你讓我加載圖像5次，所以登錄div現在更大，有一個小部分過渡到底部，它影響了我的頁面但圖像緩衝或加載工作正常,,,所以任何想法是什麼問題或如何可以解決！？ @MegaAppBear –

你可以分享你的完整的CSS？ – MegaAppBear

對於遲到的回覆，我很抱歉，但已經完成了，非常感謝你，我找到了一個方法！ :) –

爲用戶顯示圖像src轉換

回答

相關問題