從懸停/鼠標懸停的api上旋轉圖像

我正在從pokeapi.co下載數據並動態地將它們添加到表格中。有一些統計數字和圖像。我希望該圖像在懸停時旋轉。（我動態添加一個id = 「pokeImage」在創建表）。我試圖做的是，在CSS：從懸停/鼠標懸停的api上旋轉圖像

#pokeImage:hover {-webkit-transform: rotate(360deg); 
     transform: rotate(360deg);}

和jQuery中：

$('#pokeImage').on('click', function() { 
$(this).css({ 
    transform: 'rotate(' + (Math.random()*45+45).toFixed(3) + 'deg)' 
});

但沒有奏效。你有什麼建議如何做到這一點？謝謝

編輯這是我如何獲取數據，把它放在一個表，並顯示它

$('#getPokemons').click(function(){ 
var table = document.createElement('table'); 
     table.className = "table table-condensed"; 
     table.setAttribute("id", "ajaxTable"); 

     var header = document.createElement('tr'); 
     header.innerHTML = '<th> Name </th><th> Image </th><th> HP </th>'; 
     header.setAttribute("id", "tableHeader"); 
     table.appendChild(header); 

var random = Math.floor(Math.random()*100); 
for(var i = random ; i <= random + 10; i++){ 
$.ajax({ 
    type: "GET", 
    url: "http://pokeapi.co/api/v2/pokemon/"+i+"/", 
    dataType: 'json', 
    success: function(response){ 
     var name = response.forms[0].name; 
     var imgUrl = response.sprites.front_default; 
     var hpName = response.stats[5].stat.name ; 
     var hpVal= response.stats[5].base_stat; 

     var row = document.createElement('tr'); 
     row.innerHTML = '<td>' + name + '</td>' + '<td>' + '<img id="pokeImage" src ="'+imgUrl+'"/>' + '</td>' + '<td>' + hpVal + '</td>'; 
     $('#pokedex1').append(row); 

    } 
});} $('#pokedex1').append(table);});

來源

2017-06-21 Keira09

如果你需要在mouseover上旋轉，那麼你需要使用鼠標懸停事件，但是你使用的是點擊。即使您點擊圖像，它是不是工作？ – QuestionAndAnswer

它不是在單擊任一...我只是嘗試不同的功能，看看有什麼不對。 – Keira09

見下面摘錄的鼠標懸停事件及其工作

$('#pokeImage').on('mouseover', function() { 
 
    $(this).css({ 
 
     transform: 'rotate(' + (Math.random()*45+45).toFixed(3) + 'deg)' 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="pokeImage" src= "http://images.indianexpress.com/2017/06/oneplus5_final_image.jpg">

更新代碼片段

<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="getPokemons" value="submit">Click</button> 
 
<div id="pokedex1"></div> 
 
<script> 
 
$('#getPokemons').click(function(){ 
 
\t var table = document.createElement('table'); 
 
\t table.className = "table table-condensed"; 
 
\t table.setAttribute("id", "ajaxTable"); 
 

 
\t var header = document.createElement('tr'); 
 
\t header.innerHTML = '<th> Name </th><th> Image </th><th> HP </th>'; 
 
\t header.setAttribute("id", "tableHeader"); 
 
\t table.appendChild(header); 
 

 
\t var random = Math.floor(Math.random()*100); 
 
\t for(var i = random ; i <= random + 10; i++){ 
 
\t \t $.ajax({ 
 
\t \t \t type: "GET", 
 
\t \t \t url: "https://pokeapi.co/api/v2/pokemon/"+i+"/", 
 
\t \t \t dataType: 'json', 
 
\t \t \t success: function(response){ 
 
\t \t \t \t var name = response.forms[0].name; 
 
\t \t \t \t var imgUrl = response.sprites.front_default; 
 
\t \t \t \t var hpName = response.stats[5].stat.name ; 
 
\t \t \t \t var hpVal= response.stats[5].base_stat; 
 

 
\t \t \t \t var row = document.createElement('tr'); 
 
\t \t \t \t row.innerHTML = '<td>' + name + '</td>' + '<td>' + '<img id="pokeImage" src ="'+imgUrl+'" onmouseover = "rotateImage(event)"/>' + '</td>' + '<td>' + hpVal + '</td>'; 
 
\t \t \t \t $('#pokedex1').append(row); 
 
\t \t \t } 
 
\t \t }); 
 
\t }  
 
\t $('#pokedex1').append(table); 
 
}); 
 
function rotateImage(event) { 
 
\t $(event.target).css('transform', 'rotate(' + (Math.random()*45+45).toFixed(3) + 'deg)'); 
 
} 
 
</script> 
 
</html>

mouseout事件添加

<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="getPokemons" value="submit">Click</button> 
 
<div id="pokedex1"></div> 
 
<script> 
 
$('#getPokemons').click(function(){ 
 
\t var table = document.createElement('table'); 
 
\t table.className = "table table-condensed"; 
 
\t table.setAttribute("id", "ajaxTable"); 
 

 
\t var header = document.createElement('tr'); 
 
\t header.innerHTML = '<th> Name </th><th> Image </th><th> HP </th>'; 
 
\t header.setAttribute("id", "tableHeader"); 
 
\t table.appendChild(header); 
 

 
\t var random = Math.floor(Math.random()*100); 
 
\t for(var i = random ; i <= random + 10; i++){ 
 
\t \t $.ajax({ 
 
\t \t \t type: "GET", 
 
\t \t \t url: "https://pokeapi.co/api/v2/pokemon/"+i+"/", 
 
\t \t \t dataType: 'json', 
 
\t \t \t success: function(response){ 
 
\t \t \t \t var name = response.forms[0].name; 
 
\t \t \t \t var imgUrl = response.sprites.front_default; 
 
\t \t \t \t var hpName = response.stats[5].stat.name ; 
 
\t \t \t \t var hpVal= response.stats[5].base_stat; 
 

 
\t \t \t \t var row = document.createElement('tr'); 
 
\t \t \t \t row.innerHTML = '<td>' + name + '</td>' + '<td>' + '<img id="pokeImage" src ="'+imgUrl+'" />' + '</td>' + '<td>' + hpVal + '</td>'; 
 
\t \t \t \t $(document).on("mouseover", "#pokeImage", rotateImage); 
 
\t \t \t \t $(document).on("mouseout", "#pokeImage", reRotateImage); 
 
\t \t \t \t $('#pokedex1').append(row); 
 
\t \t \t } 
 
\t \t }); 
 
\t }  
 
\t $('#pokedex1').append(table); 
 
}); 
 
function rotateImage(event) { 
 
\t $(event.target).css('transform', 'rotate(' + 355 + 'deg)'); 
 
} 
 
function reRotateImage(event) { 
 
\t $(event.target).css('transform', 'rotate(' + 0 + 'deg)'); 
 
} 
 
</script> 
 
</html>

來源

2017-06-21 10:39:13

我試着用你的代碼，但仍然無效:( – Keira09

你得到任何錯誤？。更新你的問題或提供小提琴，以便我可以幫助你。 –

更新了我的js。我沒有得到任何錯誤 – Keira09

也許這個例子會有所幫助。即使沒有js旋轉工作。

.someImage { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
} 
 

 
.someImage:hover { 
 
    transform: rotate(45deg); 
 
}

<div class="someImage"></div>

來源

2017-06-21 10:41:18 QuestionAndAnswer

您正在使用的的CSS選擇了錯誤的語法。它的.css(propertyName, value)，如在documentation

中所述你的情況，你應該使用。

$(this).css('transform', 'rotate(' + (Math.random()*45+45).toFixed(3) + 'deg)'));

查看下面的代碼片段的工作示例。

$('#pokeImage').on('mouseover', function() { 
 
    $(this).css('transform', 'rotate(' + (Math.random()*45+45).toFixed(3) + 'deg)'); 
 
}); 
 

 
// Optionally, to rotate it back when not hovering 
 
$('#pokeImage').on('mouseout', function() { 
 
    $(this).css(
 
    'transform', 'rotate(0deg)'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="pokeImage" src="http://placehold.it/100x70">

此外，如果動態添加元素（如通過一個AJAX請求），則需要添加的事件處理程序動態地爲好。試試這個：

/* ... */ 

var row = document.createElement('tr'); 
row.innerHTML = '<td>' + name + '</td>' + '<td>' + '<img id="pokeImage" src ="'+imgUrl+'"/>' + '</td>' + '<td>' + hpVal + '</td>'; 

$(row).on('mouseout', function() { 
    $(this).css(
    'transform', 'rotate(0deg)'); 
}); 

$('#pokedex1').append(row); 

/* ... */

來源

2017-06-21 10:43:45

我試過你的解決方案，但不幸的是我沒有工作:( – Keira09

@ Keira09你可以分享一些更多的上下文，以及一些周圍的代碼嗎？這段代碼在代碼片段中工作，所以它也應該爲你工作。 –

問題更新了我的js – Keira09

從懸停/鼠標懸停的api上旋轉圖像

回答

相關問題