移动手机APP滑动手指切换图片特效,异步上传文件

[Node.js] 使用File API 异步上传文件,node.jsapi

原文地址:

 

最近在做一个网盘的项目,不出意外的涉及到大文件的上传,那么问题来了:如何实时的显示文件上传的进度?

HTML5:footer定位(底部+居中)的探讨+div图片居中问题

初学HTML+CSS布局,尝试自己写一个百度首页,但是footer的定位遇到麻烦并且百度没有好的解决方法,在此记录下逐步的过程。记录之,备忘。

初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指点一二,在此先谢过。

首先是设置为

footer{
    clear: both;
    display: block;
    position: absolute;
    bottom: 100px;
}

时效果为:确实绝对定位到了底部,但是由于是绝对定位,使用

footer{
    clear: both;
    display: block;
    text-align: center;    
    margin: 0px auto;
    position: absolute;
    bottom: 100px;
}

并没有居中的效果,想想这应该是footer的宽度设置问题,设置宽度width之后果断有效果,考虑到不同尺寸显示器的兼容性问题,那么可以调用JS动态设置width值,代码如下:

    <script>
        var w=window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;

        var h=window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;
        document.getElementById("footer").style.width=w + "px";
    </script>  

居中底部都搞定了,出现以下问题:

移动手机APP滑动手指切换图片特效,

这是一款效果非常炫酷的移动手机APP滑动手指切换图片特效。该APP特效在移动手机中用户可以通过手指的左右滑动来切换图片,在桌面设备中通过鼠标也可达到同样的效果。

图片 1

在线预览    源码下载

问题分解

似乎是老生常谈,几年前我做过类似的功能模块(基于.NET平台),方案思路:

  • 基于表单提交
  • Server端根据上传文件分配标识符(GUID)并进行流式读取
  • Browser端发起Ajax拉取文件上传状态

这种方案的问题是受制于文件大小(最大2G)。所谓文件上传进度的实时显示,个人觉得比较理想的方案是:

  • Browser 端需要告诉Server文件的大小
  • Browser 端需要能对文件分块读取
  • Server 端需要根据接收到的块及文件大小计算出进度,并告知Browser端
  • Browser 端在进度未完成时,继续读取分块上传

问题1、

缩小水平方向的窗口,那么以上设置等于0,窗口改变后,不会随窗口变化而变化,也就是不再是当前显示的有效窗口居中,出现了滚动条;

图片 2

 使用方法

HTML5 File API

上述方案中,最大的难点在于Browser端分块读取文件。好在HTML5 File
API提供了这样的接口:FileReader

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据。其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象……

有意思的是Blob接口,它只有一个方法:slice()——不难想象,它是用进行数据分块的,方法签名形如:

Blob slice(
  optional long long start,
  optional long long end,
  optional DOMString contentType
};

从W3C Draft 可以看出,File
接口实际上是继承自Blob接口的,意味着File.slice(start, end)
可以返回文件的块数据,结合FileReader.readAsBinaryString方法,我们在Browser端能读取到本地文件的任意部分数据。

问题2、

缩小垂直方向的窗口,同样的,出现以下情况,也就是和页面中间部分重叠!

图片 3

水平居中怎么实现呢?其实很简单!设置为width: 100%;

footer{
    clear: both;
    display: block;
    text-align: center; 
    margin: 0px auto;
    position: absolute;
    bottom: 100px;
    width: 100%;
}

到此水平居中搞定,也就不用傻不拉几的写脚本了!

 HTML结构

这个移动手机APP切换图片特效的HTML结构采用嵌套<div>的HTML结构,每一张图片卡片都包裹在div.demo__card中,里面放置了图片,描述信息和一些额外的图层。

1 2 3 4 5 6 7 8 9 10 11 12 <div class="demo__card">   <div class="demo__card__top brown">     <div class="demo__card__img"></div>     <p class="demo__card__name">Hungry cat</p>   </div>   <div class="demo__card__btm">     <p class="demo__card__we">Whatever</p>   </div>   <div class="demo__card__choice m--reject"></div>   <div class="demo__card__choice m--like"></div>   <div class="demo__card__drag"></div> </div>             

m--reject是向左移动图片时的图层,m--like是向右移动图片时的图层,demo__card__drag是拖动层。

关于FileReader

首先,FileReader并不是每个浏览器都支持的,兼容性测试情况(很不幸,巨硬的IE又拖后腿了……:

操作系统 Firefox Chrome Internet Explorer Opera Safari
Windows 支持 支持 不支持 支持 不支持
MAC OS X 支持 支持 N/A 支持 支持

其次,使用readAsBinaryString的方法,需要对FileReader的
onloadend事件进行订阅处理,即读取块数据操作完成时,这个事件订阅方法将得到已读取的二进制块数据:

currentFileReader.onload = function (evnt) {
    console.log('Data content length: ', evnt.target.result.length);
};

新问题问题3:

垂直方向上移的问题可以通过设置top值来解决。但是设置top后bottom就无用了(逻辑上这个肯定冲突,设置了top已经定位了,又设置了bottom,那么浏览器听谁的?同理left和right也存在悖论),具体的可以试一下,那怎么办呢?

问题的根源在于使用绝对定位和设置bottom时,footer是跟随浏览器窗口变化而变化的,那我们要做的就是打破这种格局。

解决思路1、当界面上下伸缩时,动态调整css样式即可:具体为当达到某一位置时,使用buttom定位,当超过这个位置时,使用top定位,这样就可以保证,缩小到某一个值时距离顶部距离不变,放大到超过这个值时,距离底部不变。具体实现如下代码:

    百度一下,你就知道

    <script>
        function myFunc() {
             //获取窗口高度
             if (window.innerHeight)
                   winHeight=window.innerHeight;
             else if ((document.body) && (document.body.clientHeight))
                   winHeight=document.body.clientHeight;
             //通过深入Document内部对body进行检测,获取窗口大小
             if (document.documentElement  && document.documentElement.clientHeight &&
                                                  document.documentElement.clientWidth)
             {
                 winHeight=document.documentElement.clientHeight;
             }

            if (parseInt(winHeight)<750){
                document.getElementById("footer").setAttribute("class", "dAdjustTop");
                /*document.getElementById("inputtext").value=winHeight+" "+document.getElementById("footer").getAttribute("class");*/
            } else {
                document.getElementById("footer").setAttribute("class", "dAdjustButtom");
                /*document.getElementById("inputtext").value=winHeight+" "+document.getElementById("footer").getAttribute("class");*/
            }
        }
    </script>





        新闻
     hao123
     地图
     视频
     贴吧 















            把百度设为主页
               
            关于百度
               
            About Baidu


            ©2014 Baidu 
            使用百度前必读
             京ICP证030173号 


            Written by The_Third_Wave

CSS为

body{
    background-color: #FFFFFF;
    margin: 0px auto;
    padding: 0px;
}

nav{
    display: block;
    width: 400px;
    height: 100px;
    float: right;
}
nav a {
    float: right;
    display: inline-block;
    padding: 15px;
    color: black;
    font-weight: bold;
}


#mid{
    position: relative;
    top: 100px;
    width: 100%;
    min-width: 610px; /* 保证图片和输入框绝对居中 */
    height: 200px;
    text-align: center; /* 只对input有效,图片无效 */
    float: left;
    padding-bottom: 100px; /*重要!给footer预留的空间*/  
}

img{
    display: block; 
    width: 270px;
    height: 129px;
    margin: 0px auto;
}
#logo{
    margin-bottom: 20px; /* 保证图片和输入框的间距 */
}
#input{
    display: block;
    width:100%;
    min-width: 610px; /* 保证子节点两个input不换行 */
    height: 40px;
    padding: 0px;
}

#inputtext{
    width: 520px;
    height: 22px;
    margin-right: 0px;
    padding: 6px 0px 5px 0px;
    font: 16px/22px arial;
    border: 1px #CECABC solid; /*默认边框色为灰色*/
}
#button{
    display: inline-block;
    width: 80px;
    height: 35px;
    font: 16px/22px arial;
    margin: 0px 0px 0px -6px;
    padding: 5px 0px 5px 0px;
    background-color: blue;
    border: 1px blue solid;

}

footer {
    /*border: 1px red solid;*/
    clear: both;
    display: block;
    text-align: center; 
    width: 100%;
    height: 120px;
    min-width: 610px; /* 保证文字inline-block效果时不换行 */
}

.dAdjustButtom{
    position: absolute;
    bottom: 100px;
}

.dAdjustTop{
    position: absolute;
    top: 530px; /* 750-120-100 JS中tag-footer的height-mid的padding-bottom*/
}

代码解析,利用onresize事件,动态设置CSS,我使用class值的改变来达到目的,具体请看JS代码。

解决思路2、我们让他随内容变化,当内容撑不满屏幕时,我们固定footer在底部,在屏幕装不下内容时,我们要保证footer看不见了,也就是拖动页面到最底部时才出现!即做到永远固定于页面底部!怎么做?

这里有篇不错的文章,点击打开参考:如何将页脚固定在页面底部

 JavaScript

在jQuery代码中,pullChange()函数用于设置向左和向右两个滑动层的旋转角度和透明度。release()函数用于判断用户是向左还是向右滑动手指,并为这些动作在DOM元素上添加相应的class。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 function pullChange() {     animating = true;     deg = pullDeltaX / 10;     $card.css('transform', 'translateX(' + pullDeltaX + 'px) rotate(' + deg + 'deg)');     var opacity = pullDeltaX / 100;     var rejectOpacity = opacity >= 0 ? 0 : Math.abs(opacity);     var likeOpacity = opacity <= 0 ? 0 : opacity;     $cardReject.css('opacity', rejectOpacity);     $cardLike.css('opacity', likeOpacity); } ; function release() {     if (pullDeltaX >= decisionVal) {         $card.addClass('to-right');     } else if (pullDeltaX <= -decisionVal) {         $card.addClass('to-left');     }     if (Math.abs(pullDeltaX) >= decisionVal) {         $card.addClass('inactive');         setTimeout(function () {             $card.addClass('below').removeClass('inactive to-left to-right');             cardsCounter++;             if (cardsCounter === numOfCards) {                 cardsCounter = 0;                 $('.demo__card').removeClass('below');             }         }, 300);     }     if (Math.abs(pullDeltaX) < decisionVal) {         $card.addClass('reset');     }     setTimeout(function () {         $card.attr('style', '').removeClass('reset').find('.demo__card__choice').attr('style', '');         pullDeltaX = 0;         animating = false;     }, 300); };                 

最后监听mousedowntouchstart事件,并对非.inactive的卡片元素执行卡片切换操作。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 $(document).on('mousedown touchstart', '.demo__card:not(.inactive)', function (e) {     if (animating)         return;     $card = $(this);     $cardReject = $('.demo__card__choice.m--reject', $card);     $cardLike = $('.demo__card__choice.m--like', $card);     var startX = e.pageX || e.originalEvent.touches[0].pageX;     $(document).on('mousemove touchmove', function (e) {         var x = e.pageX || e.originalEvent.touches[0].pageX;         pullDeltaX = x - startX;         if (!pullDeltaX)             return;         pullChange();     });     $(document).on('mouseup touchend', function () {         $(document).off('mousemove touchmove mouseup touchend');         if (!pullDeltaX)             return;         release();     }); });                 

这是一款效果非常炫酷的移动手机APP滑动手指切换图片特效。该APP特效在移动手机中用户可以通过手指…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图