iTakeo

Archive for 9 月, 2015

随手记：旋转按钮。

绕圆心旋转：

  1. ;(function(){  
  2.     var dot = document.querySelector(‘.dot’);  
  3.     var debug = document.querySelector(‘.debug’)  
  4.     var parent =dot.parentNode;  
  5.     var _event = ‘ontouchstart’ in document.documentElement;  
  6.     var start =_event ? ‘touchstart’ : ‘mousedown’;  
  7.     var move = _event ? ‘touchmove’ : ‘mousemove’;  
  8.     var end = _event ? ‘touchend’ : ‘mouseup’;  
  9.     dot.addEventListener(start, eventDown);  
  10.     var angle,delta_y,delta_x;  
  11.     function eventDown(e){  
  12.         mousedown = true;  
  13.         (_event ? dot : document).addEventListener(move, eventMove);  
  14.         (_event ? dot : document).addEventListener(end,eventUp );  
  15.         return;  
  16.     };  
  17.     function eventMove(e){  
  18.         if(mousedown){  
  19.             if(e.changedTouches){  
  20.                 e = e.touches[0];  
  21.             };  
  22.             var st = document.documentElement.scrollTop || document.body.scrollTop;  
  23.             document.title = parent.getBoundingClientRect().top+st  
  24.             delta_x = (parent.offsetWidth / 2 +  parent.getBoundingClientRect().left) – e.pageX ;  
  25.             delta_y = (parent.offsetHeight / 2 + parent.getBoundingClientRect().top)+st – e.pageY;  
  26.             angle = Math.atan2(delta_y, delta_x) * (180 / Math.PI);  
  27.             angle –= 90;  
  28.             if(angle < 0){  
  29.                 angle = 360 + angle;  
  30.             };  
  31.             angle = Math.round(angle);  
  32.             dot.style.transform = ‘rotate(‘ + angle + ‘deg)’;  
  33.             debug.innerHTML = angle + ‘deg’;  
  34.         };  
  35.     };  
  36.     function eventUp(e){  
  37.         (_event ? dot : document).removeEventListener(move, eventMove);  
  38.         (_event ? dot : document).removeEventListener(end,eventUp );  
  39.         mousedown=false;  
  40.     };  
  41. })();  

（更多…）

2015/09/25 1 /
前端
/
标签:  暂无标签

轻量级模拟滚动条插件。

轻量级模拟滚动条小插件，该插件不支持移动端（移动端滚动条插件点击这里），支持IE8以上，自适应（理论上应该支持IE6，只需要将querySelector修改下就可以了）。目前只支持Y轴滚动，X轴后续添加。

  1. //调用  
  2. simpleScroll(‘.div’).init();  
  3.   
  4. //提供两个方法  
  5. simpleScroll(‘.simpleScrollwrap’).init({  
  6.     top : function(){},  //顶部触发  
  7.     bottom : function(){} //底部触发  
  8. });  
  1. //最外层是容器，内层是滚动的元素，需要设置position定位。  
  2. <div class=“wrap”>  
  3.     <div class=“item”>  
  4.         //内容  
  5.     </div>  
  6. </div>  

（更多…）

2015/09/21 0 /
前端
/
标签:  暂无标签

背景随鼠标视差偏移。

不知道叫啥名字，之前挺流行这种效果，鼠标在页面内移动，背景会跟着鼠标反方向偏移，看起来有种视差的感觉，但感觉又不像。

大概如下效果吧。

（更多…）

2015/09/20 1 /
前端
/
标签:  暂无标签

移动端滑动判断。

移动端滑动判断。PC端浏览器也支持，封装了基本的移动操作。

调用

  1. swiperTouch(‘.swiperTouch’).init({  
  2.     touchMove : function(e){  
  3.         //移动的时候触发  
  4.         //有以下几个属性  
  5.         //this为当前的对象  
  6.         //this.type为当前滑动发方向  
  7.         //e.x当前x轴的偏移量  
  8.         //e.y当前y轴的偏移量  
  9.         //e.siteX 当前translate X轴的偏移量  
  10.         //e.siteY 当前translate Y轴的偏移量  
  11.         //以下用法相同  
  12.     },  
  13.     touchStart : function(){  
  14.         //按下触发  
  15.     },  
  16.     touchEnd : function(){  
  17.         //抬起触发  
  18.     },  
  19.     click : function(){  
  20.         //点击触发  
  21.     },  
  22.     left : function(){  
  23.         //只有向左滑动的时候才走这里  
  24.     },  
  25.     right : function(){  
  26.         //只有向左滑动的时候才走这里  
  27.     },  
  28.     up : function(){  
  29.         //只有向上滑动的时候才走这里  
  30.     },  
  31.     down : function(){  
  32.         //只有向下滑动的时候才走这里  
  33.     },  
  34.     tips : function(){  
  35.         //每次滑动只执行一次  
  36.     },  
  37.     scale: function(n){  
  38.         //缩放  
  39.         //有一个参数，参数为true的时候，为放大，false的时候为缩小  
  40.     }  
  41. });  

（更多…）

2015/09/18 0 /
前端
/
标签:  暂无标签

css各种水平垂直居中

css各种水平垂直居中，网上查了一下，总结以下几种

line-height垂直居中
缺点，仅限于单行文字

  1. .item{  
  2.     text-align: center;  
  3.     height: 100px;   
  4.     line-height: 100px;   
  5. }  
水平垂直居中

padding垂直居中
缺点，内容不确定时，高度不好固定

（更多…）

2015/09/17 3 /
前端
/
标签:  暂无标签

模拟移动端滚动条。

移动端模拟滚动条，粗糙的封装了一下，只测试了IOS和安卓4.3，其他未知待测试。

支持X轴和Y轴滚动，默认Y轴，如果需要X轴，需要加上data-type=“x”。下面是调用方法

  1. //调用  
  2. scroll(‘.scroll’).init(）  

另外提供两个方法：

  1. scroll(‘.scroll-wrap’).init({  
  2.     scrollTop  : function () {  
  3.         //顶部触发  
  4.     },  
  5.     scrollEnd  : function () {  
  6.         //底部触发  
  7.     }  
  8. });  

下面是HTML结构。

  1. <div class=“scroll”>  
  2.     <div class=“scrollDom”>  
  3.         //内容  
  4.     </div>  
  5. </div>  

（更多…）

2015/09/16 0 /
前端
/
标签:  暂无标签

canvas刮刮卡抽奖。

造轮子系列–刮刮卡效果

调用方法：

  1. scratcher(‘.canvas_con1’).init({  
  2.     text : ‘刮刮卡’,  //填充文字  
  3.     textColor : ‘#fff’, //文字颜色  
  4.     fontSize : 25, //文字大小  
  5.     touchSize : 10, //擦除路径大小  
  6.     data : null,  //图片数组  
  7.     bgColor : ‘gray’, //背景颜色  
  8.     start : function(){},  //按下执行  
  9.     end : function(){} //擦除结束执行  
  10. })  
  1. //另外还有两个方法，一个是清空画布，用于结束后使用  
  2. this.clear();  
  3. //一个是重置函数，用于结束后再来一次  
  4. this.reset();  
  5. //以上两个行数都在回调函数内执行。  
  6. end : function(){  
  7.     this.reset();  
  8. }  

HTML结构：

  1. <div class=“canvas”>  
  2.         <canvas></canvas>  
  3. </div>  

（更多…）

2015/09/11 1 /
前端
/
标签:  暂无标签

判断浏览器是否缩放。

判断浏览器是否缩放。

//调用  
pageZoom.start(function(n){  
    //n为当前屏幕缩放比例  
});  
  
//停止  
pageZoom.stop();
01.
02.
03.
04.
05.
06.
07.

为了减少js的体积，这里没有把提示的div结构写进JS里面，而是用回调的函数返回当前缩放比例，根据缩放比例来自己设置提示。

（更多…）

2015/09/09 0 /
前端
/
标签:  暂无标签

SVG圆环。

SVG版圆环~~~~~~

  1. //默认无参数调用，数值需写在data-num属性上        
  2. rotate(‘.charts2′).init()    
  3.         
  4. //带参调用       
  5. rotate(‘.charts2′).init({    
  6.     data : 10,   //数值    
  7.     weight :3,    //圆环宽度    
  8.     width :　105, //图形宽度    
  9.     trackColor: “#fff”, //背景色    
  10.     color :’red’,   //圆环颜色1  
  11.     fps: 100    //速度    
  12. });     

（更多…）

2015/09/08 4 /
前端
/
标签:  暂无标签

随手记：手机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 /
随手记
/
标签:  暂无标签
1/2
1
 
2
 
下一页
 
末页
 

Copyright © 2024 Powered by

皖ICP备15014831号

回到顶部