本文分享了如何使用jQuery创建一个图片抽奖效果。抽奖界面由两张背景图片和两个按钮（开始、结束）组成。点击开始按钮，下层图片跟随上层图片变化，最终两张图片一致。文章涉及HTML布局、CSS样式设计及jQuery实现动画逻辑。
今天我和大家分享一下图片抽奖的实现，下面是我做的图片抽奖效果案例，如下图所示：
首先我们看到，它是由两张背景图片，两个按钮，一个开始按钮，一个结束按钮组成。我们要实现点击开始按钮时，下面的图片跟着上面的图片变换进行显示出来，最后是以两张图片一样的向大家展示出来。
一 写HTML布局代码
结构布局：先写一个div，里面包含一个Img图片标签，显示背景图片部分，再写一个div，显示开始，结束按钮部分，还有一个div，显示下面一个背景图片部分。
<body>
<div id="content">
<img src="img/h3.jpg" id="one"/>
<!--敬请期待-->
</div>
<div id="ctrl">
<button id="start" class="beStart">开始</button>
<button id="stop" class="beStop">结束</button>
</div>
<div id="second"&
最低0.47元/天 解锁文章
扫一扫
868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
