我正在从 pokeapi.co 下载数据并将它们动态添加到表中。有一些统计数据和图像。我希望该图像在悬停时旋转。 (我在创建表格时动态添加了一个 id="pokeImage"。)我尝试在 CSS 中这样做:
#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);});
最佳答案
请参阅下面的代码片段，它处理鼠标悬停事件
$('#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(){
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: "https://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+'" onmouseover = "rotateImage(event)"/>' + '</td>' + '<td>' + hpVal + '</td>';
$('#pokedex1').append(row);
}
});
}
$('#pokedex1').append(table);
});
function rotateImage(event) {
$(event.target).css('transform', 'rotate(' + (Math.random()*45+45).toFixed(3) + 'deg)');
}
</script>
</html>添加了鼠标移出事件
<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(){
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: "https://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>';
$(document).on("mouseover", "#pokeImage", rotateImage);
$(document).on("mouseout", "#pokeImage", reRotateImage);
$('#pokedex1').append(row);
}
});
}
$('#pokedex1').append(table);
});
function rotateImage(event) {
$(event.target).css('transform', 'rotate(' + 355 + 'deg)');
}
function reRotateImage(event) {
$(event.target).css('transform', 'rotate(' + 0 + 'deg)');
}
</script>
</html>关于javascript - 在悬停/鼠标悬停时旋转从 api 下载的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44673603/