前端常用动画效果和功能控制

A Loity 发布于2019-08-28 18:09 / 1644人阅读

摘要：原理分析使用延迟加载效果的网站，一般也会使用一个默认的图片来占位，比如优酷和。这样可以防止用户在滚动过快时造成可能出现的页面结构混乱和图像一时加载不出来出现的。针对这一功能，也有一个常用的插件。

图片延迟加载

许多网站的图片是在下拉滚动条时才加载，而此效果通常是用jQuery的lazyLoad或scrollLoading插件实现的。它可以延迟加载长页面中的图片。在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置。在包含很多图片的长页面中延迟加载图片可以加快页面加载速度。另一方面也是因为同时加载大量图片时很容易因为短时间内的大量http请求而导致有个别图片挂掉而显示一个难看的"X"。

原理分析:

使用延迟加载效果的网站，一般也会使用一个默认的图片来占位，比如优酷和bili。这样可以防止用户在滚动过快时造成可能出现的页面结构混乱和图像一时加载不出来出现的"x"。上面这行代码，真正的src值放在自定义的original属性中。

这个效果的实现是通过分别计算浏览器可视区域的矩形(距离top和left的距离)和图片所在的矩形，求它们是否相交，如果相交，则使用上面img标签中的data-original的值作为src的值，如此就实现了延迟加载的效果。更加具体的细节可以去查看相关源码实现。

// 判断两个矩形是否相交,返回一个布尔值 
function intens(rec1, rec2){ 
    var lc1, lc2, tc1, tc2, w1, h1; 
    lc1 = rec1.left + rec1.width / 2; 
    lc2 = rec2.left + rec2.width / 2; 
    tc1 = rec1.top + rec1.height / 2 ; 
    tc2 = rec2.top + rec2.height / 2 ; 
    w1 = (rec1.width + rec2.width) / 2 ; 
    h1 = (rec1.height + rec2.height) / 2; 
    return Math.abs(lc1 - lc2) < w1 && Math.abs(tc1 - tc2) < h1 ; 
}

防止相同事件快速重复触发

这里的触发可以理解为执行的意思，主要涉及函数节流的概念。
在前端需求中，为防止重复触发会要求短时间内某一事件只能触发一次，比如表单提交时的ajax请求还有轮播图的滚动(很多轮播图的滚动并不如你点击鼠标的速度那么快，所以在触发的逻辑里肯定对短时重复触发处理过)

function delay_exec(fn, wait) {
    if (_timer["id"]) {
        window.clearTimeout(_timer["id"]);
        delete _timer["id"];
    }

    return _timer["id"] = window.setTimeout(function () {
        fn();
        delete _timer["id"];
    }, wait);
}

var _timer = {};
$("#myid").bind("click", function(){
    delay_exec(function(){}, 300);
})

这个是只处理最后一次点击的情况，在不断点击的情况下，通过setTimeout的id存删,触发会持续向后延迟，只触发最后一次。
另一种是只处理第一次点击的情况，在指定的时间内无论点击多少次，只执行一次触发。有一个插件叫throttle，专门干这事。代码不长，有兴趣的可以直接研读代码。

hover时显示资料

使用场景：新浪微博或者论坛，把鼠标放在名字上时会显示资料卡片，但是鼠标很快划过时并不会显示。针对这一功能，也有一个常用的jQuery插件——hoverIndent。待后述。

云服务器 GPU云服务器浮动效果动画翻转动画效果 html动画效果启动页动画效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111047.html

前端常用动画效果和功能控制

摘要：原理分析使用延迟加载效果的网站，一般也会使用一个默认的图片来占位，比如优酷和。这样可以防止用户在滚动过快时造成可能出现的页面结构混乱和图像一时加载不出来出现的。针对这一功能，也有一个常用的插件。图片延迟加载许多网站的图片是在下拉滚动条时才加载，而此效果通常是用jQuery的lazyLoad或scrollLoading插件实现的。它可以延迟加载长页面中的图片。在浏览器可视区域外的图片...

luck 2019-08-21 10:31 评论0 收藏0
前端常用插件、工具类库汇总（上）

摘要：函数库动画库动画库，也是目前最通用的动画库。下拉框级联选择器移动端最好用的的筛选器组件联动筛选移动端最好用的的筛选器组件联动筛选颜色选择器时间选择器时间日期处理是一个解析，验证，操作和显示日期和时间的类库。 showImg(https://segmentfault.com/img/bVbjpHt?w=900&h=383); 前言在开发中，我们经常会将一些常用的代码块、功能块进行封装，...

txgcwm 2019-08-23 13:06 评论0 收藏0
「前端早读君006」移动开发必备：那些玩转H5的小技巧

摘要：今日励志语录有志者自有千计万计，无志者只感千难万难。三动画技术越来越不陌生，使用门槛也渐渐降低，而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君，每天早晨为你推送前端知识，度过挤地铁坐公交的时光今日励志语录有志者自有千计万计，无志者只感千难万难。文章原出处：腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...

LittleLiByte 2019-08-30 15:55 评论0 收藏0
「前端早读君006」移动开发必备：那些玩转H5的小技巧

摘要：今日励志语录有志者自有千计万计，无志者只感千难万难。三动画技术越来越不陌生，使用门槛也渐渐降低，而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君，每天早晨为你推送前端知识，度过挤地铁坐公交的时光今日励志语录有志者自有千计万计，无志者只感千难万难。文章原出处：腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...

liuyix 2019-08-23 14:23 评论0 收藏0