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

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

html

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

css

 .wrap{height:30px;overflow: hidden;position: absolute;top:;left:;width: 100%}
p{margin:;height: 30px;width: 100%}
.content p{
position: absolute;
}
@-webkit-keyframes anim1{
0% {top: 30px;opacity:}
50% {top: -30px;opacity:}
75% {top: -30px ;opacity:}
100%{top:30px;opacity:}
}
@-webkit-keyframes anim2{ 0% {top: -30px;opacity:}
25% {top: 30px;opacity:}
50% {top: 30px;opacity:}
100%{top: -30px;opacity:}
} .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里并没有表现出来,同时为了展现鼠标悬停的效果,在鼠标经过时加上了背景图片放大的特效。这样滚动样式的特效就做好了。

前端小插件之手写js循环滚动特效的更多相关文章

  1. 手写JS无缝滚动插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. 手写js面向对象选项卡插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  4. 放弃antd table,基于React手写一个虚拟滚动的表格

    缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...

  5. WORD2003电子签名插件(支持手写、签章)

    1.引言 WORD电子签名插件,支持手写.本地电子图章.以及网络图章功能.软件使用VC6,以ATL方式编写,软件小巧精致. 这是我学习ATL的成果,学习过程及程序的编写,前前后后共用了一个多月的时间, ...

  6. 基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  7. cocos2dx手写js绑定C++

    这两天连续查阅了js绑定c++的非常多文章  , 有手动与自己主动两种方式 . 本来想用自己主动绑定的 , 可是NDK一直下载不下来.....就给算了 . 以下总结一下手动绑定的实现过程 : 一共三步 ...

  8. 手写js代码(一)javascript数组循环遍历之forEach

    注:原文地址http://blog.csdn.net/oscar999/article/details/8671546 我这里是仿照学习! 1.js的数组循环遍历 ①数组的遍历首先想到的是for()循 ...

  9. 微信小程序:手写日历组件

    一.前言 最近公司要做一个酒店入住的小程序,不可避免的一定会使用到日历,而小程序没有内置的日历组件.在网上看了一下也没有非常适合需求的日历,于是自己写了一个. 二.代码 1. 原理分析 写一个日历只需 ...

随机推荐

  1. c# 第三节 vs的安装

    本节内容: 学会安装vs 一:下载 地址:http://down.lansedongli.com/view/30323.html 二.vs2015支持的操作系统 三.vs2015的硬件要求 四.安装 ...

  2. 20187101021-王方《面面相对象程序设计java》第十三周实验总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  3. docker 持久化存储

    1.data Volume  mysql5.7:dockerfile FROM debian:stretch-slim # add our user and group first to make s ...

  4. windows上传文件到 linux的hdfs

    一.windows上传文件到 linux的hdfs 1.先在 centos 上开启 hdfs, 用 jps 可以看到下面信息, 说明完成开启 2.在win上配置 hadoop (https://www ...

  5. 学习:API断点和条件记录断点和内存断点的配合

    前言:感觉可能与之前有点相同,主要是介绍shark恒老师说的一种断点方法,结合了API和条件记录进行下断点 适用条件:当我们利用简单的WINDOWS API函数如MessageBoxW/A 又或者获取 ...

  6. 切换node版本

    首先将原来的安装包删了,在控制面板中删除然后在https://nodejs.org/dist/找到想要的版本号 再找到msi文件

  7. 【CF1097F】Alex and a TV Show

    [CF1097F]Alex and a TV Show 题面 洛谷 题解 我们对于某个集合中的每个\(i\),令\(f(i)\)表示\(i\)作为约数出现次数的奇偶性. 因为只要因为奇偶性只有\(0, ...

  8. [LeetCode] 924. Minimize Malware Spread 最大程度上减少恶意软件的传播

    In a network of nodes, each node i is directly connected to another node j if and only if graph[i][j ...

  9. [LeetCode] 623. Add One Row to Tree 二叉树中增加一行

    Given the root of a binary tree, then value v and depth d, you need to add a row of nodes with value ...

  10. 1,[VS入门教程] 使用Visual Studio写c语言 入门与技巧精品文~~~~下载安装篇

    Microsoft Visual Studio是微软(俗称巨硬)公司出品的强大IDE(Integrated Development Environment 集成开发环境),功能强大齐全,界面舒服之类的 ...