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

标签 javascript jquery html css

我试图在单击按钮时让轮盘赌旋转,但我似乎无法将从我的 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>

最佳答案

这是一个工作示例,对您的代码进行了一些更新。

就像@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'));
});

See this fiddle

关于javascript - 使用 css 和 jQuery 制作图像旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54886799/

相关文章:

javascript - 将数组的字段与javascript中具有不同长度的另一个数组合并

javascript - jquery 直接 id 选择不起作用,tag[id] 选择起作用

javascript - 没有数据时如何隐藏标签?

javascript - 将可折叠面板放在 ListView 中

javascript - 如何在每一行前面加上 `>` 前缀

javascript - JQuery .on ("click", function() ) 不起作用

html - 是否可以将 HTML 元素固定到另一个元素的底部?

javascript - js库支持各种数据结构? (就像java中的 Guava )

javascript - 在网站上打印当前年份的最短方法

html - 调整浏览器大小时右边的空白