前端小插件之手写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: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;
}

// 项目滚动特效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里并没有表现出来，同时为了展现鼠标悬停的效果，在鼠标经过时加上了背景图片放大的特效。这样滚动样式的特效就做好了。

转载于:https://www.cnblogs.com/qihongbao/p/11071983.html

前端小插件之手写js循环滚动特效相关推荐

web 前端签名插件_手写签名插件—jSignature
jSignature 是一个通过捕捉笔画的矢量轮廓输出多种格式数据的jQuery插件,通过该插件我们可以实现绘画板.手写签名等功能. 使用该插件需要引入 jQuery 和jSignature.js,首 ...
javascript算法+手写js面试题
链表 function ListNode(val, next) {this.val = (val===undefined ? 0 : val)this.next = (next===undefined ...
【2022前端面试】CSS手写面试题汇总（加紧收藏）
[2022前端面试]CSS手写面试题汇总(加紧收藏) 更新时间:2022年3月3日把答案一起写上,但是希望大家在看之前思考一下,如果有好的建议,跪求改正! 本文致力于建设前端面试题库,欢迎兄弟们投稿 ...
【每日手写JS代码】
文章目录一. 手写JS 1-1 数组方法 1月5号数组扁平化 1月6号 Array.prototype.map() 1月7号 Array.prototype.filter() 1月8号 Array ...
js修炼——手写全屏滚动插件
全屏滚动是目前网站开发常用的效果,笔者也曾使用过类似插件,但是对此类插件的开发一直抱有强烈兴趣,而今在前人的经验指导下,终于领悟到了一些插件开发的思维. 如下效果: 接下来看PageSwitch.js ...
记录一下小程序的手写签名组件
文章目录前言一..js文件的内容二..json文件的内容三..wxml文件的内容四..wxss文件的内容五.要引用的.wxml文件的内容六.要引用的.js文件的内容七.总结前言由于 ...
【面试题】「中高级前端面试」JavaScript手写代码无敌秘籍
大厂面试题分享面试题库前端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库 1. 实现一个new操作符 new操作符做了这些事: 它创建了一个全新的对象. 它会被执行[[Proto ...
前端工程师常考手写面试题指南
实现 add(1)(2)(3) 函数柯里化概念: 柯里化(Currying)是把接受多个参数的函数转变为接受一个单一参数的函数,并且返回接受余下的参数且返回结果的新函数的技术. 1)粗暴版 funct ...
AI识别图片识别微信小程序（手写OCR）
使用腾讯云手写OCR API的微信小程序 GitHub地址主要功能:识别图片形式的手写笔记并展示 //appid等作为全局变量定义在了app.js里//使用时需将相应字段添加到app.js文件中gl ...

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

前端小插件之手写js循环滚动特效相关推荐

最新文章

热门文章