dw按钮图片滚动js_js实现图片无缝滚动特效
首先,无缝滚动的第一个重点就是——动。关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识。
JS中的创建定时器的方法包括两种:setTimeout和setInterval。首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,第二个参数是一个数字,代表过多少毫秒之后定时器执行函数。它们的不同在于:setTimeout 是在经过指定的时间之后,只执行一次函数,而setInterval,则是每间隔指定时间,就执行函数一次,说简单点的话,就是setInterval是setTimeout的循环版。
关于定时器还有一个用法:消除定时器,方法同样有两种:clearTimeout 和 clearInterval,它们分别对应不同类型的定时器。另外,它们都只接收一个参数,这个参数是定时器返回的一个值(我在chrome中调试发现这个返回值都是数字),用于指定消除那个定时器。
定时器的知识掌握之后,就开始分析怎样使用定时器让元素动起来。其实这个很简单,就是类似电影的原理一样,让元素在很短的时间内发生连续的位移,我们看起来的话这个元素就想是在不停地运动啦。关于怎么让元素产生位移,通过JS修改元素的样式就可以实现,例如
oUl.style.left = oUl.offsetLeft + speed + 'px';
上面的代码中speed就是每次产生的位移。关于speed使用还挺有意思的:我们可以修改speed的正负值来修改滚动的方向。
另外,关于元素的属性 offsetLeft 我个人认为需要注意两点:offsetLeft的值由它自己通过定位的left和自己设定的margin的和、offsetLeft它是相对于它的包含层的距离(offsetTop类似)。当然这都是我自己的理解,肯定不是很准确,这个坑记着,下次专门解决它。
让元素动起来的原理基本就是这样,下面开始分析这个无缝滚动展示图片的实现方法,我举得例子都是向左滚动的,向右的原理一样,代码中有提到:
首先假设需要循环滚动的图片只有4张,为了满足图片滚动起来有循环的要求,就需要把图片如图(1)这样做:
这样当第一张图片1滚动出边框时,后面的图片1则出现在图片4的后面,这样效果看起来就和循环一样~
当图片滚动到下面的这种情况时:
继续滚动就会导致图片后面出现空白,就不是循环滚动的效果了,其实这点也是程序的关键所在,每当图片滚动到图(2)这种情况时,就应该让图片重新回到图(1)那种状态再继续滚动,这样的话就形成了无缝循环滚动的效果。
另外拓展一下程序写了鼠标移入图片停止滚动,移出继续滚动的效果,就是利用消除定时器的方法实现的,代码很简单就不介绍了。还有我为了样式好看一点,把图片都设置为160*120的尺寸使用的,大家运行代码是需要自己准备图片。
代码如下:
Title
*{
margin: 0;
padding: 0;
}
#div1{
width: 640px;
height: 120px;
margin: 100px auto;
background-color: #646464;
position: relative;
overflow: hidden;
}
#div1 ul{
position:absolute;
left:0;
top:0;
overflow: hidden;
background-color: #3b7796;
}
#div1 ul li{
float: left;
width: 160px;
height: 120px;
list-style: none;
}
window.onload = function(){
var oDiv = document.getElementById('div1');
var oUl = document.getElementById('ul1');
var speed = 2;//初始化速度
oUl.innerHTML += oUl.innerHTML;//图片内容*2-----参考图(2)
var oLi= document.getElementsByTagName('li');
oUl.style.width = oLi.length*160+'px';//设置ul的宽度使图片可以放下
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
function move(){
if(oUl.offsetLeft
oUl.style.left = 0;
}
if(oUl.offsetLeft > 0){//向右滚动,当靠右的图1移出边框时
oUl.style.left = -(oUl.offsetWidth/2)+'px';
}
oUl.style.left = oUl.offsetLeft + speed + 'px';
}
oBtn1.addEventListener('click',function(){
speed = -2;
},false);
oBtn2.addEventListener('click',function(){
speed = 2;
},false);
var timer = setInterval(move,30);//全局变量 ,保存返回的定时器
oDiv.addEventListener('mouseout', function () {
timer = setInterval(move,30);
},false);
oDiv.addEventListener('mousemove', function () {
clearInterval(timer);//鼠标移入清除定时器
},false);
}
以上就是js实现无缝滚动特效的详细代码,希望对大家的学习有所帮助。
dw按钮图片滚动js_js实现图片无缝滚动特效相关推荐
- android 动画无缝滚动,CSS3动画之无缝滚动
与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧 HTML结构:
- php无缝滚动文字,JQuery文字无缝滚动效果实现方法
本文主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 推荐一个JQuery的无缝文字滚动效果,同时也可以滚 ...
- vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...
- html横向自动滚动代码,不间断无缝滚动代码(横向、竖向)
一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆副本,通过不断改变demo1的scrollTop或者scroll ...
- html自动滚动代码,html文字无缝滚动代码
实例一: 经测试代码如下: 滚动板 body { font: 12px/1 "宋体",SimSun,serif; background:#fff; color:#000; } .s ...
- react表格无缝滚动_js实现表格无缝滚动效果
table表格无缝向上滚动 height: 500px; overflow: hidden; position: relative; width: 1000px; margin: 100px auto ...
- js php滚动图代码,JavaScript_JS实现的N多简单无缝滚动代码(包含图文效果),本文实例讲述了JS实现的N多简 - phpStudy...
JS实现的N多简单无缝滚动代码(包含图文效果) 本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. ...
- vue中使用vue-seamless-scroll插件无缝滚动
需求:使用vue-seamless-scroll插件实现列表无缝滚动,也可以添加相应的点击跳转,点击事件会存在点击失效的问题.支持上下左右无缝滚动,单步滚动停留时间,以及水平方向的手动切换. 效果图: ...
- dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件(巨详细)
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...
最新文章
- Windows8 Metro开发 (02) : AppBar控件之TopAppBar
- 等待多个并发事件完成的模型
- 代码创建 WPF 旋转动画
- windows安装python3步骤_Windows下python3和python2安装与一起使用
- 读WebTrends的Javascript源码笔记
- WordPress去掉分类链接中category目录的两种方法
- jquery boxy
- 双模 5G 拍照最强?— X30 Pro 评测
- java或android国内外手机号码正则表达式
- java中ASCII与中文互转
- mysql-8.0.28-winx64的安装
- 数控编程软件可模拟刀具在三维曲面上的实时加工过程
- [转载]海康摄像头_2
- 无障碍设计标准中的对比度
- 在Pycharm中更新安装最新版本pip,安装tensorflow
- Spring boot 集成 ureport (三) 报表存储至数据库
- ThinkPad笔记本风扇转速控制软件
- 曾经我们并肩作战,敬未来一杯,敬资本一杯
- JavaScript中bind的用法
- mysql——索引的简单介绍