iTakeo

随手记：手机QQ水滴效果。

css。

  1. #wrapper {  
  2.     filter: contrast(100);  
  3.     background: #fff;  
  4.     position: relative;  
  5.     width: 100%;  
  6.     height: 100%;  
  7.     z-index: 9;  
  8.     padding: 10px 0px;  
  9.     margin:0 auto;  
  10. }  
  11. #drag_one,#drag_two {  
  12.     background: red;  
  13.     width: 100px;  
  14.     height: 100px;  
  15.     border-radius: 50%;    
  16.     text-align: center;  
  17.     filter: blur(25px);  
  18.     position: absolute;  
  19. }  
  20. #drag_one {  
  21.     cursor: pointer;  
  22.     top: 35px;  
  23.     left: 50%;  
  24.     width: 160px;  
  25.     height: 160px;  
  26.     margin-left: –80px;   
  27.     z-index: 10;  
  28.     position: absolute;  
  29. }  
  30. #drag_two {  
  31.     top: 65px;  
  32.     background: red; color: #fff; text-align: center;  
  33.     left: 50%;margin-left: –50px;cursor: pointer;  
  34. }  

拖拽。

js。

  1. var drag  = document.querySelector(‘#drag_one’);  
  2. drag.onmousedown = function(ev){  
  3.     this.style.transition =  ‘all 0s ease’;  
  4.     var x = ev.pageX,y = ev.pageY;  
  5.     document.onmousemove = function(ev){  
  6.         drag.style.transform = ‘translate3d(‘+(ev.pageX – x)+’px,’+(ev.pageY – y)+’px,0px)’  
  7.     };  
  8.     document.onmouseup = function(ev){  
  9.         drag.style.transition = ‘all 0.3s ease’;  
  10.         drag.style.transform = ‘translate3d(0px,0px,0px)’  
  11.         document.onmouseup = null;  
  12.         document.onmousemove = null;  
  13.     };  
  14.     return false;  
  15. };  

2015/09/07 1 /
随手记
/
标签:  暂无标签

评论回复

  1. 回复 2016/10/08 匿名

    实在高….

验证码： 2 + 4 =

Copyright © 2024 Powered by

皖ICP备15014831号

回到顶部