HTML5中的简单过渡效果

        网页的动画越来越多样化,而且HTML5越来越得到更多的支持,我们可以结合CSS3(主要用到transition和animation两种方式)和js脚本来实现很多复杂的动画和特效。这里举一个超级简单例子展示一下:

        我们实现一个按钮及其过渡效果,最后效果这样:效果

        先设置一个div,里面放一个链接a标签,文字为“点击按钮”:

 <div>
   <a href="http://www.ershing.cn">点击按钮</a>
 </div>

        然后设置外面的样式,使得div大概居于屏幕中间,背景颜色为浅蓝色:

 body{
   width:100%;
   height:100%;
   background:lightblue;
 }
 div{
   background:lightblue;
   height:60%;
   width:30%;
   margin:20% auto;
   text-align:center;
 }

        然后设置a标签的样式为白色边框,白色底,还有一些文字间隔大小等内容:

 a {
   display: block;
   margin:50px;
   color: white;
   text-decoration: none;
   font-family: sans-serif;
   font-size: 25px;
   line-height: 60px;
   border: 1px solid white;
   border-radius: 10px;
   text-align: center;
   text-indent :20px;
   letter-spacing: 20px;
 }

        再设置它的鼠标放置上面之后(hover)的样式:

 a:hover {
   color: purple;
   background: white;
   border:1px solid plum
 }

        好了,基本样式就搞定了,我们发觉这样每次放置鼠标上去和离开鼠标都有一种很突然的感觉,这里就要用到过度效果了,给a加一个匀速的0.5s转换效果:

 -webkit-transition: all .5s linear;
 transition: all .5s linear;

        好了,基本就搞定了,源码参考:源码

        效果可以参考:效果

        其实压根就是非常简单的用了一个transition过渡,不过结合css样式一起,我们可以得到很多我们想要的效果。

文章在我的github上的地址:点击跳转

原创文章,转载请注明出处!

知识共享许可协议
本文章采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。

大文件分块上传、断点续传

        很多时候我们需要上传文件,都会用到直接form-data的方式上传,但是如果文件太大呢,例如一个500MB的文件,服务器端对请求数据有大小要求限制怎么办,不可能整个大文件传输,又或者你想读取文件内容怎么办,这么大的文件全部读入内存?浏览器不答应吧。所以我们就想到分块的方法。

        主要用到的是HTML 5 的file相关的api,这里不讨论相关读取文件内容(其实也不过是用了FileReader 对象的readAsArrayBuffer方法而已),这里单纯实现文件分块,然后上传,当然还有断点续传。下面只展示关键代码。

        废话少说,先来个HTML的框架大致内容用于测试,一个选择文件按钮,一个上传按钮:

<input type="file" id="files" name="file" />
<input id="uploadBtn" type="button" value="上传">

        然后开始script标签内容了,先DOM获取文件和按钮、并设置上传的地址:

var input = document.getElementById('files');
var upload = document.getElementById('uploadBtn');
//自己建立一个测试的服务器,后面会提到后端的代码
var host = 'http://localhost:10000/attachment/upload'  

        好了,获取到文件之后,就要开始切割了,切割考虑到不同浏览器的兼容性问题,所以要做个判断:

var blob;
if (file.webkitSlice) {
      blob = file.webkitSlice(fileLoaded, fileLoaded + block);
} else if (file.mozSlice) {
       blob = file.mozSlice(fileLoaded, fileLoaded + block);
} else if (file.slice) {
      blob = file.slice(fileLoaded, fileLoaded + block);
} else {
      alert('不支持分段读取!');
}

        切割完之后,就要放进去新创建的FormData对象里面了:

var formData = new FormData();
formData.append("fileBlob", blob);

        最后,用jquery的ajax异步上传,在回调的地方判断文件是否完成整个切割上传,如果还没上传完成,继续切割继续上传:

$.ajax({
    url: host+'/base_data_service/pic/upload',
    type: 'POST',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: function (data) {
        if (data.guid) {
            //用guid来标识某个文件
        }
        if (percent < 1) {
            // 继续切割下一块
        } else {
            // 结束
            console.log('已完成文件存储');
        }
        return;
    },
    error: function (data) {
        console.log('上传出现错误', data);
    }
});

        至于怎样断点续传呢?就是在每次回调的地方存储文件已经切割上传的位置,那么即使断网了,再连上去下一次也知道从哪里开始继续切割了。

        参考代码并不完全严谨,只是提供一个总体思路。

        完整的前端代码可以参考:前端源码参考

        当然了,这个前端代码还是要配合后端的操作的,这里后端用node写的,也可以参考一下:后端源码参考

文章在我的github上的地址:点击跳转

原创文章,转载请注明出处!

知识共享许可协议
本文章采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。