前端小插件之手写js循环滚动特效
很多前端都离不开滚动的特效，调用插件繁琐，后期更改麻烦，考虑到这些因素，自己写了一套无限循环滚动的小特效。
首先滚动特效很好写，用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循环滚动特效的更多相关文章
- 手写JS无缝滚动插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 手写js面向对象选项卡插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- 放弃antd table，基于React手写一个虚拟滚动的表格
缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...
- WORD2003电子签名插件(支持手写、签章)
1.引言 WORD电子签名插件,支持手写.本地电子图章.以及网络图章功能.软件使用VC6,以ATL方式编写,软件小巧精致. 这是我学习ATL的成果,学习过程及程序的编写,前前后后共用了一个多月的时间, ...
- 基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目
功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
- cocos2dx手写js绑定C++
这两天连续查阅了js绑定c++的非常多文章 , 有手动与自己主动两种方式 . 本来想用自己主动绑定的 , 可是NDK一直下载不下来.....就给算了 . 以下总结一下手动绑定的实现过程 : 一共三步 ...
- 手写js代码（一）javascript数组循环遍历之forEach
注:原文地址http://blog.csdn.net/oscar999/article/details/8671546 我这里是仿照学习! 1.js的数组循环遍历 ①数组的遍历首先想到的是for()循 ...
- 微信小程序：手写日历组件
一.前言 最近公司要做一个酒店入住的小程序,不可避免的一定会使用到日历,而小程序没有内置的日历组件.在网上看了一下也没有非常适合需求的日历,于是自己写了一个. 二.代码 1. 原理分析 写一个日历只需 ...
随机推荐
- css 盒子下
1.padding 有小属性 padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px; 小属性 ...
- 初识V4l2（二）-------浅析video_register_device
在V4l2初识(一)中,我们已经知道当插上一个摄像头的时候,在uvc_driver.c中最终会调用函数video_register_device函数.接下来我们就简要分析这个函数做了哪些事情,揭开其神 ...
- Virtualbox 修改硬盘的序列号等信息 例
Virtualbox 修改硬盘的序列号等信息 例 http://blog.csdn.net/eidolon8/article/details/42709365 原创 2015年01月14日 14:24 ...
- selenium 定位 页面上两个完全一样的元素
在测试过程中发现页面上有两个保存按钮的元素的xpath一模一样,如下图: google了好久才找到解决办法,发现自己还是比较弱!!!解决方法如下: selenium.click("xpath ...
- 创建war类型项目（六）
1. 创建maven project时选择packaging为war: 2. 在webapp文件夹下新建META-INF和WEB-INF/web.xml web.xml模板 <?xml vers ...
- DRL强化学习：
IT博客网 热点推荐 推荐博客 编程语言 数据库 前端 IT博客网 > 域名隐私保护 免费 DRL前沿之:Hierarchical Deep Reinforcement Learning 来源: ...
- JOI2013-2019题解
JOI2013-2019题解 Link
- C++中整型变量的存储大小和范围
一.代码查看 #include <iostream> #include <climits> using namespace std; int main(void) { cout ...
- hunter-冲刺合集
冲刺合集 一·项目相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 hunter--冲刺集合 团队名称 hunter小组 作业目标 最终 ...
- Postman测试后台使用@RequestBody接收参数的坑
问题原因:我在使用PostMan测试接口时发现数据传递不过来,是因为请求体定义为JSON数据,自动就传递不过来,虽然问题简单,但由于之前这个用的较少,所以就忽略了这点. 解决问题链接:https:// ...