从悬停/鼠标悬停的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上旋转图像

回答

相关问题