iTakeo

All posts in “随手记”

随手记：一个文字无限滚动。。。

利用appendChild，做一个无限滚动。达到一定距离后，把第一个append到最后一个，第二个就变成第一个，以此类推。

无间隔。

  1. var dom = document.getElementById(‘wrapScroll’),i = 0;  
  2. //定时器  
  3. setInterval(function(){  
  4.     init();  
  5. },40);  
  6. function init(){  
  7.     i = i-1;//累减  
  8.     if(i<=-35){  
  9.         //位置归0并append  
  10.         dom.style.top = ‘0px’,i = 0;  
  11.         dom.appendChild(dom.children[0]);  
  12.     };  
  13.     dom.style.top = i +’px’  
  14. };  

有间隔。

（更多…）

2015/10/26 2 /
随手记
/
标签:  暂无标签

正则匹配所有html标签。


正则匹配所有html标签，如下：

<[^>]+>

经过测试，发现下面的也可以。

<.*?>


2015/10/19 0 /
随手记
/
标签:  暂无标签

随手记：获取url参数

  1. function getUrl(name) {  
  2.     var reg = new RegExp(“(^|&)” + name + “=([^&]*)(&|$)”, “i”);  
  3.     var r = window.location.search.substr(1).match(reg);  
  4.     if (r != null) return unescape(r[2]); return null;  
  5. };  
2015/10/12 1 /
随手记
/
标签:  暂无标签

随手记：手机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. }  

（更多…）

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

随手记：css3卡片翻转…

css3 卡片翻转效果。主要通过rotateY把一面翻转到背面，然后通过backface-visibility:hidden，背面隐藏。

  1. .box div{  
  2.         height: 200px;width:300px;  
  3.         position: absolute; left: 0px; top: 0px;  
  4.         backface-visibility:hidden;  
  5.         transition-duration: 0.4s;  
  6. }  
  1. .box div:first-child{  
  2.         background: red;  
  3.         transform:rotateY(0deg);  
  4. }  
  5. .box div:last-child{  
  6.         background: green;  
  7.         transform:rotateY(-180deg);  
  8. }  

通过点击的时候，把另一面在隐藏。

  1. .box.turn div:first-child{  
  2.         transform:rotateY(180deg);  
  3. }  
  4. .box.turn div:last-child{  
  5.         transform:rotateY(0deg);  
  6. }  

（更多…）

2015/08/12 0 /
前端 随手记
/
标签:  暂无标签

Copyright © 2024 Powered by

皖ICP备15014831号

回到顶部