iTakeo

随机排序抽奖…

这个是昨天晚上看电视里面有个抽奖效果，看起来觉得有点意思，就自己写了下，暂时就叫他随机排序抽奖吧。其实原理也没啥，就是随机修改位置，点击的时候，覆盖css就可以了，具体看下面的演示：

1号
2号
3号
4号
5号
6号
7号
8号
9号
10号
11号
12号
13号
14号
15号
16号
17号
18号
19号
20号
21号
22号
23号
24号
25号
26号
27号
28号

下面是css部分：

  1. .div {  
  2.     width: 100px;  
  3.     height: 100px;  
  4.     background: #fff;  
  5.     position: absolute;  
  6.     left: 0;  
  7.     top: 0;  
  8.     border: 1px solid #222;  
  9.     transition: all 0.4s ease;  
  10.     -moz-transition: all 0.4s ease;  
  11.     -webkit-transition: all 0.4s ease;  
  12.     cursor: pointer;  
  13.     z-index: 2;  
  14.     text-align: center;  
  15.     line-height: 100px;  
  16. }  
  17. .div span {  
  18.     opacity: 0;  
  19.     transition: all 0.4s ease;  
  20.     -moz-transition: all 0.4s ease;  
  21.     -webkit-transition: all 0.4s ease;  
  22. }  
  23. .bg {  
  24.     width: 100%;  
  25.     height: 100%;  
  26.     background: #000;  
  27.     position: fixed;  
  28.     left: 0px;  
  29.     top: 0px;  
  30.     opacity: 0;  
  31.     transition: all 0.4s ease;  
  32.     -moz-transition: all 0.4s ease;  
  33.     -webkit-transition: all 0.4s ease;  
  34. }  
  35. .div img {  
  36.     opacity: 0  
  37. }  
  38. button {  
  39.     display: block;  
  40.     width: 200px;  
  41.     line-height: 40px;  
  42.     background: blue;  
  43.     color: #fff;  
  44.     border: none;  
  45.     margin: 10px auto;  
  46.     position: relative;  
  47.     z-index: 21;  
  48.     font-size: 20px;  
  49. }  
  50. .div.show {  
  51.     z-index: 18 !important;  
  52.     transform: perspective(800px) translate3d(-50%, -50%, 0px) rotateY(180deg) scale(-2, 2) !important;  
  53.     -moz-transform: perspective(800px) translate3d(-50%, -50%, 0px) rotateY(180deg) scale(-2, 2) !important;  
  54.     -webkit-transform: perspective(800px) translate3d(-50%, -50%, 0px) rotateY(180deg) scale(-2, 2) !important;  
  55.     left: 50% !important;  
  56.     top: 50% !important;  
  57. }  
  58. .div.show span {  
  59.     opacity: 1  
  60. }  
  61. .bg.show {  
  62.     opacity: 0.4;  
  63.     z-index: 8  
  64. }  

下面是js部分：

  1. var div = document.querySelectorAll(‘.div’);  //元素  
  2. var bg = document.querySelector(‘.bg’);  //背景  
  3. var btn = document.querySelector(‘button’);  //按钮  
  4. function Random(s,e){return Math.random()*(e-s)+s;};   //随机函数  
  5. var n = null;  //保存点击元素的序号  
  6. //初始化  
  7. function init(){    
  8.     [].forEach.call(div,function(o,i){  
  9.         o.off = true;  //给每个元素添加开关，阻止多次点击  
  10.         o.classList.remove(‘show’);  //删除class  
  11.         bg.classList.remove(‘show’);  //删除class  
  12.         //添加css  
  13.         o.style.transform = o.style.MozTransform = o.style.WebkitTransform = ‘translate3d(‘+Random(0,document.documentElement.clientWidth – o.offsetWidth)+’px,’+Random(0,document.documentElement.clientHeight – o.offsetHeight)+’px,0px) rotate(‘+(Random(-360,360))+’deg)’;  
  14.         //点击事件  
  15.         o.onclick = function(){  
  16.             //判断开关  
  17.             if(this.off){   
  18.                 n = i;  //保存序号  
  19.                 this.classList.add(‘show’); //添加class  
  20.                 bg.classList.add(‘show’);//添加class  
  21.                 this.off = false;  //关闭开关  
  22.             };  
  23.         };  
  24.     });  
  25. };  
  26. //背景点击事件  
  27. bg.onclick = function(){  
  28.     if(!n) return  
  29.     div[n].off = true;  
  30.     div[n].classList.remove(‘show’)  
  31.     this.classList.remove(‘show’)  
  32. }  
  33. init();  
  34. window.addEventListener(‘resize’,init,false);  
  35. btn.onclick = init  

可以点击这里下载demo演示

2015/07/15 0 /
未分类
/
标签:  暂无标签

验证码： 7 + 3 =

Copyright © 2024 Powered by

皖ICP备15014831号

回到顶部