时间戳

首页 > 解决方案 > 使用 css 和 jQuery 使图像旋转

javascript - 使用 css 和 jQuery 使图像旋转

问题描述

单击按钮时，我试图使轮盘赌旋转，但我似乎无法将从我的 js 文件生成的随机数传递给 css

JS

function roulette_spin(btn){
var rand = Math.floor(Math.random() * 720) + 540;

$('.roulette_wheel').css('transform','rotate('+rand+'deg)');
}

HTML

<body>
<div class="roulette_wheel" style="z-index: 0;">
    <img src="ayy.jpg" width="500px" height="500px" />
    <button value="spin" onclick="roulette_spin(this)">SPIN</button>
</div>

标签： javascriptjqueryhtmlcss

解决方案

这是一个工作示例，其中包含对您的代码的一些更新。

就像@H.Figueiredo 建议的那样，我已将旋转选择器更改为img以避免按钮旋转。

HTML 

<div class="roulette_wheel" style="z-index: 0;">
    <img src="https://picsum.photos/200/300" width="500px" height="500px" />
    <button class="spin" value="spin">SPIN</button>
</div>

CSS

function roulette_spin(btn){    
    var rand = Math.floor(Math.random() * 720) + 540;

    $('.roulette_wheel img').css('transform','rotate('+rand+'deg)');
}


$('.spin').click(function(){
    roulette_spin($(this).siblings('img'));
});

看到这个小提琴

推荐阅读