淘宝抽奖html 页面,基于jQuery实现的双11天猫拆红包抽奖效果

本文实例讲述了jQuery实现的双11天猫拆红包抽奖效果代码，是一款基于jquery+css3实现的鼠标点击红包摇一摇抽奖代码，具有点击抽奖后红包摇动并弹出抽奖结果信息的功能，分享给大家供大家参考。具体如下：

运行效果截图如下：

具体代码如下：

HTML部分：

恭喜抽中棒棒糖一枚！

说明：

.opacity 是抽中奖的遮罩层；

.red 是抽奖图片；

.windows 是抽中奖的界面

CSS部分：

@-webkit-keyframes shake {

0%{

-webkit-transform: rotate(2deg) translate3d(0,0,0)

}

50%{

-webkit-transform: rotate(-2deg) translate3d(0,0,0)

}

100%{

-webkit-transform: rotate(2deg) translate3d(0,0,0)

}

摇奖的过程，就是利用CSS的transform :rotate。配合animation;

.red {

width:300px;

height:345px;

border-radius:15px;

box-shadow:1px1px20px#666;

position: fixed;

top:50%;

left:50%;

overflow: hidden;

margin-left:-150px;

margin-top:-172px;

transform-origin:50%100%;

-webkit-transform-origin:50%100%;

}

这里，我们让旋转的起点为图片的底部中心。

transform-origin:50%100%;

-webkit-transform-origin:50%100%;

jQuery部分：

$(document).ready(function(){

$(".red").click(function(){

$(this).addClass("shake");

setTimeout(function(){

$(".red").removeClass("shake");

$(".windows").fadeIn();

$(".opacity").fadeIn();

},2000);

});

$(".close").click(function(){

$(this).parent().fadeOut();

$(".opacity").fadeOut();

$(".windows").css("display","none");

})

});

点击按钮，添加shake类。加个定时器，2s后去掉shake类。

demo下载：点进来下载

这就是为大家准备的双十一红包，在即将到来的双十二中大家可以动手实现双12拆红包抽奖功能。

淘宝抽奖html 页面,基于jQuery实现的双11天猫拆红包抽奖效果相关推荐

淘宝电商页面和产品海报设计PSD分层素材模板
电商影响越来越大,已经渗透的我们日常生活的各个方面,很多以前不懂也不关心电商的客户也激动的做电商,以为电商就是把产品拍照片上传到淘宝上,就开始了电商生意.我只想说理想很丰满,现实很骨感.若只想打开淘宝 ...
不能打开淘宝单个商品页面
上网基本所有网站都正常(当然youtube是上不了了,要是在镇上能上才不正常呢),淘宝网站也都基本ok,但是就是淘宝的商品页面打不开,机子上有chrome和IE9两个浏览器,都是不行,每次都是停在re ...
web淘宝电商页面搭建
web淘宝电商页面搭建点击此处下载完整代码图片效果展示首屏内容次屏内容整体代码并不包含JavaScript部分,因此页面为静态页面,但代码包含了淘宝网的鼠标触发事件.
做好淘宝客单页面的几个技巧和方法
今天来和各位站长朋友谈谈做好淘宝客单页面的几个技巧和方法. 相信大家都知道,单页面是目前比较主流的淘宝客推广形式之一,由于它的方向性较强.转化率较高.建站难度和后期维护也比较简单轻松,因此得到 ...
HTML实战案例4：制作淘宝店铺列表页面
实战案例4:制作淘宝店铺列表页面一.完整的页面效果图二.文本素材淘宝首页> 店铺街> 所有店铺(4626173) 淘店店铺类目韩都衣舍旗舰店 ...
使用Idea做一个淘宝的登录页面和手机页面
一.使用Idea做一个淘宝的登录页面代码如下 <!DOCTYPE html> <html lang="en"> <head><meta ...
弘辽科技：淘宝描述区页面的高度是多少？高了怎么减去？
原标题<弘辽科技:淘宝描述区页面的高度是多少?高了怎么减去?> 淘宝商品的详情页策划,可以极大的增加买家购买欲望,整洁.漂亮的宝贝页面可以提高客户的购物满意度.但是,商家在制作详情页时,会 ...
uniapp仿淘宝详情页页面滑动tab切换
uniapp仿淘宝详情页页面滑动tab切换建立util文件夹放一个Tool.js: export default{getRect(selector){return new Promise((reso ...
【淘宝】从开店到运营 - 开店前期知识（天猫、淘宝店铺介绍）
开发中发现,对好多电商概念模糊,就想到从淘宝开店流程开始,理解客户(产品经理)在想什么... 视频:https://www.bilibili.com/video/BV1c4411p7vd?from=s ...

淘宝抽奖html 页面,基于jQuery实现的双11天猫拆红包抽奖效果

淘宝抽奖html 页面,基于jQuery实现的双11天猫拆红包抽奖效果相关推荐

最新文章

热门文章