jQuery筛子动画-优快云博客

本文链接：https://blog.youkuaiyun.com/hxl200209/article/details/122035046

制作一个jq的筛子，我先给点击看看效果

先是一个筛子

然后点击的时候就开始旋转如下图

最后再生成一个随机的点数，如下图

其实代码也很简单，首先需要准备好一张筛子1-6点和它旋转时的图片的图片如下图

看一下css样式吧

.demo {

width: 250px;

height: 120px;

margin: 10px auto;

}

.wrap {

width: 90px;

height: 90px;

margin: 120px auto 30px auto;

position: relative;

}

.dice {

width: 90px;

height: 90px;

background: url('../../Document/Notice/Image/dice.png');

cursor: pointer;

}

.dice_1 {

background-position: -5px -4px;

}

.dice_2 {

background-position: -5px -107px;

}

.dice_3 {

background-position: -5px -212px;

.dice_1-6就是筛子1-6点图片的位置

}

.dice_4 {

background-position: -5px -317px;

}

.dice_5 {

background-position: -5px -427px;

}

.dice_6 {

background-position: -5px -535px;

}

.dice_t {

background-position: -5px -651px;

}

.dice_s {

background-position: -5px -763px; 这些就是旋转时的图片位置

}

.dice_e {

background-position: -5px -876px;

}

p#result {

text-align: center;

font-size: 16px;

}

p#result span {

font-weight: bold;

color: #f30;

margin: 6px;

}

#dice_mask { //加遮罩

width: 90px;

height: 90px;

background: #fff;

opacity: 0;

position: absolute;

top: 0;

left: 0;

z-index: 999;

}

</style>

接下来就是布局和js

<body>

</div>

<p id="result">请直接点击上面的色子！</p>

</div>

$(function () {

var dice = $("#dice");

dice.click(function () {

$(".wrap").append("<div id='dice_mask'></div>");//加遮罩

dice.attr("class", "dice");//清除上次动画后的点数

dice.css('cursor', 'default');

var num = Math.floor(Math.random() * 6 + 1);//产生随机数1-6

dice.animate({ left: '+2px' }, 100, function () {

dice.addClass("dice_t");

}).delay(200).animate({ top: '-2px' }, 100, function () {

dice.removeClass("dice_t").addClass("dice_s");

}).delay(200).animate({ opacity: 'show' }, 600, function () {

dice.removeClass("dice_s").addClass("dice_e");

}).delay(100).animate({ left: '-2px', top: '2px' }, 100, function () {

dice.removeClass("dice_e").addClass("dice_" + num); //通过生成的随机数来决定用哪一个位置的图片

$("#result").html("您掷得点数是<span>" + num + "</span>");

dice.css('cursor', 'pointer');

$("#dice_mask").remove();//移除遮罩

});

</script>

</body>

【无标题】