iTakeo

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/9/11 1 /
前端
/
标签:  暂无标签

判断浏览器是否缩放。

判断浏览器是否缩放。

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

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

（更多…）

2015/9/9 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/9/8 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/9/7 1 /
随手记
/
标签:  暂无标签

各种单选框，复选框。


经常会遇到各种单选框，复选框，每个人设计的都不一样，有时候还得重新写一遍；于是花了一点时候，写了十几种样式，多多少少能节省点时间。

（更多…）

2015/9/1 1 /
前端
/
标签:  暂无标签

css3的实现圆环百分比统计。

css3的实现圆环统计、百分比显示组件。

先来看一个基本的例子：

  1. function rotate() {  
  2.     //随机获取数值  
  3.     var now = Math.floor(Math.random() * 100 + 0);  
  4.     //乘以比例  
  5.     var rotatenum = ‘rotate(‘ + now * 1.8 + ‘deg)’;  
  6.     //这里是为了rotate出现虚边做的兼容处理  
  7.     var s = 4;  
  8.     if(now==0 && now<96){s = 0;};  
  9.     if(now>=96){s = 1;};  
  10.     var rotatenum2 = ‘rotate(‘ + (now * 1.8+s) + ‘deg)’;  
  11.     //获取对应元素  
  12.     var progress = document.querySelector(‘#progress’);  
  13.     var progress_circle = document.querySelector(‘#progress-circle’);  
  14.     var progress_style = document.querySelector(‘#progress-style’);  
  15.     //修改显示内容  
  16.     progress.innerHTML = now + ‘%’;  
  17.     //添加动画  
  18.     progress_style.innerHTML = ‘.p-f,.p-f:before{transform: ‘ + rotatenum + ‘}.p-h:before{transform: ‘ + rotatenum2 + ‘}’;  
  19.     progress_circle.onclick = function(){  
  20.         rotate();  
  21.     };  
  22. };  
  23. document.body.onload = function(){  
  24.     rotate();  
  25. };  

（更多…）

2015/8/31 0 /
前端
/
标签:  暂无标签

文字飞散。

文字飞散，动画使用css3。效果图如下：


（更多…）

2015/8/29 1 /
前端
/
标签:  暂无标签

水波进度条。


水波流动进度条。

67%

其实原理很简单，看下面的就知道了，给div一个圆角，然后给他一个keyframes动画，一直在旋转就可以了。css具体F12看源码。

（更多…）

2015/8/24 2 /
前端
/
标签:  暂无标签

模仿京东的城市选择组件.

模仿京东的城市选择组件。支持无限选择，只要在地区json里面添加数据即可。

HTML结构：

  1. <!–主体内容–>  
  2. <div id=“store-selector”>  
  3.     <div class=“text”><div id=“locationName”>上海市</div><b></b></div>  
  4.     <!–数据显示–>  
  5.     <div class=“content”>             
  6.         <div class=“JD-stock”>  
  7.             <ul class=“tab”  id=“tabs”>  
  8.                 <li class=“curr” data-index=“0”><a class=“hover” href=“javascript:;”><em>上海市</em></a></li>  
  9.                 <li data-index=“1”><a class=“” href=“javascript:;”><em></em></a></li>  
  10.                 <li data-index=“2”><a class=“” href=“javascript:;”><em></em></a></li>  
  11.                 <li data-index=“3”><a class=“” href=“javascript:;”><em></em></a></li>  
  12.             </ul>  
  13.             <!– 城市选择区域 –>  
  14.             <div id=“stock_province_item” data-widget=“tab-content” data-area=“0” class=“mc”></div>  
  15.         </div>  
  16.         <!– 关闭 –>  
  17.         <div class=“close” id=“d-close”></div>  
  18.     </div>  
  19. </div>  

调用：

  1. maps();  

（更多…）

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

js数字滚动效果.

如标题，数字滚动，动画采用css3，所以IE10以下不兼容，不过用在移动端还是不错的，比如金钱的增加，数量的显示。

  1. //调用方法1，前面选择元素，后面init初始化，数字写在html中  
  2. scroll(‘.wrap’).init();  
  3. //html如下  
  4. <div class=“wrap”>23154.52</div>  
  1. //调用方法2，前面选择元素，后面写入数字，html内容可以为空  
  2. scroll(‘.wrap’).init(234234);  
  3. //html如下  
  4. <div class=“wrap”></div>  
  1. //调用方法3，前面选择元素，后面是个json格式  
  2. scroll(‘.wrap’).init({  
  3.     number : 134545 ,  //数字  
  4.     speed : 1 ,   //滚动速度，数值在0到1之间的小数  
  5.     format : true,  //是否按千分位格式化数字  
  6.     fixed : 0   //保留几位小数，默认根据html内容来，也可自己设置  
  7. });  
  1. //调用方法4，另外如果number后面是个data的话，会根据data-number来查找数字  
  2. scroll(‘.wrap’).init({  
  3.     number : ‘data’   
  4. });  
  5. //html如下  
  6. <div class=“wrap” data-number=“456456”></div>  
  1. //还有选择器后面如果是true的话，就是给所有的元素添加效果  
  2. scroll(‘.wrap’,true).init();  

（更多…）

2015/8/19 1 /
前端
/
标签:  暂无标签
8/10
首页
 
上一页
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
下一页
 
末页
 

Copyright © 2024 Powered by

皖ICP备15014831号

回到顶部