用CSS3完成无尽循环系统的无缝拼接翻转的示例编

日期:2021-01-20 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

有时在网页页面的某个控制模块中,必须无尽循环系统的翻转1些信息。那末假如大家用js完成无缝拼接对接翻转的思路是甚么呢(例如大家这个控制模块是向上翻转的)?

1.克隆A1份彻底1样的数据信息B放在原数据信息A的后边;

2.应用setInterval向上翻转A的父级器皿;

3.当向上翻转的间距L恰好的A的高宽比时(L==A.height()),L=0,再次刚开始翻转,无尽循环系统。

克隆1份数据信息放在后边,是以便当A向上挪动时,后边了解据能弥补漏出来的空白。当B挪动到可视性地区的顶部时,此时A恰好移出可视性地区,那末此时将器皿再次归0,客户是沒有认知的,认为還是B中的第1条数据信息。随后再次向上翻转。

1. 应用CSS3来完成

若要用CSS3的特性完成的话,非animation莫属,由于transition是必须手动式的开启,并且不可以无尽次实行下去,而animation正好能处理这个难题。

倘若数据信息是在写死的状况下时,大家彻底能够手动式拷贝1份数据信息放在后边,随后把原数据信息的高宽比写到css中,完成的思路与上面的1样:

css款式:

@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, ⑶07px, 0);
        transform: translate3d(0, ⑶07px, 0);
        display: none;
    }
}
.list{
    width: 300px;
    border: 1px solid #999;
    margin: 20px auto;
    position: relative;
    height: 200px;
    overflow: hidden;
}

.list .rowup{
    -webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;
    position: relative;
}

html文件格式:

<div class="list">
    <div class="cc rowup">
        <div class="item">1- 121233fffffr我国认同更身心健康進口价钱困扰</div>
        <div class="item">2- 3123233</div>
        <div class="item">3- 本人口构造俄跨入国际性高新科技馆顾客觉得</div>
        <div class="item">4- ggrgerg</div>
        <div class="item">5- fvdgdv</div>
        <div class="item">6- 德国南部巴士与货车相撞着火 31人负伤11人身亡朴槿惠庭审时忽然晕厥 适用者:她死了审判长要负责!</div>
        <div class="item">7- 外交关系部再度答复印军越界:规定马上将越界军队撤回</div>
        <div class="item">8- 德国网红致信默克尔</div>
        <div class="item">9- 国资委原</div>
        <div class="item">1- 121233fffffr我国认同更身心健康進口价钱困扰</div>
        <div class="item">2- 3123233</div>
        <div class="item">3- 本人口构造俄跨入国际性高新科技馆顾客觉得</div>
        <div class="item">4- ggrgerg</div>
        <div class="item">5- fvdgdv</div>
        <div class="item">6- 德国南部巴士与货车相撞着火 31人负伤11人身亡朴槿惠庭审时忽然晕厥 适用者:她死了审判长要负责!</div>
        <div class="item">7- 外交关系部再度答复印军越界:规定马上将越界军队撤回</div>
        <div class="item">8- 德国网红致信默克尔</div>
        <div class="item">9- 国资委原</div>
    </div>
</div>

2. 数据信息不确定性时

在上面的小标题中,数据信息是死的,高宽比也是写死到了CSS3中。但是假如从插口获得到的数据信息个数不确定呢,每条数据信息的长度也不确定性,如何办呢?

这里就必须依据数据信息来再次测算高宽比,并写到CSS里,但是keyframes改动起来还较为不便,那末大家就用遮盖的方法来再次keyframes中的数据信息:

// 设定keyframes特性
function addKeyFrames(y){
    var style = document.createElement('style');
    style.type = 'text/css';
    var keyFrames = '\
    @-webkit-keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }\
    @keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }';
    style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
    document.getElementsByTagName('head')[0].appendChild(style);
}

测算出初始数据信息A的高宽比后,实行 addKeyFrames 方式,往head中加上css特性,那末这里的rowup就会遮盖掉以前设定的,每次翻转的间距便是数据信息A的高宽比:

function init(){
    var data = '塞下秋来景色异,衡阳雁去无注意。4面边声连角起,千嶂里,长烟日落孤城闭。浊酒1杯家千万里,燕然未勒归无计。羌管悠悠霜遍地,人不寐,大将白头发征夫泪。', //样例数据信息
        data_len = data.length,
        len = parseInt(Math.random()*6)+6, // 数据信息的长度
        html = '<div class="ss">';
    
    for(var i=0; i<len; i++){
        var start = parseInt( Math.random()*(data_len⑵0) ),
            s = parseInt( Math.random()*data_len );
        html += '<div class="item"v>'+i+'- '+data.substr(start, s)+'</div>';
    }
    html += '</div>';
    document.querySelector('.list .cc').innerHTML = html+html; // 拷贝1份数据信息
    var height = document.querySelector('.list .ss').offsetHeight; // 1份数据信息的高宽比
    addKeyFrames( '-'+height+'px' ); // 设定keyframes
    document.querySelector('.list .cc').className += ' rowup'; // 加上 rowup
}
init(); 

3. 横向翻转

上面解读的全是向上翻转,那末向左,向右,向下也较为非常容易了解了,把transform中的值变更为对应的标值便可。

4. 总结

应用CSS来开展动漫的展现,会让网页页面显得更为顺畅。假如能用CSS完成,能够尝试尽可能用CSS完成下。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。