技术

js拖动缓动效果方法实现

这里只写了简单的拖动缓冲效果
该效果大部分都是用在了 拖动->到底->异步加载

html 部分

<div class="box">
    <div class="boxcon">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
        <p>16</p>
        <p>17</p>
        <p>18</p>
        <p>19</p>
        <p>20</p>
        <p>21</p>
        <p>22</p>
        <p>23</p>
        <p>24</p>
        <p>25</p>
        <p>26</p>
        <p>27</p>
        <p>28</p>
        <p>29</p>
        <p>30</p>
        <p>31</p>
        <p>32</p>
        <p>33</p>
        <p>34</p>
        <p>35</p>
        <p>36</p>
        <p>37</p>
        <p>38</p>
        <p>39</p>
        <p>40</p> 
    </div>
</div>

更多

技术

html5自适应屏幕的方案

从网上搜集了一下，整理下大概有三种

  • css3 Media queries (针对多版本设计稿)
  • 设计稿不复杂的时候 通过宽度自适应用百分比
  • 通过更新meta:viewport标签，通过设计稿尺寸和设备尺寸的比例去设置

优点：

  • 简单易懂，不需要JavaScript的支持，跨度大
  • 适应能力强，代码量较少
  • 适应能力强，针对不同的屏幕基本都可以适应

缺点：

  • 代码量冗余，需要针对不同的屏幕尺寸去处理，
  • 对设计稿有限制
  • 页面比较大的时候，加载显示的时候会重绘（待验证）

更多

技术

如何使用canvas画布绘制扇形

最近有个需求点要通过canvas 绘制扇形数据，收集了下，整理起来

//扇形
CanvasRenderingContext2D.prototype.sector = function(x, y, radius, sDeg, eDeg) {
    // 初始保存
    this.save();
    // 位移到目标点
    this.translate(x, y);
    this.beginPath();
    // 画出圆弧
    this.arc(0, 0, radius, sDeg, eDeg);
    // 再次保存以备旋转
    this.save();
    // 旋转至起始角度
    this.rotate(eDeg);
    // 移动到终点，准备连接终点与圆心
    this.moveTo(radius, 0);
    // 连接到圆心
    this.lineTo(0, 0);
    // 还原
    this.restore();
    // 旋转至起点角度
    this.rotate(sDeg);
    // 从圆心连接到起点
    this.lineTo(radius, 0);
    this.closePath();
    // 还原到最初保存的状态
    this.restore();
    return this;
}
文章来源: 如何使用canvas画布绘制扇形
技术

nodejs保存base64图片采坑

前端代码部分

<canvas id="cs" width='200' height='200'>
</canvas>
<input type="button" value="button" οnclick="send()" />
<img id='pic' />
<script type="text/javascript">
    function send() {
        var cs = document.querySelector('#cs');
        var ctx = cs.getContext('2d');
        ctx.fillStyle = '#c00';
        ctx.fillRect(0, 0, 120, 200);
        var src = cs.toDataURL('image/png', 0.1);
        document.querySelector('#pic').src = src;
        $.ajax({
            url: '/upbase64',
            dataType: 'json',
            data: 'pic=' + src,
            type: 'POST',
            success: function(data) {
                $("#pic").attr('src', data.src)
            }
        })
    }
 </script>

更多

技术

html5-manifest-缓存的学习

先说下使用方法

html结构

<html manifest='demo.appcache'>
....
</html>

demo.appcache


CACHE MANIFEST
# 注释：需要缓存的文件，无论在线与否，均从缓存里读取
chched.js
cached.css

# 注释：不缓存的文件，无论缓存中存在与否，均从新获取
NETWORK:
uncached.js
uncached.css

# 注释：获取不到资源时的备选路径，如index.html访问失败，则返回404页面
FALLBACK:
index.html 404.html

更多

技术

css3-3d效果算法分享

先说下基础的知识点：

  • perspective透视 我是理解成 视距 值 800px 格式

  • transform: 变换 rotateX、rotateY、rotateZ //分别按照坐标系里的 X、Y、Z轴旋转如下图

translateX、translateY、translateZ //分别按照坐标系不同轴的方向移动相应的距离

更多