天猫双11红包前端jQuery
2024-09-08 02:24:39
【01】
浏览器支持:IE10+和其他现代浏览器。
效果图:
步骤:
HTML部分:
<div class="opacity" style="display: none;"></div>
<div class="red"><img src="asd23.png"></div>
<div class="windows" style="display: none;">
<div class="text"><a href="aa.html">恭喜抽中棒棒糖一枚!</a></div>
<a href="saved_resource.html">
<div class="close"><img src="close.png"></div>
</a>
</div>
说明:
- .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下载:戳我。
最新文章
- SharePoint 2013 Designer系列之数据视图
- [css3]水平垂直居中
- php统计网站访问次数的一个简单方法
- 为什么要关闭360云盘:新来的美工嫌我们logo太丑,所以就决定关闭了。这个理由怎么样
- 在Centos7上安装漏洞扫描软件Nessus
- ubuntu14.04折腾迅雷xware
- C# 操作 Excel 常见问题收集和整理
- progress 相关事件 异步 ajax
- 一个APP页面一个接口
- cas 单点登录(SSO)实验之二: cas-client
- Python3的requests类抓取中文页面出现乱码的解决办法
- 用 PHP文件引入css样式
- Python从入门到放弃Day01
- React 记录(2)
- 修改Tomcat默认连接数
- 流媒体技术学习笔记之(十七)FFmpeg 3.3《希尔伯特》-新版本的亮点
- 2017-6-5/MySQL分库分表
- block,inline-block,行内元素区别及浮动
- 内核态(Kernel Mode)与用户态(User Mode)
- ActiveMQ实战篇之ActiveMQ实现request/reply模型(二)