欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端小插件之手写js循环滚动特效

程序员文章站 2022-08-02 13:43:33
很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效。 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html css 上面html+css就可以实现滚动了,不过我们要是想左右滚动,滚动图片,并且想循环滚动就需要通过 ......

    很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效。

首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效

html

 <div class="wrap">
    <div class="content">
<p>第一行数据</p>
<p>第二行数据</p>

    </div>
  </div>

css

 .wrap{height:30px;overflow: hidden;position: absolute;top:30;left: 100;width: 100%}
      p{margin:0;height: 30px;width: 100%}
      .content p{
        position: absolute;
      }
      @-webkit-keyframes anim1{
        0% {top: 30px;opacity: 1}
        50% {top: -30px;opacity: 1}
        75% {top: -30px ;opacity: 0}
        100%{top:30px;opacity: 0}
      }
      @-webkit-keyframes anim2{
     
        0% {top: -30px;opacity: 0}
        25% {top: 30px;opacity: 0}
        50% {top: 30px;opacity: 1}
        100%{top: -30px;opacity: 1}
      }

      .content p:nth-child(1){background-color: red;}
      .content p:nth-child(2){background-color: yellow;}
      .content p:nth-child(1){
        
        -webkit-animation: anim1 3s linear infinite;
      }
      
      .content p:nth-child(2){
    
        -webkit-animation: anim2 3s linear infinite;
      }

 

 上面html+css就可以实现滚动了,不过我们要是想左右滚动,滚动图片,并且想循环滚动就需要通过js来完成了,这个功能的重点在于循环滚动,那如何让滚动过得图片在从末尾出来呢,对此我想到了一个解决方案,就是同样的图片出现两组,让两组图片头尾相连,当地二组图片头部滚动到第一组头部的位置时,就让两组图片的位置还原,这样就悄无声息的交换了位置,速度之快用肉眼是看不出来的,废话不多说,下面挂代码

html

<div class="xiangshang">
                    <div class="box1" id="box1">
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu1.png)no-repeat;">
                            中建三局西安奥体中心
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu2.png)no-repeat;">
                            中建八局西安国际会议中心
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu3.png)no-repeat;">
                            北京城建北京大兴国际机场
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu4.png)no-repeat;">
                            中建八局山东科技馆新馆
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu5.png)no-repeat;">
                            中建一局阿里云谷园区
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu6.png)no-repeat;">
                            中建八局广西分公司昆明恒隆广场
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu7.png)no-repeat;">
                            中建一局、三局深圳国际会展中心
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu8.png)no-repeat;">
                            中建八局西安丝路国际会览中心
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu9.png)no-repeat;">
                            中建一局城市副中心
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu10.png)no-repeat;">
                            中建三局宁波国华金融大厦项目
                        </div>
                    </div>
                    <div class="box2" id="box2">
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu1.png)no-repeat;">
                            中建三局西安奥体中心
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu2.png)no-repeat;">
                            中建八局西安国际会议中心
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu3.png)no-repeat;">
                            北京城建北京大兴国际机场
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu4.png)no-repeat;">
                            中建八局山东科技馆新馆
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu5.png)no-repeat;">
                            中建一局阿里云谷园区
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu6.png)no-repeat;">
                            中建八局广西分公司昆明恒隆广场
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu7.png)no-repeat;">
                            中建一局、三局深圳国际会展中心
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu8.png)no-repeat;">
                            中建八局西安丝路国际会览中心
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu9.png)no-repeat;">
                            中建一局城市副中心
                        </div>
                        <div class="xiangxiao" style="background: url(__static__/web/img/xiangmu10.png)no-repeat;">
                            中建三局宁波国华金融大厦项目
                        </div>
                    </div>

                </div>

 css

.xiangshang {
    height: 48%;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.box1,
.box2{
    width: 3530px;
    height: 100%;
    position: absolute;
}

.box2{
    left: 3530px;
}

 js

// 项目滚动特效
                var _box1 = document.getelementbyid("box1");
                var _box2 = document.getelementbyid("box2");
                var _box3 = document.getelementbyid("box3");
                var _box4 = document.getelementbyid("box4");
                var x = 0;
                var y = 0;
                var fun = function() {
                    _box1.style.left = x + 'px';
                    _box2.style.left = (x + 3530) + 'px';
                    _box3.style.right = y + 'px';
                    _box4.style.right = (y + 3530) + 'px';
                    x--;
                    y--;
                    if ((x + 3530) == 0) {
                        x = 0;
                    }
                    if ((y + 3530) == 0) {
                        y = 0;
                    }
                }
                $(".xiangxiao").mouseover(function() {
                    $(this).css("background-size", "120% 120%");
                });
                $(".xiangxiao").mouseout(function() {
                    $(this).css("background-size", "100% 100%");
                });
                setinterval(fun, 10);

这里box1和box2就是上面所说的两组图片了,可以看到他们中的内容是一模一样的,通过js我们可以看出他的计算和移动过程,那么这个box3和box4就是反方向的移动计算,在html和css里并没有表现出来,同时为了展现鼠标悬停的效果,在鼠标经过时加上了背景图片放大的特效。这样滚动样式的特效就做好了。